The builder

The builder edits a real Vite + React + Tailwind CSS v4 project. What you see in the preview is your project running — with your npm packages, your Tailwind setup and hot reloading on every save.

Live preview #

Press Start Vite (or ▶ in the header) to start the project's preview. It runs in a private sandbox and is only visible to you and people on your team. Switch between phone, tablet and desktop widths with the buttons in the header.

Pages #

A project can have any number of pages. Each page is a component in src/pages/, reached with hash links like /#/about. Add, rename and reorder pages under More → Pages; switch the page you are working on from the page picker in the header.

The Page tab #

• Build shows the page live. Tap an element to select it; long-press for actions (move, duplicate, remove, edit).
• Structure shows the page's component tree — reorder by moving items up and down.
• Code opens the page's source in the code editor.

Use + add to insert a component from your project or from the library at any position.

Components #

Components live in src/components/. Each card in the Library tab shows a live preview; edit opens its code, + adds it to the current page. Files on disk are always the source of truth — the builder never overwrites your edits.

Themes #

The builder follows your device's light or dark mode; the ◐ button switches between system, light and dark.