Every project has a brand kit: the colours, fonts, layout, and assets that define how it looks when published. New projects get a default kit you can either keep or edit. The kit editor is where you make the project look the way you want.
For the technical reference on what is inside a kit (kit.json, kit.css, scaffold.html) and how the render pipeline assembles them, see brand-kits.md.
Open the kit editor
From a project's detail page, click "Customize kit" in the header. You land on /projects/{id}/kit.
[Screenshot: the kit editor with the file tree on the left, the editor in the middle, the preview iframe at the bottom, and the agent panel on the right (paid tier only).]
The page is divided into:
- Files panel on the left:
kit.json,kit.css,scaffold.html, plus the Assets section. - Editor in the middle.
- Preview at the bottom (collapsible).
- Agent panel on the right, paid plans only. See Use the AI agent.
The three kit files
| File | What it controls |
|---|---|
kit.json |
Metadata: brand name, default render mode. |
kit.css |
Your CSS overrides and additions. Loaded after the engine baseline, so anything you put here wins. |
scaffold.html |
The HTML shell wrapped around every rendered page (head, brand bar, footer). Uses {{title}}, {{styles}}, {{brandName}}, {{content}} placeholders. |
Click any file in the tree to load it in the editor.
Edit a file
Type into the editor. Edits autosave; you do not have to click a save button. The header shows "Unsaved changes" while a save is in flight; it clears when the save completes.
If you want to keep an explicit copy of the current state before you change it more, click "Save draft" in the header and give it a name like before-redesign. Named drafts show up in the History drawer and you can revert to any of them later.
Preview your edits
Open the Preview section at the bottom of the editor (click the title to expand it). It shows the project's latest draft markdown rendered through your current (unsaved or saved) kit. Edit, save, and the preview re-renders.
The preview is a live iframe. Refresh it any time with its "Refresh preview" button.
Upload a logo or background
The Assets section in the files panel has two slots: Logo and Background.
For each slot:
- Click "Upload" (or "Replace" if a previous image is already in place).
- Pick a
.png,.jpg, or.jpegfile from your computer. - Wait for the toast: "Uploaded assets/logo.png" (or
assets/background.png).
Constraints:
- The image must be PNG or JPEG. Other formats are rejected with a visible error.
- The file must be 2 MB or smaller.
- Files larger than 2 MB show the message "File is too large. The kit assets are capped at 2 MB."
The slot path stays as assets/logo.png / assets/background.png even when the bytes inside are JPEG. The rendered page picks the correct MIME at render time.
Refresh the preview after uploading to see the asset in place.
Save a named draft
Click "Save draft" in the header. A dialog asks for a name (e.g. ember-on-cream).
Submit. The kit's current state is saved as a snapshot you can revert to from the History drawer.
Named drafts do not change what is published. They are just bookmarks.
Browse history and revert
Click "History" in the header. A drawer slides in showing every snapshot of this kit: published versions and your named drafts, newest first.
For each snapshot you can:
- See its name (or "Published on {date}" for a publish snapshot).
- Click "Revert" to overwrite your current working files with that snapshot.
Revert replaces the editor contents and any uploaded assets. The snapshot itself is unchanged. If you reverted by accident, click History again and revert to a more recent snapshot.
Apply a different kit
Click "Apply kit..." in the header. A dialog called "Apply another brand kit" opens, with a dropdown of:
- Built-in templates (Aurora, Dashtxtastic, Default).
- Brand kits from your other projects.
Pick one, click Apply. Your kit is replaced with a copy of the selected kit. Your previous kit's working files are gone, so use "Save draft" first if you want a fallback.
Publish
Click "Publish" in the header. The button shows "Publishing..." while the render runs. When it finishes:
- A new publish snapshot is created in History.
- The project's
/view/{id}page renders with this kit. - Future kit edits do not retroactively change the published page.
Two tabs at once: the lock
The kit editor uses a per-kit lock so two browser tabs cannot stomp on each other's edits. If you open the same kit in a second tab, the second tab shows a read-only banner: "This kit is open in another tab..." and disables Save, Publish, Revert, and Upload.
If the original tab crashes or closes without releasing the lock, the lock expires after a short window (a few minutes). Open the kit in a new tab and you will be able to edit again. If you cannot wait, you can also use "Force unlock" on the read-only banner to take ownership immediately; do this only when you are sure the other tab is gone.
Show AI prompt
The "Show AI prompt" button reveals a copy-and-paste prompt you can give to any AI assistant (Claude, ChatGPT, etc.) to author the three kit files from scratch. Paste the prompt, describe the look you want, paste the returned files back into the editor. This is handy when you do not have the paid AI agent and want to use your own AI tools.