Editor and preview
A tour of the Floot editor, how the live preview works, and how to publish.
This guide walks you through the Floot editor and how to preview your app before publishing it to the world.
Editor overview
Chat panel
The main way to build your app. Describe what you want in your own language and Floot builds it. You can attach images, PDFs, CSVs, and other files to a message when it helps explain what you mean.
Two tools at the top-left of the preview make your intent unmistakable:
- Select
- Click any element in the preview to point Floot at it — or edit its text directly.
- Annotate
- Take a screenshot of the preview and draw on it. Circling the problem is usually faster than describing it.
Preview panel
See your app update in real time as you make changes. This is a live preview of what your users will experience — the same code, just not published yet.
Data, resources, and logs
The right pane holds more than the preview. Open Data to browse your Postgres tables and run queries, and to download a pg_dump backup. Connected services (API keys, OAuth providers, databases) live under resources, and backend logs are available when something misbehaves — you can also just ask Floot to read the logs for you.
Project settings
Access project settings via the project name dropdown → Project Settings.
- Project name
- The name of your project.
- Project icon
- Used for the favicon and the mobile app icon.
- System prompt
- High-level context or standing instructions about the project. Keep it short — it is included with every change.
- Design prompt
- Design-specific instructions and brand direction.
- Project visibility
- Make the chat history and source code of your project public or private. All projects — including free ones — are private by default.
Preview vs. publish
| Mode | What it shows | Who can see it |
|---|---|---|
| Preview | Latest changes in the editor | Only you and your collaborators |
| Published | The live version of your app | Anyone with the published link |
How to preview
Your preview updates automatically as you chat with Floot. Toggle the mobile and fullscreen views with the top-right buttons to check the published experience on smaller screens.
Tips for previewing:
- Test all user flows — sign up, login, and your main features
- Check different screen sizes with the mobile toggle or your browser dev tools
- Verify that forms and buttons actually do what they should
How to publish
- 1
Click Publish
The Publish button lives in the top-right corner of the editor.
- 2
Choose your domain
Use the free
*.floot.appsubdomain, or connect a custom domain. - 3
Go live
Click Publish. Your app is now accessible to anyone with the URL.
Published means public
Anyone with the link can open your published app. If you want to restrict access, ask Floot to add authentication to your app.
Updating a published app
After publishing, new changes appear in preview only. To update your live app, click Publish again.
Common questions
How do I know what my users will see?
The preview panel shows exactly what users will see. If you have already published, visit your live URL to see the current public version.
Can I undo changes?
Yes. Use the restore button in the chat pane to revert to any previous version. You can also ask Floot to save a named checkpoint before a risky change, then restore to it by name later.
Can I edit the code directly?
Yes. Press Cmd + P (or Ctrl + P on Windows) in the editor and search for a file by name. Most people never need to — but the code is yours, and it is right there.