Your project view

When your assistant creates a project it gives you a link to your project view. It is a live view of the app being built: the preview updates as writes land, and your data, services, checkpoints, and the Publish button are all on the same screen. There is nothing to type at here — you describe changes in your assistant, and watch them arrive.

The live preview

The preview runs your app as it stands right now — the same code your users will get, just not published yet. Writes stream in while your assistant works, so you do not need to reload.

If a change has been saved but the preview has not caught up, a small Updating preview… pill appears in the tab row. It clears on its own once the new build renders; it only shows up when the preview is genuinely more than a couple of seconds behind.

Use the device picker at the right of the tab row to switch between Desktop, iPhone (393 × 852), Pixel (412 × 915), iPad (820 × 1180), and a Responsive frame you resize by dragging. The phone and tablet frames can be rotated with the button under the frame. Fullscreen gives you a bigger view but always renders at desktop width. On a phone-sized browser window the device picker is hidden and the preview fills the screen.

Press Cmd + K or Cmd + P (Ctrl on Windows) to jump the preview to a page, or to a component, which renders its examples. The page picker in the top bar does the same with a search box, and also lists each page's example screens — see Examples.

What to check while you are here:

• Walk your real user flows — sign up, sign in, and the main thing the app is for
• Check a phone frame as well as desktop before you call something done
• Confirm that forms and buttons actually save, rather than just looking right

Passkeys in the preview

If your app signs people in with passkeys, you can try both creating a passkey and signing in with it in the preview, before you publish. Your browser shows its usual passkey prompt, and only after a click inside the app, so start the flow from a button rather than when the page loads.

• Creating a passkey works in Chrome, Edge and Firefox. Safari does not let a page shown inside another page create one, so in Safari sign-up fails in the preview while sign-in with an existing passkey works. Test sign-up in one of the other browsers, or in your published app.
• A passkey made in the preview belongs to the preview's own address, not your published app's domain. It will not sign you in to the published app, where your users create their own. Ask your assistant to take the passkey's domain from the page's current address rather than writing your app's domain into the code, so the same flow works in the preview and when published.

Pointing at something in the preview

Two tools sit in the preview toolbar, at the right end of the tab row:

Select

Click any element in the preview to point at it. Floot maps it back to the source file and line.

Annotate

Take a screenshot of the preview and draw on it. Circling the problem is usually faster than describing it.

Both are held for your assistant rather than sent anywhere immediately. It picks up your current selection and annotation the next time it checks your context, so you can circle something and then just say "fix this". Floot also copies a paste-ready line to your clipboard when a selection lands, in case you would rather paste it in. If your assistant does not seem to have noticed, ask it to check your Floot context.

Services

The Services tab covers everything behind the app. It lists every service, with the ones your project already uses first, so you can also see what is available before your app uses it:

Data

Browse your Postgres tables, search them, and add rows — Floot's database or an external one you connected. A Floot database can also be downloaded as a full export.

Integrations

The connected services behind your app — API keys and OAuth providers you set up. Connect a saved integration adds one you already saved on your account.

Storage, Email, Notification

Files your app stores, which you can preview and download one at a time, your email domains and a log of the email your app sent and received, and push-notification setup.

Schedules, Analytics, SEO, AI

Jobs that run on a timer, visitor traffic for your published app, search-engine settings, and the usage and settings for AI features running inside your app.

Payments

Whether your app can take payments: test mode in the preview, live mode in the published app, and the Stripe setup live mode needs — see Payments.

Apps

Let this app call your other Floot apps, and see which apps call it — see Connected apps.

Docs

Markdown your assistant wrote under static/__dev/ — plans, notes, decisions. Files under that prefix are excluded from your production build, so they are a safe place to keep working notes.

Code

Under Advanced: browse your project's pages, components, helpers and endpoints, and make a small edit by hand. For anything larger, ask your assistant.

The Database and Email icons on the tab itself are shortcuts straight into those two.

Checkpoints and undoing changes

Open the Checkpoint panel from the tab row. It is a newest-first timeline of checkpoints, the individual changes grouped under each one, and the times your app was published. Expand a checkpoint to see what changed in it, and use the filters — Recent changes, Only yours, Agent-created, Published — to narrow the list.

