Skip to main content
FlowFn
Sign inStart free
Playgrounds

Tiny apps. Real data. Embed anywhere.

Build an interactive HTML/CSS/JS page in the dashboard, give it sheets and assets, wire its buttons to platform actions or a full workflow — then drop it on your site as an iframe or share the public URL. No build step. No deploy. No glue code.

Code editorBuilt-in sheetsAction bindings
Start freeSee the editor
HTML
CSS
JS
leads · sheet
Run
<button data-key="send_lead">
Email this to sales
</button>
// bound to → slack.post
// inputs filled from flowfn.data.sheets.leads

leads

· 218 rows

#

email

score

status

247

jane@…

92

qualified

248

sam@…

54

new

249

rita@…

88

qualified

Posted to #sales · 0.6s
See the editor

HTML on the left. Sheets on the right. Both live.

Add a button to the HTML, bind it to a platform tool action (Slack post, Stripe customer create, anything in your toolkit), wire inputs from sheet rows or form fields, hit Run.

HTML
CSS
JS
leads · sheet
Run
<button data-key="send_lead">
Email this to sales
</button>
// bound to → slack.post
// inputs filled from flowfn.data.sheets.leads

leads

· 218 rows

#

email

score

status

247

jane@…

92

qualified

248

sam@…

54

new

249

rita@…

88

qualified

Posted to #sales · 0.6s
Core capabilities

A real app surface, not a config blob.

HTML / CSS / JS

Full code editor. Hot-reload sandbox. Author the surface exactly the way you want it — not a no-code mock that breaks the first time you need a custom layout.

Built-in sheets

Tabular data lives next to the code. Read from `flowfn.data.sheets.<name>`, write back from the visitor, or expose the sheet publicly via the data primitives. Rows persist; revisions roll back.

Assets + uploads

Drop images, fonts, CSVs, JSON, fonts straight into the playground. Reference them by URL. Toggle visitor uploads on and visitors can attach files that land in the playground's S3 bucket.

Action bindings

Bind any element with `data-key` to a single platform-tool / AI action — without writing a workflow. Inputs come from sheet rows, form fields, or templated literals. One JS call, one structured action.

AI behavior + chat

Describe what you want in plain English; the AI proposes HTML/CSS/JS or fills the next chunk. A built-in chat panel debugs your code against the live sandbox.

Public + embed + password

Pick a slug for a public URL or generate an embed snippet. Optional password gate. Allowed-domains list controls who can iframe it. Custom domain on Pro+.

Action bindings

A button. A `data-key`. A real action.

Every interactive element in a playground can carry a data-key attribute. In the editor you bind that key to one platform action (or AI model call) plus an input template. When the visitor clicks, the runtime resolves the inputs, validates them server-side, and dispatches the action — synchronously or asynchronously, your choice.

Need a full multi-step pipeline? Bind the button to a workflow trigger instead. Same `data-key` interface; different backend. The visitor doesn't know or care which you picked.

HTML
CSS
JS
leads · sheet
Run
<button data-key="send_lead">
Email this to sales
</button>
// bound to → slack.post
// inputs filled from flowfn.data.sheets.leads

leads

· 218 rows

#

email

score

status

247

jane@…

92

qualified

248

sam@…

54

new

249

rita@…

88

qualified

Posted to #sales · 0.6s
Pair with workflows

A button-to-workflow surface that ships in minutes.

The fastest path from "an internal tool would help" to "the team is using it" is a playground bound to a workflow. The playground is the UI; the workflow is the pipeline. Visitors interact, the workflow runs, results show up — no custom server to write, no front-end to deploy.

Push a workflow output back into a playground sheet and the next render reflects it automatically. Workflows write data, playgrounds show data; the data lives in one shared place.

Trigger

New form submission

Contact form · 12 today

AI step

Classify intent

gpt-4o-mini · returns category

Tool action

Slack · Post to #sales

Routes pricing leads to sales

Run completed · 1.4s
Real teams use it for

The internal tool you keep meaning to build.

Ops admin pages

A page with a list, a search box, and buttons that resolve common tickets — refund this charge, archive that user, post a status update. Sales / CS get it without engineering tickets.

Action bindings

Customer-facing mini tools

Embed a quote builder, a config wizard, a usage explorer inside your product. Hand-rolled HTML, but the buttons hit your real backend through bindings — no extra API to write.

Embed + auth

Public lead-gen apps

Interactive ROI calculator, a quiz that scores leads, a custom-domain landing with one button that triggers your sales workflow. Public slug + custom domain do the heavy lifting.

Public surface

AI-generated micro-apps

Describe the tool. The AI drafts the HTML + the bindings + the workflow. You polish, save, share. Useful for one-off team utilities you don't want to formalize.

AI-built

Plan-gated, with sensible defaults.

Free tier ships with 2 playgrounds + basic asset storage. Pro and Business unlock more playgrounds, larger assets + uploads, AI behavior generation budget, custom domains, white-label embed, and longer data retention.

See pricing →

Build the tool you've been meaning to scope.

Open a playground, describe what you want, let the AI draft the HTML. Add a button. Bind it. Ship it as a public URL or embed it inside your product. Same afternoon.

Start freeRead the docs
Contact

We’re here to help you ship

Email sales for volume pricing and enterprise procurement, reach support for everything else, or drop us a message and we’ll get back to you.

Talk to sales

Volume pricing, security review, and enterprise procurement — email us and we’ll get back fast.

General inquiries

support@flowfn.com

Prefer not to open your mail client?