> ## Documentation Index
> Fetch the complete documentation index at: https://prefab.prefect.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed

> Embed external content like videos, maps, and custom HTML/JS in a sandboxed iframe.

export const ComponentPreview = ({json, height, resizable, bare, hideJson, playground, children}) => {
  const hostRef = React.useRef(null);
  const handleRef = React.useRef(null);
  const cardRef = React.useRef(null);
  const containerRef = React.useRef(null);
  const [previewWidth, setPreviewWidth] = React.useState(null);
  const [isDragging, setIsDragging] = React.useState(false);
  const [playgroundHref, setPlaygroundHref] = React.useState(null);
  React.useEffect(function () {
    if (!playground) return;
    var isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
    var path = isLocal ? "/playground" : "/docs/playground";
    var url = new URL(path, window.location.href);
    url.hash = "code=" + playground;
    setPlaygroundHref(url.href);
  }, [playground]);
  var jsonStr = typeof json === "string" ? json : JSON.stringify(json, null, 2);
  React.useEffect(function () {
    if (cardRef.current) {
      var card = cardRef.current.closest(".group");
      if (card) card.classList.remove("group");
    }
    var host = hostRef.current;
    if (!host || !json) return;
    function mount() {
      if (!window.__prefab || !host) return;
      var dark = document.documentElement.classList.contains("dark");
      handleRef.current = window.__prefab.mountPreview(host, jsonStr, {
        dark: dark
      });
      if (bare && host.shadowRoot) {
        var m = host.shadowRoot.querySelector("[data-prefab-mount]");
        if (m) m.style.background = "transparent";
      }
    }
    if (window.__prefab) {
      mount();
    } else {
      if (!window.__prefabLoading) {
        if (!window.__prefabReady) {
          var s = document.createElement("script");
          s.src = "/renderer.js";
          document.head.appendChild(s);
        }
        window.__prefabLoading = new Promise(function (resolve) {
          function check() {
            if (window.__prefabReady) {
              window.__prefabReady.then(resolve);
            } else {
              setTimeout(check, 10);
            }
          }
          check();
        });
      }
      window.__prefabLoading.then(mount);
    }
    var observer = new MutationObserver(function () {
      var dark = document.documentElement.classList.contains("dark");
      if (handleRef.current) handleRef.current.setDark(dark);
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"]
    });
    return function () {
      observer.disconnect();
      if (handleRef.current) {
        handleRef.current.unmount();
        handleRef.current = null;
      }
    };
  }, [json]);
  function startResize(e) {
    e.preventDefault();
    var startX = e.clientX;
    var startW = hostRef.current ? hostRef.current.offsetWidth : 0;
    var maxW = containerRef.current ? containerRef.current.offsetWidth - 10 : startW;
    setIsDragging(true);
    function onMove(ev) {
      var w = Math.max(260, Math.min(startW + (ev.clientX - startX), maxW));
      setPreviewWidth(w);
    }
    function onUp() {
      document.removeEventListener("mousemove", onMove);
      document.removeEventListener("mouseup", onUp);
      setIsDragging(false);
    }
    document.addEventListener("mousemove", onMove);
    document.addEventListener("mouseup", onUp);
  }
  if (bare) {
    return <div ref={hostRef} />;
  }
  if (resizable) {
    return <Card>
        <div ref={cardRef} />
        <div ref={containerRef} style={{
      display: "flex",
      position: "relative",
      overflow: "hidden"
    }}>
          <div ref={hostRef} style={{
      flex: previewWidth ? "none" : 1,
      width: previewWidth ? previewWidth + "px" : undefined,
      minWidth: 0
    }} />
          <div onMouseDown={startResize} style={{
      width: "14px",
      flexShrink: 0,
      cursor: "col-resize",
      background: isDragging ? "var(--border, #e5e7eb)" : "color-mix(in srgb, var(--border, #e5e7eb) 40%, transparent)",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      transition: "background 0.15s",
      userSelect: "none"
    }}>
            <svg width="6" height="24" style={{
      opacity: 0.5
    }}>
              <circle cx="2" cy="4" r="1.2" fill="currentColor" />
              <circle cx="2" cy="9" r="1.2" fill="currentColor" />
              <circle cx="2" cy="14" r="1.2" fill="currentColor" />
              <circle cx="2" cy="19" r="1.2" fill="currentColor" />
              <circle cx="5" cy="4" r="1.2" fill="currentColor" />
              <circle cx="5" cy="9" r="1.2" fill="currentColor" />
              <circle cx="5" cy="14" r="1.2" fill="currentColor" />
              <circle cx="5" cy="19" r="1.2" fill="currentColor" />
            </svg>
          </div>
          <div style={{
      flex: previewWidth ? 1 : "0 0 24px",
      minWidth: "24px",
      background: "repeating-linear-gradient(-45deg, transparent, transparent 3px, var(--border, #e5e7eb) 3px, var(--border, #e5e7eb) 4px)",
      opacity: 0.4
    }} />
          {previewWidth && <div style={{
      position: "absolute",
      bottom: "8px",
      right: "8px",
      background: "var(--background, white)",
      border: "1px solid var(--border, #e5e7eb)",
      borderRadius: "4px",
      padding: "1px 6px",
      fontSize: "11px",
      fontFamily: "monospace",
      color: "var(--muted-foreground, #6b7280)",
      pointerEvents: "none"
    }}>
              {previewWidth}px
            </div>}
        </div>
        {playgroundHref && <div style={{
      display: "flex",
      justifyContent: "flex-end",
      padding: "4px 0 8px"
    }}>
            <a href={playgroundHref} target="_blank" rel="noopener noreferrer" style={{
      fontSize: "11px",
      opacity: 0.4,
      textDecoration: "none",
      textDecorationLine: "none",
      borderBottom: "none",
      boxShadow: "none",
      display: "inline-flex",
      alignItems: "center",
      gap: "3px",
      transition: "opacity 0.15s",
      fontWeight: 400
    }} onMouseOver={function (e) {
      e.currentTarget.style.opacity = "0.6";
    }} onMouseOut={function (e) {
      e.currentTarget.style.opacity = "0.4";
    }}>
              Edit in Playground
              <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
            </a>
          </div>}
        <div style={{
      marginBottom: "-2rem"
    }}>{children}</div>
      </Card>;
  }
  return <Card>
      <div ref={cardRef} />
      <div ref={hostRef} />
      {playgroundHref && <div style={{
    display: "flex",
    justifyContent: "flex-end",
    padding: "4px 0 8px"
  }}>
          <a href={playgroundHref} target="_blank" rel="noopener noreferrer" style={{
    fontSize: "11px",
    opacity: 0.4,
    textDecoration: "none",
    textDecorationLine: "none",
    borderBottom: "none",
    boxShadow: "none",
    display: "inline-flex",
    alignItems: "center",
    gap: "3px",
    transition: "opacity 0.15s",
    fontWeight: 400
  }} onMouseOver={function (e) {
    e.currentTarget.style.opacity = "0.6";
  }} onMouseOut={function (e) {
    e.currentTarget.style.opacity = "0.4";
  }}>
            Edit in Playground
            <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
          </a>
        </div>}
      <div style={{
    marginBottom: "-2rem"
  }}>{children}</div>
    </Card>;
};