Restore puts the whole project back the way it was when that checkpoint was created, behind a confirmation step, and everything changed after it is undone. For changes made since the latest checkpoint, Revert takes the project back to just before that change. Add a checkpoint yourself from that panel before a risky change, or ask your assistant to save one — it has a checkpoint tool of its own, and checkpoints it creates are labelled with its name.

To undo just one file, ask your assistant instead — for example, "put components/Cart.tsx back the way it was before the last change". It can read a file's earlier versions one change at a time, restore the one you want, and leave the rest of the project alone.

A restore rolls back code and project settings only. It does not change your database, your uploaded files, your connected services or domains, or the published app. To roll back the live app, restore the checkpoint from before the change and publish again: there is no button that switches the live app back to an earlier publish, and the publish times in the timeline are markers, not restore points. On a paid plan, Version history on the Publish screen lets you download the exact source of an earlier publish, or compare it with another publish or your current code.

Your assistant can also read the project's history (checkpoints, changes and publishes), so you can ask it for a changelog of everything since your last publish.

The project menu

The project name at the top left opens the project menu.

Project Settings

Project name, project icon (used for the favicon and the mobile app icon), splash screen, a system prompt of standing instructions, a design prompt for brand direction, the mobile app ID, and project visibility. Projects are private by default, including free ones. Under Advanced Settings: Fixed outbound IP, Only allow internal publish (see Publish privately), and keeping request and response bodies out of preview logs.

Collaborators

Give other Floot accounts edit access to the project. This is a paid-plan feature, and only the owner can add or remove people.

Send Project, Send Development Preview

Hand a copy of the project to another account, or email someone a link to look at it. Both are paid-plan features shown only to the owner — see Sharing your projects.

Duplicate

Make a copy of the project to experiment on. This is a paid-plan feature.

Get Code

Download the whole project source as a zip, or keep a folder on your computer in sync with the project. This is a paid-plan feature — see Code, data, and exports.

Keep the system prompt short. It is included with every change your assistant makes, and it is capped at 16,000 characters. Longer reference material belongs in a note under static/__dev/notes/ that the prompt points to.

Sharing the link

The preview link your assistant hands you is not restricted to people who can sign in to your project. It carries a token in the URL: it opens with no Floot login, expires after seven days, and is scoped to that one project.

It is read-and-interact only. Someone holding the link can open the app and use it, but cannot edit your files, change your settings, or touch your account. A single link cannot be revoked before it expires, so share it the way you would share a document link. To close every preview link of a project at once, including the access a link gave to the app's backend, turn on Only allow internal publish — see Publish privately.

The token never takes anything away from you: if you open the link while signed in to Floot, the page uses your real access instead, and you keep full edit and publish rights. The flip side: someone signed in to a Floot account that has no access to the project is sent to the Floot home page instead of the preview. A private browser window gets them in.

The project menu also has Send Development Preview, which emails a per-recipient link that is checked against that email address when it is opened. It is a paid-plan feature and only the project owner can send it. For sharing your published app, see Sharing your projects.

Preview vs. published

The Publish button is in the top-right corner — or just ask your assistant to publish, which runs the same deploy and returns the same URL. Floot runs an error check first and stops with the problems if it finds any. After the first publish, new changes stay in preview until you publish again — see Publishing your app.

Things only you can do

Most work happens through your assistant, but a few things need you in the Floot web app. Your assistant can walk you to them; it cannot finish them for you:

• Plans and billing live on floot.com, on your account's plan page. Your assistant cannot change what you pay.
• A custom domain is added from the Publish dialog, once the app has a subdomain — see How to add a custom domain.
• Publishing privately and inviting people to the app happen on the Publish screen — see Publish privately.
• Native mobile builds start from the Publish mobile app switch on the same Publish screen, on every plan, and that is also where you connect your Apple or Google Play account — see Creating mobile apps.
• Your own API keys go through the secure connect link Floot generates when your assistant asks for one. Open it and enter the key there. Never paste a key into the chat — your assistant only ever receives the environment variable name, never the value.