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

# UI Preview

> Click through a sample app and watch every Zapyd API call, response and webhook it triggers.

export const FLOW_BUILDER_URL = "https://zapyd-flow-builder.vercel.app";

export const Demo = () => {
  const ref = useRef(null);
  const [src, setSrc] = useState("");
  const [top, setTop] = useState(113);
  useEffect(() => {
    const theme = () => document.documentElement.classList.contains("dark") ? "dark" : "light";
    const base = location.hostname === "localhost" ? "http://localhost:5180" : FLOW_BUILDER_URL;
    setSrc(base + "/?view=demo&embed=1&theme=" + theme() + location.hash);
    const el = ref.current;
    const box = el && el.parentElement ? el.parentElement.getBoundingClientRect() : null;
    if (box) setTop(box.top + scrollY);
    const mo = new MutationObserver(() => {
      const win = ref.current ? ref.current.contentWindow : null;
      if (win) win.postMessage({
        type: "zapyd:theme",
        theme: theme()
      }, "*");
    });
    mo.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"]
    });
    return () => mo.disconnect();
  }, []);
  return <div style={{
    height: "calc(100dvh - " + top + "px)"
  }}>
      {src ? <iframe ref={ref} src={src} title="Zapyd demo" className="zp-flow-builder" allow="clipboard-write" /> : null}
    </div>;
};

<Demo />


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.