Editor and preview
This guide walks you through the Floot editor interface and how to preview your app before publishing.
Editor overview
The Floot editor is designed to be simple and intuitive. Here's what you'll find:
Chat panel
The main way to build your app. Describe what you want in your language, and Floot builds it for you. You can also use the select or annotate tool at the top-left of the preview panel to add additional context to your description.
Preview panel
See your app update in real-time as you make changes. This is a live preview of what your users will experience.
Settings
Access project settings via the project name dropdown → Project Settings.
Project name — The name of your project
Project icon — The icon that will be used for favicon and mobile icon
System prompt — Provide high-level context or specific instructions about the project. Keep this short as it will be used for every change.
Design prompt — Provide design-specific instructions.
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
Preview
Latest changes in the editor
Only you
Published
The live version of your app
Anyone with the published link
How to preview
Your preview updates automatically as you chat with Floot. The preview panel shows exactly what your app will look like when published.
Toggle mobile and fullscreen view with the top-right buttons to mimic the published experience.
Tips for previewing:
Test all user flows (sign up, login, main features)
Check on different screen sizes using browser dev tools
Verify that forms and buttons work as expected
How to publish
Click the Publish button in the top-right corner
Choose your domain (free
*.floot.appor custom domain)Click Publish to go live
Your published app is now accessible to anyone with the URL. If you want to restrict access, make sure to implement authentication in your app.
Updating a published app
After publishing, any new changes you make in the editor will only appear in preview mode. 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've 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 a previous version.
Need help?
Last updated