Editor Overview
Meno Studio is the visual editor for your Astro project. You design pages by selecting elements on a live canvas and editing them in the side panels. Every change you make writes directly to the underlying .astro and content files in src/ — there is no separate database or proprietary save format. What you edit is what ships.
The editing surface is built from a handful of regions: a canvas in the center, a structure tree and components panel for shaping the page, properties and style panels for tuning the selected element, a CMS panel for content, and an AI assistant for getting work done in plain language.
The canvas
The canvas is a live preview of the page you're editing, rendered exactly as it will appear in production. Click any element to select it; the selection is highlighted and its details load into the side panels. Selecting on the canvas also highlights the matching node in the structure tree, and selecting in the tree scrolls the canvas to that element — the two stay in sync.
The canvas previews your page at any breakpoint, so you can check how a layout reflows on tablet and mobile before you publish. See Publishing for how to ship what you see.
The structure tree
The structure tree shows the full hierarchy of the current page — every element, component instance, and list, nested as it appears in the .astro source. Use it to navigate, reorder, wrap, and delete nodes, and to drill into a component instance to edit its internals in place.
Each node in the tree maps to a tag in the source: an HTML element is a <div class={style({…})}>, a component instance is a capitalized tag like <Button text="Hi" />, and a list is a .map(…) block. The full set of node forms is covered in Structure Tree.
The components panel
The components panel lists the reusable components in your project — each one is a single file under src/components/. Click a component to drop a new instance into the page, or to swap the selected instance for a different one. Adding <Button /> to a page also adds the matching import to the page's frontmatter automatically.
To learn how components are authored, see Building Components.
The properties and style panels
When you select an element, two panels reflect it:
The properties panel edits component props (text, numbers, booleans, links, and i18n values) and HTML attributes. These map to the JSX attributes on the tag and to the component's
resolveProps(Astro, {…})definition. See Properties Panel.The style panel edits visual styles per breakpoint — layout, spacing, color, typography, and more. Styles are written into the element's
style({…})call, never into a rawclass="…"string, which keeps them round-trippable. See Styling.
Because both panels write straight to the .astro file, the values you set are the values in your source.
The CMS panel
The CMS panel manages your content collections — the items stored as JSON under src/content/. Browse, create, edit, and publish items, and preview a template page against a chosen item. Each collection's schema lives in its template route at src/pages/<collection>/[slug].astro. See CMS for the full workflow.
The AI assistant
The AI assistant lets you build and edit in plain language — describe a section, ask for a new component, or request a styling change, and it edits the same .astro and content files you'd edit by hand. See AI Assistant.
Everything in the editor reads and writes the real files in your project, and the round-trip goes both ways: edits made in Meno Studio show up in the .astro source, and edits you make by hand show up in the editor. See Hand-Editing to work directly in the files.