Canvas builder

What this accomplishes

Canvas maps the selected worktree into a visual front-end view. Source files remain canonical. Supported components can be edited visually; constructs outside the supported representation stay visible in preview and are marked code-owned.

This guide covers the canvas builder. See the Canvas overview for starter projects; design tokens are in design tokens; the form builder is in form builder; local data is in local data; publish is in flow is in one-click publish.

Current availability

This page documents behaviour verified in Miton development builds. Miton is still pre-release and is not publicly downloadable; invited beta users will receive a signed desktop build with automatic updates.

Before you start

• A Miton development build, an active project and Canvas open.
• A connected model and permission to write project files when the task changes the app.

The canvas surface

Canvas shows the front end from the currently selected branch or worktree. Changing worktrees changes the source and therefore the Canvas projection. The Changes inspector compares the current worktree with main’s merge base.

When Miton can represent a component safely, visual changes and Chat-requested changes use the same revisioned project artefact path as Code. A stale revision becomes an explicit conflict. Miton does not use last-writer-wins.

The canvas supports:

• Drag and drop — the user drags a component from the library to the canvas; the user drags a component within the canvas to reorder; the user drags a component to a new position.
• Click to select — the user clicks a component; the component is selected; the component’s properties are shown in the inspector.
• Click and drag to resize — the user drags the resize handle on a component; the component resizes; the new size is preserved.
• Multi-select — the user shift-clicks multiple components; the components are selected as a group; the group’s properties are shown in the inspector.
• Keyboard shortcuts — delete, duplicate, copy, paste, and undo with the standard shortcuts.

The running preview can include code outside Canvas’s editable subset. Seeing a construct does not imply Canvas can rewrite it. The inspector labels those regions as code-owned and directs the user to Code.

Architecture Map and import progress

Opening an imported project indexes its files and groups them into front end, back end, data, infrastructure and other layers. Canvas shows progress while the map is built. Architecture Map v1 is an inspectable topology list; a deeper interactive graph remains later work.

If the front end cannot be projected, Canvas explains why, keeps the Architecture Map available and offers Open Code. It does not create a parallel Miton layout.

App Kit alignment

New Miton-scaffolded front ends use the App Kit token roles, responsive shell and component primitives by default. Existing front ends are checked without modification. When gaps are found:

1. Review the contrast, spacing and responsive findings.
2. Choose Realign with App Kit to create a reviewable Code migration.
3. Choose Keep my design to preserve the existing design and dismiss the offer for that project.

Realignment is never automatic for an import.

The component library

The component library is the panel on the left side of the canvas. It lists the component types you can add to the page:

• Nav — a top navigation bar.
• Hero — a full-width hero section.
• Section — a content section.
• Grid — a card grid layout.
• Form — a configurable form block (see form builder).
• Footer — a page footer.
• Gallery — an image gallery.
• Database — a dynamic data block (see local data).

Drag a component from the library onto the canvas to add it at the drop position. A custom type is also available for anything the built-in eight don’t cover.

The live preview

The preview renders the page as it will actually appear — no separate build step. It has three fixed viewports: Desktop (1280px), Tablet (768px), and Mobile (375px); there’s no custom width/height entry.

Multi-page support

The canvas supports multiple pages: add, remove, rename, and reorder them from the page list.

The asset library

Upload images, icons, or fonts (SVG counts as an icon; anything else uploaded is an image), or generate one with the built-in AI asset generator. Remove an asset from the list to delete it. Assets live in the browser session while you work — there’s no search, filter, rename, or cross-project sharing, and uploaded files aren’t yet written to persistent project storage.

The keyboard shortcuts

• Cmd+K then C / P / D — add a component / page / data source.
• Cmd+K then T / A / R — open the token picker / asset library / responsive preview.
• Cmd+Shift+P — open the publish dialog.
• Cmd+Shift+H — open version history; Cmd+Shift+R (while history is open) — roll back.
• Cmd+Shift+F — open the form builder.

The full keyboard shortcut list is in the reference keybindings.

What the canvas builder does not cover

The canvas builder does not cover:

• Arbitrary framework write-through — React, Vue, Svelte and Next constructs outside the supported projection remain code-owned. Full framework adapter coverage is part of the v1 programme.
• Server-side logic — Canvas stays client-side. When a prompt needs an API, database, or auth, Miton hands off to Code, writes a ## Backend architecture brief into .miton/blueprint.md, and forks the matching built-in template (project-rest-api, project-fastapi, or project-axum-api). See the developer backend design loop Done-when. Alternatively, use an Automation webhook when the work fits an inspectable workflow.
• Real-time collaboration — the canvas is single-user. The user can use a third-party tool for real-time collaboration; the agent can sync the third-party tool’s state into the canvas.

Canvas focuses on visual construction. Code and Automation cover implementation that does not belong on the canvas.

What success looks like

You add and configure components and see the preview update immediately, build a multi-page site from the eight component types, and pull in or generate the assets the pages need — all without a separate build step.

Common failures and recovery

• Confirm Canvas is editing the intended project and page.
• Check the selected breakpoint, project permissions and model connection.
• Check the selected worktree and use Compare with main before assuming the preview is stale.
• Resolve an artefact conflict explicitly; do not reapply the change over a newer revision.
• Continue in Code when a region is marked code-owned.

Related next action

Return to the Canvas overview to choose the next part of the project.