diff --git a/packages/web/src/components/editor.tsx b/packages/web/src/components/editor.tsx
index 7e5f82a5..8b67ed46 100644
--- a/packages/web/src/components/editor.tsx
+++ b/packages/web/src/components/editor.tsx
@@ -7,11 +7,12 @@ import {
 } from "@/settings.json";
 import { javascript } from "@codemirror/lang-javascript";
 import { python } from "@codemirror/lang-python";
-import { EditorState, Prec, Compartment, Extension } from "@codemirror/state";
+import { Compartment, EditorState, Extension, Prec } from "@codemirror/state";
 import { EditorView, keymap, lineNumbers } from "@codemirror/view";
 import { evalKeymap, flashField, remoteEvalFlash } from "@flok-editor/cm-eval";
 import { tidal } from "@flok-editor/lang-tidal";
 import type { Document } from "@flok-editor/session";
+import { highlightExtension } from "@strudel/codemirror";
 import CodeMirror, {
   ReactCodeMirrorProps,
   ReactCodeMirrorRef,
@@ -19,7 +20,6 @@ import CodeMirror, {
 import React, { useEffect, useState } from "react";
 import { yCollab } from "y-codemirror.next";
 import { UndoManager } from "yjs";
-import { highlightExtension } from '@strudel/codemirror';
 
 const defaultLanguage = "javascript";
 const langByTarget = langByTargetUntyped as { [lang: string]: string };
@@ -121,28 +121,25 @@ const flokSetup = (
   ];
 };
 
-export interface EditorProps extends ReactCodeMirrorProps {
-  document?: Document;
-}
-
 // Code example from:
 // https://codemirror.net/examples/config/#dynamic-configuration
 // Allows toggling of extensions based on string shortkey
-// 
+//
 const toggleWith = (key: string, extension: Extension) => {
-  let comp = new Compartment;
+  let comp = new Compartment();
 
   function toggle(view: EditorView) {
     let on = comp.get(view.state) == extension;
     view.dispatch({
-      effects: comp.reconfigure(on ? [] : extension)
-    })
+      effects: comp.reconfigure(on ? [] : extension),
+    });
     return true;
   }
