fromscratch
Help center

A tour of the workspace

Where everything is: the Home page and its project explorer, the project page with the chat and the preview, and every button of the top bar.

Updated 4 min read
On this page
  1. The Home page
    1. The composer
    2. Templates
    3. The project explorer
    4. The top bar
  2. The project page
    1. The chat
    2. The preview
    3. The top bar of a project
  3. Where your work lives
  4. FAQ
  5. Related

FromScratch has two main screens: the Home page, where you start and organise projects, and the project page, where you chat with the agent and watch your site take shape. This tour walks through both, button by button.

The Home page

The composer

At the top, « What do you want to build? » invites you to describe your app or site. Under the box:

  • Model: chooses the AI model for the new project. « Default » is the platform's recommended model; models marked « Premium » are part of Starter and Pro, and a « ×{n} credits » mention means the model costs more credits per reply. See AI models and your plan.
  • Import a project (.zip) creates a project from an existing source archive.

Templates

« Or start from a template » shows the gallery: Blank, Landing Page, SaaS, Admin Dashboard, CMS, Storefront, Restaurant, Blog, Portfolio, Real Estate, Fitness, Agency, Chat App and « E-commerce site ». The « Site theme » toggle (Light / Dark) sets the mode of the site you are about to create. « E-commerce site » opens « Choose your shop design » with the four shop designs. See What you can build.

The project explorer

The sidebar lists your work under « My projects »:

  • Folders can be nested (for example Clients › Paris › Bakery). Create one with « New folder at root », or a subfolder from a folder's buttons; rename, share or delete it there too. A folder must be empty before it can be deleted.
  • Drag to organize: drag a project or a folder onto another folder to move it, or use « Move to a folder ».
  • The active folder is where new projects land.
  • Shared with me lists projects and folders other people shared with you, with your role (editor or viewer).
  • A « Live » badge marks published projects. « Delete project » erases the project's workspace — it cannot be undone.

The top bar

The credit badge shows your remaining credits (click it to top up or change plan), the bell lists notifications (a site published, a build finished, a domain attached or active), and your avatar opens the user menu: Billing, Language, light/dark mode for the FromScratch interface, Help & contact, Developer and Sign out.

The project page

The project page is split in two: the chat on the left, the preview on the right. Drag the border between them to resize the chat (double-click resets it). On a phone, a switch lets you move between « Chat » and « Preview ».

The chat

Type in « Describe what's next… » and send. While the agent works you see its activity cards and a Stop button. Under each reply, the credits it used. When a plan is active, the plan stepper sits above the composer with Next step, Skip and Go back here. Clear empties the conversation without touching your files. On Starter and Pro, the paperclip attaches PDFs, images or text files to a message.

The preview

The preview is your app, running live. Switch between Desktop and Mobile to check both layouts. On Starter and Pro you also get Code (browse and edit the source in the browser; changes reload live) and Split (code and preview side by side). The code view is available when the agent is idle.

The top bar of a project

From left to right, depending on your plan and project type:

Button What it does
Project name Click to rename the project.
Site address Under the name: the subdomain of your published site; click to change it. See Your site address and DNS.
Model selector « AI model (applies on the next message) ».
Files « Project files »: PDFs, Office files, images and text the agent can read on every prompt (Starter / Pro).
Variables « Environment variables »: secret keys for your app. See Environment variables.
Payments Shops only: « Card payments », Connect Stripe.
Store admin Shops only: Open admin and the store's Credentials.
Versions « Version history »: every saved state, with Go back here.
Share Invite a collaborator by name or email as Editor (chat with the AI, build, publish) or Viewer (view only).
Export Download ZIP or push to GitHub (Starter / Pro).
Domain Attach your own domain (Starter / Pro).
Publish Put the site online; then « Live » opens it and Republish updates it.

Tip

buttons that need a paid plan stay visible on Free with a small « Pro » badge; clicking them explains what the feature does and how to unlock it.

Where your work lives

Each project has its own workspace. It goes to sleep after a while without activity and wakes up when you open the project or send a message (« Connecting to your workspace… »). Your files are kept the whole time. See Preview vs published site.

FAQ

Can two people work on the same project?

Yes: use Share and give the person the Editor role. They see the project in « Shared with me ».

I don't see the Code view.

It is part of Starter and Pro, and it is only available while the agent is not working.

Was this page helpful?