diff --git a/lul/index.html b/lul/index.html
new file mode 100644
index 00000000..1ce33f04
--- /dev/null
+++ b/lul/index.html
@@ -0,0 +1,28 @@
+<!doctype html>
+
+<iframe src="http://localhost:8080" width=800 height=800 id="ifr"></iframe>
+<button id="load">Load an image</button>
+<button id="extract">extract</button>
+
+<script src="https://cdn.jsdelivr.net/npm/comlinkjs@3.0.2/umd/comlink.js"></script>
+<script>
+const ifr = document.all.ifr;
+const squoosh = Comlink.proxy(ifr.contentWindow);
+
+async function load() {
+  const blob = await fetch("/profile.jpg").then(resp => resp.blob());
+  await squoosh.setFile(blob);
+  console.log('done')
+}
+document.all.load.onclick = load;
+
+async function extract() {
+  const file = await squoosh.getBlob(1);
+  console.log('asdf', file)
+  const url = URL.createObjectURL(file);
+  const img = document.createElement('img');
+  img.src = url;
+  document.body.append(img);
+}
+document.all.extract.onclick = extract;
+</script>
diff --git a/lul/profile.jpg b/lul/profile.jpg
new file mode 100644
index 00000000..9247c343
Binary files /dev/null and b/lul/profile.jpg differ
diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index c93c1c33..52d9c7c4 100644
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -36,6 +36,7 @@ export default class App extends Component<Props, State> {
     file: undefined,
     Compress: undefined,
   };
+  private compressInstance?: import('../compress').default;
 
   snackbar?: SnackBarElement;
 
@@ -69,6 +70,7 @@ export default class App extends Component<Props, State> {
     });
 
     window.addEventListener('popstate', this.onPopState);
+    this.exposeAPI();
   }
 
   @bind
@@ -103,6 +105,21 @@ export default class App extends Component<Props, State> {
     this.setState({ isEditorOpen: true });
   }
 
+  private exposeAPI() {
+    const api = {
+      setFile: (blob: Blob, name: string) => {
+        this.setState({ file: new File([blob], name) });
+      },
+      getBlob: async (side: 0 | 1) => {
+        if (!this.state.file || !this.compressInstance) {
+          throw new Error('No file has been loaded');
+        }
+        return this.compressInstance.state.images[side].file;
+      },
+    };
+    expose(api, self.parent);
+  }
+
   render({}: Props, { file, isEditorOpen, Compress }: State) {
     return (
       <div id="app" class={style.app}>
@@ -110,7 +127,12 @@ export default class App extends Component<Props, State> {
           {!isEditorOpen
             ? <Intro onFile={this.onIntroPickFile} showSnack={this.showSnack} />
             : (Compress)
-              ? <Compress file={file!} showSnack={this.showSnack} onBack={back} />
+              ? <Compress
+                  ref={i => this.compressInstance = i}
+                  file={file!}
+                  showSnack={this.showSnack}
+                  onBack={this.onBack}
+              />
               : <loading-spinner class={style.appLoader}/>
           }
           <snack-bar ref={linkRef(this, 'snackbar')} />