-  return [
-    comp.of([]),
-    keymap.of([{key, run: toggle}])
-  ]
+  return [comp.of([]), keymap.of([{ key, run: toggle }])];
+};
+
+export interface EditorProps extends ReactCodeMirrorProps {
+  document?: Document;
 }
 
 export const Editor = React.forwardRef(
@@ -175,10 +172,8 @@ export const Editor = React.forwardRef(
       languageExtension(),
       highlightExtension,
       readOnly ? EditorState.readOnly.of(true) : [],
-      // toggle linenumbers on/off
-      toggleWith('shift-ctrl-l', lineNumbers()),
-      // toggle linewrapping on/off
-      toggleWith('shift-ctrl-w', EditorView.lineWrapping) 
+      toggleWith("shift-ctrl-l", lineNumbers()), // toggle linenumbers on/off
+      toggleWith("shift-ctrl-w", EditorView.lineWrapping), // toggle linewrapping on/off
     ];
 
     // If it's read-only, put a div in front of the editor so that the user
diff --git a/packages/web/src/components/web-target-iframe.tsx b/packages/web/src/components/web-target-iframe.tsx
new file mode 100644
index 00000000..2341c25b
--- /dev/null
+++ b/packages/web/src/components/web-target-iframe.tsx
@@ -0,0 +1,47 @@
+import { useQuery } from "@/hooks/use-query";
+import { EvalMessage, Session } from "@flok-editor/session";
+import { useEffect, useRef } from "react";
+
+export interface WebTargetIframeProps {
+  target: string;
+  session: Session | null;
+}
+
+export const WebTargetIframe = ({ target, session }: WebTargetIframeProps) => {
+  const ref = useRef<HTMLIFrameElement | null>(null);
+
+  const query = useQuery();
+  const noWebEval = query.get("noWebEval")?.split(",") || [];
+
+  // Check if we should load the target
+  if (noWebEval.includes(target) || noWebEval.includes("*")) {
+    return null;
+  }
+
+  // Handle evaluation messages from session
+  useEffect(() => {
+    if (!session || !ref.current) return;
+
+    const handler = (msg: EvalMessage) => {
+      const payload = {
+        type: "eval",
+        body: msg,
+      };
+      ref.current?.contentWindow?.postMessage(payload, "*");
+    };
+
+    session.on(`eval:${target}`, handler);
+
+    return () => {
+      session.off(`eval:${target}`, handler);
+    };
+  }, [session, ref]);
+
+  return (
+    <iframe
+      ref={ref}
+      src={`/frames/${target}`}
+      className="absolute inset-0 w-full h-full"
+    />
+  );
+};
diff --git a/packages/web/src/hooks/use-animation-frame.tsx b/packages/web/src/hooks/use-animation-frame.tsx
new file mode 100644
index 00000000..d733bfd0
--- /dev/null
+++ b/packages/web/src/hooks/use-animation-frame.tsx
@@ -0,0 +1,21 @@
+import { useRef, useEffect, useCallback } from "react";
+
+export function useAnimationFrame(callback: (timestamp: number) => void) {
+  const requestId = useRef<number>();
+
+  const animate = useCallback(
+    (timestamp: number) => {
+      callback(timestamp);
+      requestId.current = requestAnimationFrame(animate);
+    },
+    [callback]
+  );
+
+  useEffect(() => {
+    requestId.current = requestAnimationFrame(animate);
+
+    return () => {
+      cancelAnimationFrame(requestId.current!);
+    };
+  }, [animate]);
+}
diff --git a/packages/web/src/hooks/use-eval-handler.tsx b/packages/web/src/hooks/use-eval-handler.tsx
new file mode 100644
index 00000000..036fa35e
--- /dev/null
+++ b/packages/web/src/hooks/use-eval-handler.tsx
@@ -0,0 +1,21 @@
+import { EvalMessage } from "@flok-editor/session";
+import { useEffect } from "react";
+
+export function useEvalHandler(callback: (message: EvalMessage) => void) {
+  useEffect(() => {
+    const handleEval = (event: MessageEvent) => {
+      if (event.data.type === "eval") {
+        const msg = event.data.body as EvalMessage;
+        callback(msg);
+      }
+    };
+
+    window.addEventListener("message", handleEval);
+
+    return () => {
+      window.removeEventListener("message", handleEval);
+    };
+  }, [callback]);
+
+  return;
+}
diff --git a/packages/web/src/hooks/use-hydra.tsx b/packages/web/src/hooks/use-hydra.tsx
deleted file mode 100644
index b15d06a7..00000000
--- a/packages/web/src/hooks/use-hydra.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useWebTarget } from "@/hooks/use-web-target";
-import { HydraWrapper } from "@/lib/hydra-wrapper";
-import type { Session } from "@flok-editor/session";
-import { useRef } from "react";
-
-export function useHydra(
-  session: Session | null,
-  onError?: (err: unknown) => void,
-  onWarning?: (msg: string) => void
-) {
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
-
-  const webTarget = useWebTarget<HydraWrapper>(
-    "hydra",
-    session,
-    async () => {
-      console.log("Create HydraWrapper");
-
-      const hydra = new HydraWrapper({
-        canvas: canvasRef.current!,
-        onError,
-        onWarning,
-      });
-
-      hydra.initialize();
-
-      return hydra;
-    },
-    {
-      deps: [canvasRef],
-      loadIf: ([canvasRef]) => canvasRef.current,
-      onEval: (instance, { body }) => {
-        instance.tryEval(body);
-      },
-      onError,
-    }
-  );
-
-  return { ...webTarget, canvasRef };
-}
diff --git a/packages/web/src/hooks/use-mercury.tsx b/packages/web/src/hooks/use-mercury.tsx
deleted file mode 100644
index cea90399..00000000
--- a/packages/web/src/hooks/use-mercury.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useWebTarget } from "@/hooks/use-web-target";
-import { MercuryWrapper } from "@/lib/mercury-wrapper";
-import type { Session } from "@flok-editor/session";
-
-export function useMercury(
-  session: Session | null,
-  onError?: (err: unknown) => void,
-  onWarning?: (msg: string) => void
-) {
-  return useWebTarget<MercuryWrapper>(
-    "mercury-web",
-    session,
-    async () => {
-      console.log("Create Mercury Wrapper");
-
-      const mercury = new MercuryWrapper({ onError, onWarning });
-
-      return mercury;
-    },
-    {
-      onEval: (instance, { body }) => instance.tryEval(body),
-      onError,
-    }
-  );
-}
diff --git a/packages/web/src/hooks/use-strudel-codemirror-extensions.ts b/packages/web/src/hooks/use-strudel-codemirror-extensions.ts
new file mode 100644
index 00000000..0a4e1fcd
--- /dev/null
+++ b/packages/web/src/hooks/use-strudel-codemirror-extensions.ts
@@ -0,0 +1,31 @@
+import { Session } from "@flok-editor/session";
+import {
+  highlightMiniLocations,
+  updateMiniLocations,
+} from "@strudel/codemirror";
+import { ReactCodeMirrorRef } from "@uiw/react-codemirror";
+import { useCallback } from "react";
+import { useAnimationFrame } from "./use-animation-frame";
+import { forEachDocumentContext } from "@/lib/utils";
+
+export function useStrudelCodemirrorExtensions(
+  session: Session | null,
+  editorRefs: React.RefObject<ReactCodeMirrorRef>[]
+) {
+  useAnimationFrame(
+    useCallback(() => {
+      if (!session) return;
+
+      forEachDocumentContext(
+        (ctx, editor) => {
+          const view = editor?.view;
+          if (!view) return;
+          updateMiniLocations(view, ctx.miniLocations || []);
+          highlightMiniLocations(view, ctx.phase || 0, ctx.haps || []);
+        },
+        session,
+        editorRefs
+      );
+    }, [session, editorRefs])
+  );
+}
diff --git a/packages/web/src/hooks/use-strudel.tsx b/packages/web/src/hooks/use-strudel.tsx
deleted file mode 100644
index 6020c99d..00000000
--- a/packages/web/src/hooks/use-strudel.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useWebTarget } from "@/hooks/use-web-target";
-import { StrudelWrapper } from "@/lib/strudel-wrapper";
-import type { Session } from "@flok-editor/session";
-import { ReactCodeMirrorRef } from "@uiw/react-codemirror";
-
-export function useStrudel(
-  session: Session | null,
-  onError: (err: unknown) => void,
-  onWarning: (msg: string) => void,
-  editorRefs: React.RefObject<ReactCodeMirrorRef>[]
-) {
-  return useWebTarget<StrudelWrapper>(
-    "strudel",
-    session,
-    async () => {
-      console.log("Create StrudelWrapper");
-      const strudel = new StrudelWrapper({
-        onError,
-        onWarning,
-        editorRefs,
-        session,
-      });
-
-      console.log("Import Strudel modules");
-      await strudel.importModules();
-
-      return strudel;
-    },
-    {
-      onEval: (instance, msg) => instance.tryEval(msg),
-      onError,
-    }
-  );
-}
diff --git a/packages/web/src/lib/hydra-wrapper.ts b/packages/web/src/lib/hydra-wrapper.ts
index 597fc941..1ce2f6b6 100644
--- a/packages/web/src/lib/hydra-wrapper.ts
+++ b/packages/web/src/lib/hydra-wrapper.ts
@@ -73,7 +73,6 @@ export class HydraWrapper {
 
     try {
       await eval?.(`(async () => {\n${code}\n})()`);
-      this._onError("");
     } catch (error) {
       console.error(error);
       this._onError(`${error}`);
diff --git a/packages/web/src/lib/strudel-wrapper.ts b/packages/web/src/lib/strudel-wrapper.ts
index 7a944c1c..8bcd36c7 100644
--- a/packages/web/src/lib/strudel-wrapper.ts
+++ b/packages/web/src/lib/strudel-wrapper.ts
@@ -1,36 +1,29 @@
-import type { Session, EvalMessage } from "@flok-editor/session";
+import type { EvalMessage } from "@flok-editor/session";
 import {
-  repl,
+  Framer,
+  Pattern,
   controls,
   evalScope,
-  stack,
   noteToMidi,
-  Pattern,
+  repl,
+  stack,
   valueToMidi,
-  Framer,
 } from "@strudel/core";
+import { registerSoundfonts } from "@strudel/soundfonts";
 import { transpiler } from "@strudel/transpiler";
 import {
   getAudioContext,
   initAudioOnFirstClick,
-  webaudioOutput,
-  samples,
   registerSynthSounds,
+  samples,
+  webaudioOutput,
 } from "@strudel/webaudio";
-import { registerSoundfonts } from "@strudel/soundfonts";
-import {
-  updateMiniLocations,
-  highlightMiniLocations,
-} from "@strudel/codemirror";
-import { ReactCodeMirrorRef } from "@uiw/react-codemirror";
+import { updateDocumentsContext } from "./utils";
 
 export type ErrorHandler = (error: string) => void;
 
 controls.createParam("docId");
 
-const getDocumentIndex = (docId: string, session: Session | null) =>
-  session?.getDocuments().findIndex((d) => d.id === docId) ?? -1;
-
 export class StrudelWrapper {
   initialized: boolean = false;
 
@@ -38,26 +31,47 @@ export class StrudelWrapper {
   protected _onWarning: ErrorHandler;
   protected _repl: any;
   protected _docPatterns: any;
-  protected _editorRefs: React.RefObject<ReactCodeMirrorRef>[];
-  protected _session: Session | null;
   protected framer?: any;
 
   constructor({
     onError,
     onWarning,
-    editorRefs,
-    session,
   }: {
     onError: ErrorHandler;
     onWarning: ErrorHandler;
-    editorRefs: React.RefObject<ReactCodeMirrorRef>[];
-    session: Session | null;
   }) {
     this._docPatterns = {};
     this._onError = onError || (() => {});
     this._onWarning = onWarning || (() => {});
-    this._editorRefs = editorRefs;
-    this._session = session;
+  }
+
+  async importModules() {
+    initAudioOnFirstClick();
+    // import desired modules and add them to the eval scope
+    await evalScope(
+      import("@strudel/core"),
+      import("@strudel/midi"),
+      import("@strudel/mini"),
+      import("@strudel/tonal"),
+      import("@strudel/osc"),
+      import("@strudel/serial"),
+      import("@strudel/soundfonts"),
+      import("@strudel/webaudio"),
+      controls
+    );
+    try {
+      await Promise.all([
+        loadSamples(),
+        registerSynthSounds(),
+        registerSoundfonts(),
+      ]);
+    } catch (err) {
+      this._onWarning(`Failed to load default samples EmuSP12: ${err}`);
+    }
+  }
+
+  async initialize() {
+    if (this.initialized) return;
 
     let lastFrame: number | null = null;
     this.framer = new Framer(
@@ -67,9 +81,6 @@ export class StrudelWrapper {
           lastFrame = phase;
           return;
         }
-        if (!this._editorRefs) {
-          return;
-        }
         if (!this._repl.scheduler.pattern) {
           return;
         }
@@ -84,61 +95,25 @@ export class StrudelWrapper {
         );
         // iterate over each strudel doc
         Object.keys(this._docPatterns).forEach((docId: any) => {
-          const index = getDocumentIndex(docId, this._session);
-          const editorRef = this._editorRefs?.[index];
-          if (!editorRef?.current?.view) {
-            return;
-          }
           // filter out haps belonging to this document (docId is set in tryEval)
           const haps = currentFrame.filter((h: any) => h.value.docId === docId);
           // update codemirror view to highlight this frame's haps
-
-          highlightMiniLocations(editorRef.current.view, phase, haps);
+          updateDocumentsContext(docId, { haps, phase });
         });
       },
       (err: any) => {
-        console.error("strudel draw error", err);
+        console.error("[strudel] draw error", err);
       }
     );
-  }
 
-  async importModules() {
-    initAudioOnFirstClick();
-    // import desired modules and add them to the eval scope
-    await evalScope(
-      import("@strudel/core"),
-      import("@strudel/midi"),
-      import("@strudel/mini"),
-      import("@strudel/tonal"),
-      import("@strudel/osc"),
-      import("@strudel/serial"),
-      import("@strudel/soundfonts"),
-      import("@strudel/webaudio"),
-      controls
-    );
-    try {
-      await Promise.all([
-        loadSamples(),
-        registerSynthSounds(),
-        registerSoundfonts(),
-      ]);
-    } catch (err) {
-      this._onWarning(`Failed to load default samples EmuSP12: ${err}`);
-    }
-  }
-
-  async initialize() {
     this._repl = repl({
       defaultOutput: webaudioOutput,
       afterEval: (options: any) => {
         // assumes docId is injected at end end as a comment
         const docId = options.code.split("//").slice(-1)[0];
-        const index = getDocumentIndex(docId, this._session);
-        const editorRef = this._editorRefs?.[index];
-        if (editorRef?.current) {
-          const miniLocations = options.meta?.miniLocations;
-          updateMiniLocations(editorRef.current.view, miniLocations);
-        }
+        if (!docId) return;
+        const miniLocations = options.meta?.miniLocations;
+        updateDocumentsContext(docId, { miniLocations });
       },
       beforeEval: () => {},
       onSchedulerError: (e: unknown) => this._onError(`${e}`),
@@ -147,27 +122,32 @@ export class StrudelWrapper {
       transpiler,
     });
 
-    this.framer.start(); // TODO: when to start stop?
+    this.framer.start();
 
     // For some reason, we need to make a no-op evaluation ("silence") to make
     // sure everything is loaded correctly.
-    const pattern = await this._repl.evaluate(`silence`);
+    const pattern = await this._repl.evaluate(`silence//`);
     await this._repl.scheduler.setPattern(pattern, true);
 
     this.initialized = true;
   }
 
+  async dispose() {
+    if (this.framer) {
+      this.framer.stop();
+    }
+  }
+
   async tryEval(msg: EvalMessage) {
     if (!this.initialized) await this.initialize();
     try {
       const { body: code, docId } = msg;
       // little hack that injects the docId at the end of the code to make it available in afterEval
-      const pattern = await this._repl.evaluate(code + `//${docId}`);
+      const pattern = await this._repl.evaluate(`${code}//${docId}`);
       if (pattern) {
         this._docPatterns[docId] = pattern.docId(docId); // docId is needed for highlighting
         const allPatterns = stack(...Object.values(this._docPatterns));
         await this._repl.scheduler.setPattern(allPatterns, true);
-        this._onError("");
       }
     } catch (err) {
       console.error(err);
diff --git a/packages/web/src/lib/utils.ts b/packages/web/src/lib/utils.ts
index 60eea464..309a1be5 100644
--- a/packages/web/src/lib/utils.ts
+++ b/packages/web/src/lib/utils.ts
@@ -1,10 +1,12 @@
+import { type Session } from "@flok-editor/session";
+import { ReactCodeMirrorRef } from "@uiw/react-codemirror";
 import { ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import {
-  uniqueNamesGenerator,
   adjectives,
-  colors,
   animals,
+  colors,
+  uniqueNamesGenerator,
 } from "unique-names-generator";
 import { v4 as uuidv4 } from "uuid";
 
@@ -73,3 +75,48 @@ export function code2hash(code: string) {
 export function hash2code(hash: string) {
   return base64ToUnicode(decodeURIComponent(hash));
 }
+
+export function sendToast(
+  variant: "warning" | "destructive",
+  title: string,
+  message: string,
+  pre?: boolean
+) {
+  window.parent.postMessage(
+    {
+      type: "toast",
+      body: {
+        variant,
+        title,
+        message,
+        pre,
+      },
+    },
+    "*"
+  );
+}
+
+export function updateDocumentsContext(docId: string, context: object) {
+  if (typeof window.parent.documentsContext === "undefined") {
+    window.parent.documentsContext = {};
+  }
+  const prevContext = window.parent.documentsContext[docId] || {};
+  window.parent.documentsContext[docId] = { ...prevContext, ...context };
+}
+
+export function forEachDocumentContext(
+  callback: (context: any, editor: ReactCodeMirrorRef | null) => void,
+  session: Session,
+  editorRefs: React.RefObject<ReactCodeMirrorRef>[]
+) {
+  const documentsContext = window.documentsContext || {};
+  for (const docId in documentsContext) {
+    const context = documentsContext[docId];
+    const index = getDocumentIndex(docId, session);
+    const editor = editorRefs[index]?.current;
+    callback(context, editor);
+  }
+}
+
+export const getDocumentIndex = (docId: string, session: Session | null) =>
+  session?.getDocuments().findIndex((d) => d.id === docId) ?? -1;
diff --git a/packages/web/src/main.tsx b/packages/web/src/main.tsx
index fddec212..759dc238 100644
--- a/packages/web/src/main.tsx
+++ b/packages/web/src/main.tsx
@@ -5,7 +5,7 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import ErrorPage from "./error-page";
 import "./index.css";
 import { loader as rootLoader } from "./routes/root";
-import SessionPage from "./routes/session";
+import { webTargets } from "@/settings.json";
 
 const router = createBrowserRouter([
   {
@@ -15,9 +15,12 @@ const router = createBrowserRouter([
   },
   {
     path: "s/:name",
-    element: <SessionPage />,
-    loader: ({ params: { name } }) => ({ name }),
+    lazy: () => import("./routes/session"),
   },
+  ...webTargets.map((target) => ({
+    path: `frames/${target}`,
+    lazy: () => import(`./routes/frames/${target}.tsx`),
+  })),
 ]);
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
diff --git a/packages/web/src/routes/frames/hydra.tsx b/packages/web/src/routes/frames/hydra.tsx
new file mode 100644
index 00000000..5f29dacf
--- /dev/null
+++ b/packages/web/src/routes/frames/hydra.tsx
@@ -0,0 +1,54 @@
+import HydraCanvas from "@/components/hydra-canvas";
+import { useEvalHandler } from "@/hooks/use-eval-handler";
+import { HydraWrapper } from "@/lib/hydra-wrapper";
+import { sendToast } from "@/lib/utils";
+import { isWebglSupported } from "@/lib/webgl-detector";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+export function Component() {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const hasWebGl = useMemo(() => isWebglSupported(), []);
+  const [instance, setInstance] = useState<HydraWrapper | null>(null);
+
+  useEffect(() => {
+    if (hasWebGl) return;
+    sendToast(
+      "warning",
+      "WebGL not available",
+      "WebGL is disabled or not supported, so Hydra was not initialized"
+    );
+  }, [hasWebGl]);
+
+  useEffect(() => {
+    if (!hasWebGl) return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    (async () => {
+      const hydra = new HydraWrapper({
+        canvas,
+        onError: (err) => {
+          sendToast("destructive", "Hydra error", err.toString());
+        },
+        onWarning: (msg) => {
+          sendToast("warning", "Hydra warning", msg);
+        },
+      });
+
+      await hydra.initialize();
+      setInstance(hydra);
+    })();
+  }, []);
+
+  useEvalHandler(
+    useCallback(
+      (msg) => {
+        if (!instance) return;
+        instance.tryEval(msg.body);
+      },
+      [instance]
+    )
+  );
+
+  return hasWebGl && canvasRef && <HydraCanvas ref={canvasRef} fullscreen />;
+}
diff --git a/packages/web/src/routes/frames/mercury-web.tsx b/packages/web/src/routes/frames/mercury-web.tsx
new file mode 100644
index 00000000..b2371332
--- /dev/null
+++ b/packages/web/src/routes/frames/mercury-web.tsx
@@ -0,0 +1,36 @@
+import { useEvalHandler } from "@/hooks/use-eval-handler";
+import { MercuryWrapper } from "@/lib/mercury-wrapper";
+import { sendToast } from "@/lib/utils";
+import { type EvalMessage } from "@flok-editor/session";
+import { useCallback, useEffect, useState } from "react";
+
+export function Component() {
+  const [instance, setInstance] = useState<any>(null);
+
+  useEffect(() => {
+    (async () => {
+      const instance = new MercuryWrapper({
+        onError: (err) => {
+          sendToast("destructive", "Mercury error", err.toString());
+        },
+        onWarning: (msg) => {
+          sendToast("warning", "Mercury warning", msg);
+        },
+      });
+
+      setInstance(instance);
+    })();
+  }, []);
+
+  useEvalHandler(
+    useCallback(
+      (msg: EvalMessage) => {
+        if (!instance) return;
+        instance.tryEval(msg.body);
+      },
+      [instance]
+    )
+  );
+
+  return null;
+}
diff --git a/packages/web/src/routes/frames/strudel.tsx b/packages/web/src/routes/frames/strudel.tsx
new file mode 100644
index 00000000..434bdb10
--- /dev/null
+++ b/packages/web/src/routes/frames/strudel.tsx
@@ -0,0 +1,37 @@
+import { useEvalHandler } from "@/hooks/use-eval-handler";
+import { StrudelWrapper } from "@/lib/strudel-wrapper";
+import { sendToast } from "@/lib/utils";
+import { type EvalMessage } from "@flok-editor/session";
+import { useCallback, useEffect, useState } from "react";
+
+export function Component() {
+  const [instance, setInstance] = useState<any>(null);
+
+  useEffect(() => {
+    (async () => {
+      const instance = new StrudelWrapper({
+        onError: (err) => {
+          sendToast("destructive", "Strudel error", err.toString());
+        },
+        onWarning: (msg) => {
+          sendToast("warning", "Strudel warning", msg);
+        },
+      });
+
+      await instance.importModules();
+      setInstance(instance);
+    })();
+  }, []);
+
+  useEvalHandler(
+    useCallback(
+      (msg: EvalMessage) => {
+        if (!instance) return;
+        instance.tryEval(msg);
+      },
+      [instance]
+    )
+  );
+
+  return null;
+}
diff --git a/packages/web/src/routes/session.tsx b/packages/web/src/routes/session.tsx
index 91710c39..8eb9eb58 100644
--- a/packages/web/src/routes/session.tsx
+++ b/packages/web/src/routes/session.tsx
@@ -1,7 +1,6 @@
 import { CommandsButton } from "@/components/commands-button";
 import { ConfigureDialog } from "@/components/configure-dialog";
 import { Editor } from "@/components/editor";
-import HydraCanvas from "@/components/hydra-canvas";
 import { MessagesPanel } from "@/components/messages-panel";
 import { Mosaic } from "@/components/mosaic";
 import { Pane } from "@/components/pane";
@@ -12,13 +11,12 @@ import { ShareUrlDialog } from "@/components/share-url-dialog";
 import { PubSubState, StatusBar, SyncState } from "@/components/status-bar";
 import { Toaster } from "@/components/ui/toaster";
 import UsernameDialog from "@/components/username-dialog";
+import { WebTargetIframe } from "@/components/web-target-iframe";
 import { WelcomeDialog } from "@/components/welcome-dialog";
 import { useHash } from "@/hooks/use-hash";
-import { useHydra } from "@/hooks/use-hydra";
-import { useMercury } from "@/hooks/use-mercury";
 import { useQuery } from "@/hooks/use-query";
 import { useShortcut } from "@/hooks/use-shortcut";
-import { useStrudel } from "@/hooks/use-strudel";
+import { useStrudelCodemirrorExtensions } from "@/hooks/use-strudel-codemirror-extensions";
 import { useToast } from "@/hooks/use-toast";
 import {
   cn,
@@ -28,18 +26,27 @@ import {
   mod,
   store,
 } from "@/lib/utils";
-import { isWebglSupported } from "@/lib/webgl-detector";
 import {
   defaultTarget,
   knownTargets,
   panicCodes as panicCodesUntyped,
   webTargets,
 } from "@/settings.json";
-import { Document, Session } from "@flok-editor/session";
-import { ReactCodeMirrorRef } from "@uiw/react-codemirror";
+import { Session, type Document } from "@flok-editor/session";
+import { type ReactCodeMirrorRef } from "@uiw/react-codemirror";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Helmet } from "react-helmet-async";
-import { useLoaderData, useNavigate } from "react-router-dom";
+import {
+  LoaderFunctionArgs,
+  useLoaderData,
+  useNavigate,
+} from "react-router-dom";
+
+declare global {
+  interface Window {
+    documentsContext: { [docId: string]: any };
+  }
+}
 
 const panicCodes = panicCodesUntyped as { [target: string]: string };
 
@@ -54,7 +61,11 @@ export interface Message {
   body: string[];
 }
 
-export default function SessionPage() {
+export async function loader({ params }: LoaderFunctionArgs) {
+  return { name: params.name };
+}
+
+export function Component() {
   const query = useQuery();
   const [hash, setHash] = useHash();
 
@@ -89,7 +100,7 @@ export default function SessionPage() {
     useRef<ReactCodeMirrorRef>(null)
   );
 
-  const hasWebGl = useMemo(() => isWebglSupported(), []);
+  useStrudelCodemirrorExtensions(session, editorRefs);
 
   const { toast: _toast } = useToast();
   const hideErrors = !!query.get("hideErrors");
@@ -275,18 +286,6 @@ export default function SessionPage() {
     return () => newSession.destroy();
   }, [name]);
 
-  // Show a warning if WebGL is not enabled
-  useEffect(() => {
-    if (!session || hasWebGl) return;
-
-    toast({
-      variant: "warning",
-      title: "WebGL not available",
-      description:
-        "WebGL is disabled or not supported, so Hydra was not initialized",
-    });
-  }, [session, hasWebGl]);
-
   useEffect(() => {
     if (!session) return;
     console.log(`Setting user on session to '${username}'`);
@@ -341,23 +340,26 @@ export default function SessionPage() {
     setSessionUrl(`${currentURL}#${hashString}`);
   }, [session, shareUrlDialogOpen]);
 
-  // Load external libraries
-  useStrudel(
-    session,
-    (err) => handleWebError("Strudel", err),
-    (msg) => handleWebWarning("Strudel", msg),
-    editorRefs
-  );
-  useMercury(
-    session,
-    (err) => handleWebError("Mercury", err),
-    (msg) => handleWebWarning("Mercury", msg)
-  );
-  const { canvasRef: hydraCanvasRef } = useHydra(
-    session,
-    (err) => handleWebError("Hydra", err),
-    (msg) => handleWebWarning("Hydra", msg)
-  );
+  // Handle window messages from iframes
+  useEffect(() => {
+    const messageHandler = (event: MessageEvent) => {
+      if (event.data.type === "toast") {
+        const { variant, title, message, pre } = event.data.body;
+        const description = pre ? (
+          <pre className="whitespace-pre-wrap">{message}</pre>
+        ) : (
+          message
+        );
+        toast({ variant, title, description });
+      }
+    };
+
+    window.addEventListener("message", messageHandler);
+
+    return () => {
+      window.removeEventListener("message", messageHandler);
+    };
+  }, []);
 
   const focusEditor = (i: number) => {
     const ref = editorRefs[i].current;
@@ -473,24 +475,6 @@ export default function SessionPage() {
     );
   };
 
-  const handleWebError = (title: string, error: unknown) => {
-    if (!error) return;
-    toast({
-      variant: "destructive",
-      title,
-      description: <pre className="whitespace-pre-wrap">{String(error)}</pre>,
-    });
-  };
-
-  const handleWebWarning = (title: string, msg: string) => {
-    if (!msg) return;
-    toast({
-      variant: "warning",
-      title,
-      description: msg,
-    });
-  };
-
   const handleAutoShowToggleClick = useCallback((pressed: boolean) => {
     store.set("messages:autoshow", pressed);
     setAutoShowMessages(pressed);
@@ -508,6 +492,14 @@ export default function SessionPage() {
 
   const bgOpacity = query.get("bgOpacity") || "1.0";
 
+  const activeWebTargets = useMemo(
+    () =>
+      webTargets.filter((target) =>
+        documents.some((doc) => doc.target === target)
+      ),
+    [documents]
+  );
+
   return (
     <div style={{ backgroundColor: `rgb(0 0 0 / ${bgOpacity})` }}>
       <Helmet>
@@ -580,9 +572,9 @@ export default function SessionPage() {
           </Pane>
         ))}
       />
-      {hasWebGl && hydraCanvasRef && (
-        <HydraCanvas ref={hydraCanvasRef} fullscreen />
-      )}
+      {activeWebTargets.map((target) => (
+        <WebTargetIframe key={target} session={session} target={target} />
+      ))}
       <div
         className={cn(
           "fixed top-1 right-1 flex m-1",