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

Mode
What it shows
Who can see it

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

  1. Click the Publish button in the top-right corner

  2. Choose your domain (free *.floot.app or custom domain)

  3. 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