Three files, one app

Every playground has three plain-text files: HTML (body markup), CSS, and JS. Switch tabs at the top of the editor to edit each. The Preview view shows the rendered result inside a sandboxed iframe; the Code view shows the Monaco editor. The editor toolbar also has Data (attach a Database from the Data Sheets feature — see Using Data Sheets from a Playground) and Assets (media uploads — see Assets) tabs.

Device preview

The Preview toolbar has a device picker: Desktop (full width), Tablet (768 px-wide canvas), and Mobile (375 px-wide canvas), with a rotate button for the smaller two. The picker resizes the canvas only — the @media-query breakpoints used by the Style drawer are independent and cut in at ≤ 1024 px (Tablet) and ≤ 640 px (Mobile).

Sandbox constraints

Your code runs inside an iframe with sandbox="allow-scripts allow-forms" and no allow-same-origin. This means:

You cannot use localStorage, sessionStorage, IndexedDB, or cookies (the origin is null).
You cannot access the embedding page or read parent-window data.
You can use vanilla DOM, modern JS, and fetch to public CORS-enabled APIs.
You can talk to FlowFn via the injected window.flowfn SDK (see SDK reference).

Format and shortcuts

The editor is Monaco — the same editor that powers VS Code. Most shortcuts work as expected. Shift+Alt+F formats the document; the format icon in the editor toolbar does the same. Use the Save button in the header to persist your changes — Ctrl/Cmd+S is intentionally not bound so it won't fight the browser's save shortcut.

Side drawers — visual authoring without leaving the canvas

Three left-side drawers let non-coders (and coders in a hurry) edit a playground without touching raw code. Only one can be open at a time:

Style drawer — visual CSS controls (background, text colour, padding, margin, radius, font size, alignment, weight) for the inspected element across three breakpoints. Writes go directly into your CSS file. See Visual styles.
Behaviors drawer — no-code (event → action) rules (e.g. "when this button is clicked, hide that div") that compile into a managed JS block at the bottom of your JS file. See No-code behaviors.
AI assistant — chat-driven authoring. See Playground AI assistant.

Bottom drawer — Keys, Console, Inspect

A collapsible bottom drawer hosts three tabs:

Keys — list and edit the @key bindings on your DOM. See @keys and workflow triggers.
Console — a live stream of console.log/info/warn/error/debug from the sandboxed iframe. See Playground console.
Inspect — click-to-select on the live preview, plus the @key assign form and "Refine with AI" action. See Inspect mode & refine with AI.

How code is wired together

FlowFn assembles your three files into a single HTML document for the iframe. The order is: a <style> tag with your CSS in the head, your HTML body markup, the SDK script (so window.flowfn is defined), then your JS. This means top-level flowfn.data.get(...) calls work without waiting for DOMContentLoaded.

The HTML / CSS / JS editor