`Embed` renders an iframe for external content. Pass a `url` for hosted content (YouTube, Google Maps, PDFs) or `html` for custom HTML/JS (Three.js scenes, Canvas visualizations, shader previews).

## Basic Usage

Any URL that works in an iframe works here. The first positional argument is `url`, so `Embed("https://...")` works as shorthand.

<Tabs>
  <Tab title="Google Maps">
    <ComponentPreview json={{"view":{"type":"Embed","url":"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31313.45173960986!2d-77.07343327228305!3d38.903839376406246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7b7b0dc3245fd%3A0xdfcb0cc37e2e6999!2s2112%20Pennsylvania%20Ave%20NW%2C%20Washington%2C%20DC%2020037!5e0!3m2!1sen!2sus!4v1772669563862!5m2!1sen!2sus","width":"100%","height":"400px"}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgRW1iZWQKCkVtYmVkKAogICAgdXJsPSgKICAgICAgICAiaHR0cHM6Ly93d3cuZ29vZ2xlLmNvbS9tYXBzL2VtYmVkP3BiPSIKICAgICAgICAiITFtMTghMW0xMiExbTMhMWQzMTMxMy40NTE3Mzk2MDk4NiIKICAgICAgICAiITJkLTc3LjA3MzQzMzI3MjI4MzA1ITNkMzguOTAzODM5Mzc2NDA2MjQ2IgogICAgICAgICIhMm0zITFmMCEyZjAhM2YwITNtMiExaTEwMjQhMmk3NjghNGYxMy4xIgogICAgICAgICIhM20zITFtMiExczB4ODliN2I3YjBkYzMyNDVmZCUzQTB4ZGZjYjBjYzM3ZTJlNjk5OSIKICAgICAgICAiITJzMjExMiUyMFBlbm5zeWx2YW5pYSUyMEF2ZSUyME5XJTJDJTIwIgogICAgICAgICJXYXNoaW5ndG9uJTJDJTIwREMlMjAyMDAzNyIKICAgICAgICAiITVlMCEzbTIhMXNlbiEyc3VzITR2MTc3MjY2OTU2Mzg2MiE1bTIhMXNlbiEyc3VzIgogICAgKSwKICAgIHdpZHRoPSIxMDAlIiwKICAgIGhlaWdodD0iNDAwcHgiLAopCg">
      <CodeGroup>
        ```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
        from prefab_ui.components import Embed

        Embed(
            url=(
                "https://www.google.com/maps/embed?pb="
                "!1m18!1m12!1m3!1d31313.45173960986"
                "!2d-77.07343327228305!3d38.903839376406246"
                "!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1"
                "!3m3!1m2!1s0x89b7b7b0dc3245fd%3A0xdfcb0cc37e2e6999"
                "!2s2112%20Pennsylvania%20Ave%20NW%2C%20"
                "Washington%2C%20DC%2020037"
                "!5e0!3m2!1sen!2sus!4v1772669563862!5m2!1sen!2sus"
            ),
            width="100%",
            height="400px",
        )
        ```

        ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
        {
          "view": {
            "type": "Embed",
            "url": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31313.45173960986!2d-77.07343327228305!3d38.903839376406246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7b7b0dc3245fd%3A0xdfcb0cc37e2e6999!2s2112%20Pennsylvania%20Ave%20NW%2C%20Washington%2C%20DC%2020037!5e0!3m2!1sen!2sus!4v1772669563862!5m2!1sen!2sus",
            "width": "100%",
            "height": "400px"
          }
        }
        ```
      </CodeGroup>
    </ComponentPreview>
  </Tab>

  <Tab title="YouTube">
    <ComponentPreview json={{"view":{"type":"Embed","url":"https://www.youtube.com/embed/iVdZdLL0CJ4","width":"100%","height":"400px"}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgRW1iZWQKCkVtYmVkKAogICAgdXJsPSJodHRwczovL3d3dy55b3V0dWJlLmNvbS9lbWJlZC9pVmRaZExMMENKNCIsCiAgICB3aWR0aD0iMTAwJSIsCiAgICBoZWlnaHQ9IjQwMHB4IiwKKQo">
      <CodeGroup>
        ```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
        from prefab_ui.components import Embed

        Embed(
            url="https://www.youtube.com/embed/iVdZdLL0CJ4",
            width="100%",
            height="400px",
        )
        ```

        ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
        {
          "view": {
            "type": "Embed",
            "url": "https://www.youtube.com/embed/iVdZdLL0CJ4",
            "width": "100%",
            "height": "400px"
          }
        }
        ```
      </CodeGroup>
    </ComponentPreview>
  </Tab>

  <Tab title="Spotify">
    <ComponentPreview json={{"view":{"type":"Embed","url":"https://open.spotify.com/embed/track/2CgBqLufSdwMt0FMIu1CVn?utm_source=generator","width":"100%","height":"152px"}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgRW1iZWQKCkVtYmVkKAogICAgdXJsPSgKICAgICAgICAiaHR0cHM6Ly9vcGVuLnNwb3RpZnkuY29tL2VtYmVkL3RyYWNrLyIKICAgICAgICAiMkNnQnFMdWZTZHdNdDBGTUl1MUNWbj91dG1fc291cmNlPWdlbmVyYXRvciIKICAgICksCiAgICB3aWR0aD0iMTAwJSIsCiAgICBoZWlnaHQ9IjE1MnB4IiwKKQo">
      <CodeGroup>
        ```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
        from prefab_ui.components import Embed

        Embed(
            url=(
                "https://open.spotify.com/embed/track/"
                "2CgBqLufSdwMt0FMIu1CVn?utm_source=generator"
            ),
            width="100%",
            height="152px",
        )
        ```

        ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
        {
          "view": {
            "type": "Embed",
            "url": "https://open.spotify.com/embed/track/2CgBqLufSdwMt0FMIu1CVn?utm_source=generator",
            "width": "100%",
            "height": "152px"
          }
        }
        ```
      </CodeGroup>
    </ComponentPreview>
  </Tab>
</Tabs>

## HTML Mode

For custom content like interactive visualizations, pass raw HTML via the `html` parameter. The content runs in an isolated iframe, so it can include `<script>` tags, Canvas, WebGL, or any client-side code:

<ComponentPreview json={{"view":{"type":"Embed","html":"<style>\n  html, body { margin: 0; height: 100%; overflow: hidden;\n               background: #1a1a2e; }\n  canvas { display: block; width: 100%; height: 100%;\n           cursor: crosshair; }\n</style>\n<canvas id=\"c\"></canvas>\n<script>\n  const canvas = document.getElementById('c');\n  const ctx = canvas.getContext('2d');\n  canvas.width = canvas.clientWidth;\n  canvas.height = canvas.clientHeight;\n  const particles = [];\n\n  canvas.addEventListener('mousemove', (e) => {\n    for (let i = 0; i < 3; i++) {\n      particles.push({\n        x: e.offsetX, y: e.offsetY,\n        vx: (Math.random() - 0.5) * 4,\n        vy: (Math.random() - 0.5) * 4,\n        life: 1,\n        hue: (Date.now() / 10) % 360,\n      });\n    }\n  });\n\n  function draw() {\n    ctx.fillStyle = 'rgba(26, 26, 46, 0.15)';\n    ctx.fillRect(0, 0, canvas.width, canvas.height);\n    for (let i = particles.length - 1; i >= 0; i--) {\n      const p = particles[i];\n      p.x += p.vx; p.y += p.vy; p.life -= 0.015;\n      if (p.life <= 0) { particles.splice(i, 1); continue; }\n      ctx.beginPath();\n      ctx.arc(p.x, p.y, p.life * 4, 0, Math.PI * 2);\n      ctx.fillStyle =\n        `hsla(${p.hue}, 80%, 60%, ${p.life})`;\n      ctx.fill();\n    }\n    requestAnimationFrame(draw);\n  }\n  draw();\n</script>","width":"100%","height":"250px"}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgRW1iZWQKCkVtYmVkKAogICAgaHRtbD0iIiJcCjxzdHlsZT4KICBodG1sLCBib2R5IHsgbWFyZ2luOiAwOyBoZWlnaHQ6IDEwMCU7IG92ZXJmbG93OiBoaWRkZW47CiAgICAgICAgICAgICAgIGJhY2tncm91bmQ6ICMxYTFhMmU7IH0KICBjYW52YXMgeyBkaXNwbGF5OiBibG9jazsgd2lkdGg6IDEwMCU7IGhlaWdodDogMTAwJTsKICAgICAgICAgICBjdXJzb3I6IGNyb3NzaGFpcjsgfQo8L3N0eWxlPgo8Y2FudmFzIGlkPSJjIj48L2NhbnZhcz4KPHNjcmlwdD4KICBjb25zdCBjYW52YXMgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnYycpOwogIGNvbnN0IGN0eCA9IGNhbnZhcy5nZXRDb250ZXh0KCcyZCcpOwogIGNhbnZhcy53aWR0aCA9IGNhbnZhcy5jbGllbnRXaWR0aDsKICBjYW52YXMuaGVpZ2h0ID0gY2FudmFzLmNsaWVudEhlaWdodDsKICBjb25zdCBwYXJ0aWNsZXMgPSBbXTsKCiAgY2FudmFzLmFkZEV2ZW50TGlzdGVuZXIoJ21vdXNlbW92ZScsIChlKSA9PiB7CiAgICBmb3IgKGxldCBpID0gMDsgaSA8IDM7IGkrKykgewogICAgICBwYXJ0aWNsZXMucHVzaCh7CiAgICAgICAgeDogZS5vZmZzZXRYLCB5OiBlLm9mZnNldFksCiAgICAgICAgdng6IChNYXRoLnJhbmRvbSgpIC0gMC41KSAqIDQsCiAgICAgICAgdnk6IChNYXRoLnJhbmRvbSgpIC0gMC41KSAqIDQsCiAgICAgICAgbGlmZTogMSwKICAgICAgICBodWU6IChEYXRlLm5vdygpIC8gMTApICUgMzYwLAogICAgICB9KTsKICAgIH0KICB9KTsKCiAgZnVuY3Rpb24gZHJhdygpIHsKICAgIGN0eC5maWxsU3R5bGUgPSAncmdiYSgyNiwgMjYsIDQ2LCAwLjE1KSc7CiAgICBjdHguZmlsbFJlY3QoMCwgMCwgY2FudmFzLndpZHRoLCBjYW52YXMuaGVpZ2h0KTsKICAgIGZvciAobGV0IGkgPSBwYXJ0aWNsZXMubGVuZ3RoIC0gMTsgaSA-PSAwOyBpLS0pIHsKICAgICAgY29uc3QgcCA9IHBhcnRpY2xlc1tpXTsKICAgICAgcC54ICs9IHAudng7IHAueSArPSBwLnZ5OyBwLmxpZmUgLT0gMC4wMTU7CiAgICAgIGlmIChwLmxpZmUgPD0gMCkgeyBwYXJ0aWNsZXMuc3BsaWNlKGksIDEpOyBjb250aW51ZTsgfQogICAgICBjdHguYmVnaW5QYXRoKCk7CiAgICAgIGN0eC5hcmMocC54LCBwLnksIHAubGlmZSAqIDQsIDAsIE1hdGguUEkgKiAyKTsKICAgICAgY3R4LmZpbGxTdHlsZSA9CiAgICAgICAgYGhzbGEoJHtwLmh1ZX0sIDgwJSwgNjAlLCAke3AubGlmZX0pYDsKICAgICAgY3R4LmZpbGwoKTsKICAgIH0KICAgIHJlcXVlc3RBbmltYXRpb25GcmFtZShkcmF3KTsKICB9CiAgZHJhdygpOwo8L3NjcmlwdD4iIiIsCiAgICB3aWR0aD0iMTAwJSIsCiAgICBoZWlnaHQ9IjI1MHB4IiwKKQo">
  <CodeGroup>
    ```python Python expandable icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Embed

    Embed(
        html="""\
    <style>
      html, body { margin: 0; height: 100%; overflow: hidden;
                   background: #1a1a2e; }
      canvas { display: block; width: 100%; height: 100%;
               cursor: crosshair; }
    </style>
    <canvas id="c"></canvas>
    <script>
      const canvas = document.getElementById('c');
      const ctx = canvas.getContext('2d');
      canvas.width = canvas.clientWidth;
      canvas.height = canvas.clientHeight;
      const particles = [];

      canvas.addEventListener('mousemove', (e) => {
        for (let i = 0; i < 3; i++) {
          particles.push({
            x: e.offsetX, y: e.offsetY,
            vx: (Math.random() - 0.5) * 4,
            vy: (Math.random() - 0.5) * 4,
            life: 1,
            hue: (Date.now() / 10) % 360,
          });
        }
      });

      function draw() {
        ctx.fillStyle = 'rgba(26, 26, 46, 0.15)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        for (let i = particles.length - 1; i >= 0; i--) {
          const p = particles[i];
          p.x += p.vx; p.y += p.vy; p.life -= 0.015;
          if (p.life <= 0) { particles.splice(i, 1); continue; }
          ctx.beginPath();
          ctx.arc(p.x, p.y, p.life * 4, 0, Math.PI * 2);
          ctx.fillStyle =
            `hsla(${p.hue}, 80%, 60%, ${p.life})`;
          ctx.fill();
        }
        requestAnimationFrame(draw);
      }
      draw();
    </script>""",
        width="100%",
        height="250px",
    )
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "type": "Embed",
        "html": "<style>\n  html, body { margin: 0; height: 100%; overflow: hidden;\n               background: #1a1a2e; }\n  canvas { display: block; width: 100%; height: 100%;\n           cursor: crosshair; }\n</style>\n<canvas id=\"c\"></canvas>\n<script>\n  const canvas = document.getElementById('c');\n  const ctx = canvas.getContext('2d');\n  canvas.width = canvas.clientWidth;\n  canvas.height = canvas.clientHeight;\n  const particles = [];\n\n  canvas.addEventListener('mousemove', (e) => {\n    for (let i = 0; i < 3; i++) {\n      particles.push({\n        x: e.offsetX, y: e.offsetY,\n        vx: (Math.random() - 0.5) * 4,\n        vy: (Math.random() - 0.5) * 4,\n        life: 1,\n        hue: (Date.now() / 10) % 360,\n      });\n    }\n  });\n\n  function draw() {\n    ctx.fillStyle = 'rgba(26, 26, 46, 0.15)';\n    ctx.fillRect(0, 0, canvas.width, canvas.height);\n    for (let i = particles.length - 1; i >= 0; i--) {\n      const p = particles[i];\n      p.x += p.vx; p.y += p.vy; p.life -= 0.015;\n      if (p.life <= 0) { particles.splice(i, 1); continue; }\n      ctx.beginPath();\n      ctx.arc(p.x, p.y, p.life * 4, 0, Math.PI * 2);\n      ctx.fillStyle =\n        `hsla(${p.hue}, 80%, 60%, ${p.life})`;\n      ctx.fill();\n    }\n    requestAnimationFrame(draw);\n  }\n  draw();\n</script>",
        "width": "100%",
        "height": "250px"
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

## From Embed Code

Services like YouTube, Google Maps, and Spotify provide embed codes as raw `<iframe>` HTML. `Embed.from_iframe()` parses the tag and extracts `src`, `width`, `height`, `allow`, and `sandbox` automatically — just paste the snippet:

```python Pasting an embed code theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import Embed

Embed.from_iframe(
    '<iframe src="https://open.spotify.com/embed/track/2CgBqLufSdwMt0FMIu1CVn"'
    ' width="100%" height="352" allow="autoplay; encrypted-media;'
    ' fullscreen; picture-in-picture"></iframe>'
)
```

Bare numeric dimensions (like `height="352"`) are automatically converted to CSS values (`"352px"`). Any keyword arguments override the parsed attributes.

## Sandbox and Permissions

`Embed` exposes two standard HTML iframe attributes for controlling what the embedded content can do: `sandbox` and `allow`. These are independent of each other — `sandbox` restricts capabilities, `allow` grants access to browser APIs.

### sandbox

The HTML [`sandbox`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#sandbox) attribute restricts the iframe's capabilities. By default, no sandbox is applied — the iframe has full capabilities. Set `sandbox` to a space-separated list of permissions to restrict what the content can do:

```python Restricting capabilities theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import Embed

# Scripts can run, but no access to parent origin
Embed(url="https://example.com", sandbox="allow-scripts")

# Scripts + forms + same-origin access
Embed(
    url="https://example.com",
    sandbox="allow-scripts allow-same-origin allow-forms",
)
```

Common sandbox tokens: `allow-scripts`, `allow-same-origin`, `allow-forms`, `allow-popups`, `allow-modals`.

### allow

The HTML [`allow`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#allow) attribute controls which browser Permissions Policy features are available to the embedded content — things like fullscreen, autoplay, camera, microphone, and geolocation. Most embeds don't need this; it's primarily relevant for video embeds (fullscreen button) or content that accesses device APIs:

```python Feature policies theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import Embed

Embed(
    url="https://www.youtube.com/embed/dQw4w9WgXcQ",
    allow="fullscreen; autoplay",
)
```

## API Reference

<Card icon="code" title="Embed Parameters">
  <ParamField body="url" type="str | None" default="None">
    URL to embed (iframe `src`). Mutually exclusive with `html`.
  </ParamField>

  <ParamField body="html" type="str | None" default="None">
    HTML content to embed (iframe `srcdoc`). Mutually exclusive with `url`.
  </ParamField>

  <ParamField body="width" type="str | None" default="None">
    CSS width value with units (e.g., `"100%"`, `"640px"`).
  </ParamField>

  <ParamField body="height" type="str | None" default="None">
    CSS height value with units.
  </ParamField>

  <ParamField body="sandbox" type="str | None" default="None">
    Iframe sandbox attribute. Space-separated list of permissions like `"allow-scripts allow-same-origin"`.
  </ParamField>

  <ParamField body="allow" type="str | None" default="None">
    Iframe allow attribute for feature policies like `"fullscreen; autoplay"`.
  </ParamField>

  <ParamField body="css_class" type="str | None" default="None">
    Additional Tailwind CSS classes.
  </ParamField>
</Card>

## Protocol Reference

```json Embed theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
  "type": "Embed",
  "id?": "string",
  "onMount?": "any",
  "url?": "string",
  "html?": "string",
  "width?": "string",
  "height?": "string",
  "sandbox?": "string",
  "allow?": "string",
  "cssClass?": "string"
}
```

For the complete protocol schema, see [Embed](/protocol/embed).