diff --git a/example/demo.ts b/example/demo.ts
index 6966f0b..97441e0 100644
--- a/example/demo.ts
+++ b/example/demo.ts
@@ -11,7 +11,7 @@ await configure({ addDevices: true });
 
 // mount framebuffer & dsp
 fs.mounts.get('/dev').createDevice('/fb0', framebuffer({ canvas }));
-fs.mounts.get('/dev').createDevice('/dsp', dsp({audioContext}));
+fs.mounts.get('/dev').createDevice('/dsp', dsp({ audioContext }));
 
 // example: write static to framebuffer
 const screen = new Uint8Array(canvas.width * canvas.height * 4);
diff --git a/src/dsp.ts b/src/dsp.ts
index f17363e..dfc9e9d 100644
--- a/src/dsp.ts
+++ b/src/dsp.ts
@@ -34,7 +34,7 @@ registerProcessor('zenfs-dsp', ZenFSDsp)
 
 `], { type: 'application/javascript' }))
 
-export const dsp = (options = {}) => {
+export const dsp = (options:any = {}) => {
   const audioCtx = options.audioContext || new AudioContext()
   const audioBuffer = new ArrayBuffer(audioCtx.sampleRate * 4)
 
@@ -60,8 +60,9 @@ export const dsp = (options = {}) => {
     name: 'dsp',
     isBuffered: false,
     read () {},
-    write({ device: { driver: { name }, ino }, fs, path, position }, data) {
-      if (data?.byteLength){
+    write (writeOptions:any = {}, data:ArrayLike<number>) {
+      const { device: { driver: { name }, ino }, fs, path, position } = writeOptions
+      if (data?.length){
         new Uint8Array(audioBuffer).set(data)
         dsp.port?.postMessage(new Float32Array(audioBuffer))
       }
diff --git a/src/framebuffer.ts b/src/framebuffer.ts
index 154d41d..d5b8309 100644
--- a/src/framebuffer.ts
+++ b/src/framebuffer.ts
@@ -1,12 +1,17 @@
-export function framebuffer({ canvas }) {
-    const ctx = canvas.getContext('2d')
+export function framebuffer(options:any = {}) {
+    if (!options.canvas) {
+      options.canvas = document.createElement('canvas')
+      document.body.appendChild(options.canvas)
+    }
+    const ctx = options.canvas.getContext('2d')
     return {
       name: 'framebuffer',
       isBuffered: false,
       read () {},
-      write ({ device: { driver: { name }, ino }, fs, path, position }, data) {
-        if (data?.byteLength){
-          const imageData = new ImageData(new Uint8ClampedArray(data), canvas.width, canvas.height)
+      write (writeOptions:any = {}, data:ArrayLike<number>) {
+        const { device: { driver: { name }, ino }, fs, path, position } = writeOptions
+        if (data?.length){
+          const imageData = new ImageData(new Uint8ClampedArray(data), options.canvas.width, options.canvas.height)
           ctx.putImageData(imageData, 0, 0)
         }
       }
diff --git a/src/input.ts b/src/input.ts
index 3af73cf..78227c8 100644
--- a/src/input.ts
+++ b/src/input.ts
@@ -1 +1 @@
-export const input = ({ canvas }) => {};
+export const input = (options:any = {}) => {};
diff --git a/tsconfig.json b/tsconfig.json
index f8c141b..9f1a5a1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,10 +3,12 @@
 		"module": "NodeNext",
 		"target": "ES2020",
 		"outDir": "dist",
-		"lib": ["ESNext", "ESNext.Disposable"],
+		"lib": ["ESNext", "ESNext.Disposable", "dom"],
 		"moduleResolution": "NodeNext",
 		"declaration": true,
-		"strict": true
+		"strict": true,
+		"allowImportingTsExtensions": true,
+    "noEmit": true
 	},
 	"include": ["src/**/*.ts"],
 	"exclude": ["node_modules"]