Steps
- Open Playgrounds from the dashboard sidebar.
- Click New playground.
- Pick the parent app (every playground belongs to one, just like workflows and forms). Give the playground a name and slug — the slug is the public URL path at
/p/your-slug. - Optionally add a description. If the playground is empty when first opened, the AI assistant will use the description to scaffold a starting point.
- Click Create. You land in the editor with three code tabs (HTML / CSS / JS) and four top-level views (Code, Preview, Assets, Data).
Starting from a template
Skip the blank canvas by picking a playground template from the template library. Templates ship with HTML/CSS/JS, keys, and seed sheet rows — you'll be asked for a destination app and a slug, then dropped into the editor with everything wired up. Asset uploads aren't carried over (templates use placeholder image URLs).
Save behavior
Code edits stay local until you click Save (or press Cmd/Ctrl-S). The Save button glows when there are unsaved changes, and you're warned before leaving the editor with unsaved work. Page and component content edits also stay local and save together with this one Save button — though creating or deleting a page or component takes effect immediately. Asset uploads and Data sheet edits auto-save server-side as you make them.
Publishing
Switch the status chip in the header from Draft to Published and turn on the Public toggle to expose the playground at /p/your-slug. To restrict access, set a password (see Sharing & Embedding).
Slug rules
Slugs are lowercase, alphanumeric, hyphen-separated. They must be unique across the platform — when you save, FlowFn will tell you if the slug is already taken.