The canvas
The editor has three areas:
- Left panel — your pages, the element/component library, and the structure tree: every element on the page as a nested list. Use it to select, reorder, rename, hide, or delete elements precisely.
- Canvas — a live preview of the page. Click to select, double-click text to edit it in place. Switch viewport widths in the top bar to design for desktop, tablet, and mobile.
- Right panel — properties of the selected element: content, layout, spacing, typography, backgrounds, borders, effects, and interactions.
Elements
Section titled “Elements”Elements are the building blocks: sections, containers, text, images, buttons, forms, videos, embeds, and more.
Components
Section titled “Components”Components are reusable groups of elements. Turn a selection into one and every copy — on any page — updates when you edit the original (the master). The library also ships ready-made component sets you can drop in and restyle; everything picks up your site’s design tokens automatically.
Variants
Section titled “Variants”Some components have variants — pre-built alternatives you switch between instead of restyling by hand, like a button’s tone (primary, outline, ghost) or size. Select an instance of the component and its variant options appear near the top of the properties panel; changing one applies the matching set of styles in a single step. A component with more than one kind of variant (tone and size, say) gets one control per kind, so changing the size never resets the tone.
Keeping copies in sync
Section titled “Keeping copies in sync”Editing a component’s master updates every copy automatically. Element type, styles, attributes, links, and the order of children all flow from the master to its copies — but text, images, and anything else you’ve customized on a specific copy (including CMS bindings) are never touched by a sync, so giving different copies different text or images is always safe.
Before a sync happens you’ll see a preview of what it will change for each copy — how many elements change, get added, get removed, or move.
Occasionally a copy and its master fall out of sync in a way MATRIZ can’t safely reconcile on its own — usually because the copy is old, or has diverged enough, that MATRIZ can no longer confidently tell which element on the copy corresponds to which element on the master. When that happens, that copy is held back and you’re asked to choose:
- Sync anyway — apply the update using MATRIZ’s best guess at how the elements line up. This can delete elements on the copy that no longer exist on the master, so only choose it when you’re confident the copy hasn’t diverged much.
- Unlink — detach the copy from the master. It keeps its current look and content exactly as it is, and stops following future changes to the master.
- Leave it alone — skip this copy for now. Nothing is written, and you can decide again next time you sync.
Embeds and custom code
Section titled “Embeds and custom code”- Embeds — paste a link from YouTube, Vimeo, Google Maps, Calendly, Spotify, X, Instagram, or TikTok and MATRIZ renders the right player or widget, safely.
- Custom code — a sandboxed element for your own HTML/JS snippets. Custom code runs isolated from the rest of the page, so a broken or malicious snippet cannot touch your site or your visitors’ data on it.
Preview as
Section titled “Preview as”Use Preview as to see the page the way a visitor would — including how it looks for signed-in members versus anonymous visitors when you use member-only content.