How Layout works

Layout turns a conversation into a running application. You describe what you want, Layout writes the code and stands up the backend, and the preview updates in place. This page explains the pieces so you know where to look when something happens.

The workspace

Every project opens in a three-part workspace:

• Chat (left) — where you talk to the AI and where the build log streams
• Preview (right) — a live iframe of the running app
• Code (right, tab) — the generated source, browsable file by file

Switch between Code and Preview using the tabs in the top bar.

The build loop

Each message you send kicks off a build. Layout:

1. Reads your message and the current project state
2. Edits, adds, or removes files as needed
3. Runs migrations if the database schema changed
4. Builds the app and updates the preview

If the build fails, Layout surfaces the error in chat and offers to fix it. You can accept the fix or describe the problem yourself.

Versions

Every successful build creates a new version. Open the history icon in the top bar to see them in order. You can:

• Preview any past version
• Roll back to it with one click
• Keep chatting — a rollback becomes the new head

The database

When your app needs persistent data — users, records, uploads — Layout provisions a Supabase project and wires it up. You do not need a Supabase account to start; connect your own later from the Supabase button in the top bar if you want full control.

See Connecting Supabase for details.

Publishing

Publishing gives your project a public URL at <subdomain>.layout-app.com. You pick the subdomain, and you can update the published version any time. Unpublished projects are still editable — they just are not live.

When to chat vs. edit code

Start with chat. It is faster, and Layout keeps the whole project consistent as it makes changes. Drop into the Code tab when you want to read what was generated, copy a snippet, or download the source code.

Next steps