---
title: Playground
sidebarTitle: Playground
description: Build and preview Prefab components interactively in your browser.
icon: play
mode: wide
---

export const PlaygroundFrame = () => {
  const ref = React.useRef(null);
  const [src, setSrc] = React.useState(null);
  React.useEffect(function () {
    var isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
    var url = isLocal
      ? "/playground.html"
      : "https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@latest/dist/playground.html";
    fetch(url).then(function(r) { return r.text(); }).then(function(html) {
      var blob = new Blob([html], { type: "text/html" });
      setSrc(URL.createObjectURL(blob));
    });
    if (ref.current) {
      ref.current.style.height = "calc(100vh - 60px)";
    }
  }, []);
  if (!src) return null;
  return <iframe ref={ref} src={src} style={{ width: "100%", border: "none" }} sandbox="allow-scripts allow-same-origin" />;
};

<PlaygroundFrame />
