Editing

The editor shows your site as it really renders, with panels beside it. Every change you make is a change to the site's own source code.

Changing things

• Words and settings. Click a section on the page to select it. Its words and settings are under Props, on the right.
• Colours and fonts. Pick a colour preset and a font pairing in the Tokens tab.
• Sections. Select a section, then pick one in the Insert tab: it goes right after the one you selected.
• Lists. Lists such as team members, prices or opening hours are in the Content tab. See Content and forms.

Undo and redo work as you expect. The editor saves a version of your work automatically, every 10 edits or 5 minutes, on a draft branch of the site's repository; in the web app each saved version is pushed to GitHub.

What is editable

Frontage edits code written in a plain, predictable shape: pages in the app folder, elements styled with Tailwind classes, words written directly in the page, and lists defined in the file that shows them. Sites made from templates or descriptions are written that way throughout.

Parts that are computed, such as text built by a function or a list loaded from somewhere else, show in the editor but are read-only. Files marked as opaque are left alone. The Editability button in the editor opens a report of what can be edited on each page, and why the rest cannot.

A check runs before every preview and every publish. If a file breaks one of Frontage's code rules, publishing is refused until it is fixed, and the report names the file and the line.

The Get started checklist

New sites open with five steps. Each one ticks itself when you do it:

1. Change some words. Click a section and edit its words under Props.
2. Make it yours. Pick colours and type in the Tokens tab.
3. Add a section. Select a section, then pick one in the Insert tab.
4. Share a preview. Deploy…, then Share a preview: an address on pages.dev to send to anyone.
5. Go live. Deploy…, then Go live… puts the site on its public address.

The site's page in the app shows the same checklist, and how long it took from starting to live.

Working together

Designers, developers and owners can open the editor. When someone is already editing a site, the next person joins the same editor with their own sign-in.