What are playgrounds?
Playgrounds are small interactive web apps you author inside FlowFn using plain HTML, CSS, and JavaScript. They run in a sandboxed iframe, can be published at a public URL, embedded on other sites, and wired to your workflows in a single click.
What can you build?
- Custom forms with branded styling that submit to a workflow.
- Mini-dashboards rendered from a Data sheet inside the playground.
- Internal tools — buttons, calculators, lookups — backed by workflow logic on the server side.
- AI demos — UI prototypes that fire AI workflow runs and render the result.
Key features
- Isolated execution. Your code runs in a sandboxed iframe with no access to FlowFn's storage or the embedding page.
- @key bindings. Tag any element to fire a workflow trigger or capture an input value with a one-line click in Inspect mode.
- AI assistant. Describe what you want; the assistant writes (or refines) the HTML/CSS/JS for you.
- Assets. Upload images, video, audio — get stable public URLs to use in your code.
- Data sheets. Excel-style tables exposed to your JS via
flowfn.data.*. - Embed anywhere. Generate an embed token and restrict it to a list of parent domains.
- Password protection. Optionally require a password before public visitors can load the playground.
Status and lifecycle
Each playground has a status: draft (visible only to your team), published (reachable at /p/<slug> or your custom domain), or archived (hidden from public).
Plan limits cap how many playgrounds, assets per playground, embed allowlist domains, and BYOK AI providers your team can have. See Billing & Plans for the per-tier numbers.
Page branding & SEO
A published playground carries its own browser-tab title, search description, keywords, and favicon. In the editor's Code tab, open the settings (gear) button in the toolbar: on the Home tab it edits your home page's title, description, and keywords; on any other page tab it edits that page's own SEO. Upload a favicon image on the Uploads tab. They render into the page head so browsers, search engines, and social link-preview cards pick them up, and save with the playground when you click Save.
Search visibility & isolation
SEO is off by default and plan-gated. Turn on Enable SEO (and optionally Generate sitemap & robots.txt) under Search visibility in the Home settings. SEO only takes effect when your site is served on its own subdomain or custom domain (bound as an app's site root): there, pages are indexable and listed in your-domain.com/sitemap.xml. Served under flowfn.com/p/<slug> a playground is always kept out of search (noindex, never in flowfn.com's sitemap) — so your site's SEO never affects flowfn.com, and flowfn.com never affects yours. Only published playgrounds are exposed; drafts aren't.
The same Enable SEO control now exists on forms, visualizers and interactive agents — each has its own Search visibility section with optional SEO title, description and keywords, and follows the same rule: indexable only on your own subdomain or custom domain, never under flowfn.com.
You don't have to write the metadata yourself: ask the playground AI assistant to "write the SEO" and it drafts the page title, description, and keywords for your home page and each sub-page as Pending Changes you approve. (Approving the content doesn't enable indexing — you still flip Enable SEO when you're ready.)
Starter templates
Don't want to start from scratch? The template library ships playground templates (todo list, feedback form, live poll, product card swiper, etc.) you can clone in one click — full HTML/CSS/JS plus seed sheets and rows.