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 — the user can delete, duplicate, copy, paste, and undo with the standard keyboard shortcuts.
• Snap to grid — the user can enable snap-to-grid; the components snap to a 4px grid by default.

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 a CoW panel in the left side of the canvas. The library shows the components the user can add to the page. The library is grouped by category:

• Layout — container, row, column, grid, divider, spacer.
• Typography — heading (1-6), paragraph, list (bullet, ordered, checklist), blockquote, code.
• Media — image, video, audio, gallery, carousel, lightbox.
• Forms — input, textarea, select, checkbox, radio, file upload, submit.
• Data — table, list view, detail view, chart (bar, line, pie), count, sum.
• Navigation — navbar, sidebar, breadcrumb, pagination, tabs, accordion.
• Feedback — alert, toast, modal, tooltip, progress.
• Social — share, like, comment, embed.
• Custom — the user’s custom components.

The user can search the library; the user can filter the library by category. The user drags a component from the library to the canvas; the component is added at the drop position.

The component library is per project. The user can install additional components from the marketplace; the user can also create custom components and add them to the library.

The live preview

The live preview is a CoW panel that shows the page in its rendered form. The preview is updated in real time as the user adds, removes, or configures components. The preview is the same preview the user sees in the published app; the user does not have to wait for a build.

The preview supports:

• Desktop — the preview shows the page at the desktop viewport (default: 1280px wide).
• Tablet — the preview shows the page at the tablet viewport (default: 768px wide).
• Mobile — the preview shows the page at the mobile viewport (default: 375px wide).
• Custom — the preview shows the page at a custom viewport; the user can set the viewport width and height in pixels.
• Refresh — the user clicks the refresh button; the preview reloads from scratch.

The preview is per project. The preview is a snapshot; the user cannot interact with the preview (e.g. click a link, fill a form). The preview is for visual inspection; the interactivity is tested in the published app or in the dev mode.

The multi-page support

The canvas supports multiple pages. The user can add a page; the user can navigate between pages; the user can link pages; the user can set the default page.

The page list is in the left side of the canvas. The user can:

• Add a page — the user clicks “Add page”; the user types a page name; the user clicks “Add”; the page is added.
• Delete a page — the user right-clicks a page; the user clicks “Delete”; the user confirms; the page is deleted.
• Rename a page — the user right-clicks a page; the user clicks “Rename”; the user types a new name; the user clicks “Save”.
• Set the default page — the user right- clicks a page; the user clicks “Set as default”; the page is set as the default page (the page the user sees when the published app loads).
• Reorder pages — the user drags a page in the page list; the page is reordered.

The page list is per project. The page list is preserved across sessions; the user can reorder the page list, and the reorder is preserved.

The asset library

The asset library is a CoW panel that shows the project’s images, icons, fonts, and videos. The user can upload an asset; the user can drag the asset from the library to the canvas; the user can also reference the asset from a component (e.g. an image component’s source).

The asset library supports:

• Upload — the user clicks “Upload”; the user picks a file from the file system; the file is uploaded to the project’s asset library.
• Drag and drop — the user drags a file from the file system to the asset library; the file is uploaded to the library.
• Search — the user types in the search input at the top of the library; the library filters to the assets that match the search.
• Filter — the user can filter the library by type (image, icon, font, video).
• Delete — the user right-clicks an asset; the user clicks “Delete”; the user confirms; the asset is deleted.
• Rename — the user right-clicks an asset; the user clicks “Rename”; the user types a new name; the user clicks “Save”.

The asset library is per project. The asset library is preserved across sessions; the user can also configure the asset library to be shared across projects.

The keyboard shortcuts

The canvas supports the standard keyboard shortcuts:

• Cmd+Z — undo.
• Cmd+Shift+Z — redo.
• Cmd+C — copy.
• Cmd+X — cut.
• Cmd+V — paste.
• Cmd+D — duplicate.
• Delete — delete the selected component.
• Cmd+A — select all components in the current page.
• Cmd+S — save the project.
• Cmd+Shift+P — open the publish dialog.
• Cmd+Shift+H — open the version history.
• Cmd+K then C — open the command palette.
• Cmd+K then T — open the design token picker.
• Cmd+K then D — add a data source.
• Cmd+K then A — toggle the asset library.
• Cmd+K then R — toggle the responsive preview.

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

The canvas is a live preview. The user adds components; the user configures components; the preview updates in real time. The user does not have to wait for a build.

The component library is the right shape for the user to add the standard components (layout, typography, media, forms, data, navigation, feedback, social, custom). The user can also install additional components from the marketplace.

The multi-page support is the right shape for the user to build a multi-page no-code app. The user can add a page, delete a page, rename a page, set the default page, reorder the pages.

The asset library is the right shape for the user to manage the project’s images, icons, fonts, and videos. The user can upload an asset, drag the asset to the canvas, search the library, filter the library.

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.