Editor Overview

Meno is a visual editor that produces static HTML from a JSON-based page structure. You design pages by selecting elements on a live canvas and editing their properties in a sidebar. When you build, Meno renders every page to plain HTML files ready for deployment.

This guide walks through the every region of the editor interface and the two modes you work in.

Editor Layout

The editor is divided into five areas: a top bar for navigation and branching, a canvas in the center, a sidebar on the right with a properties panel below it, and an AI assistant on the left.

Top Bar

The top bar runs across the top of the window and provides navigation, branching, and a browser preview button.

Navigation Tabs

The top bar contains tabs for switching between major areas of the application:

• Studio -- the visual editor (default view)

• Files -- view and manage your raw project files

• Publish -- push your site to GitHub and collaborate with your team

• Experiments (Enterprise) -- create A/B tests and split traffic between variations

Branch Selector

On the right side of the top bar is the branch selector. Switch between staging and production branches. On Enterprise plans you can add more branches for parallel workstreams. See Publishing for details.

Browser Preview

The Browser Preview button opens your page in a full browser tab so you can see it exactly as your visitors will.

Toolbar

The toolbar sits at the top of the editor and contains these controls from left to right:

Mode Toggle

A segmented button group with two options:

Toggle between them with Cmd+S.

Responsive Controls

A responsive toggle sits next to the mode toggle. Switch between Desktop, Tablet, and Mobile views, or type an exact pixel width to resize the canvas iframe. If the default breakpoints don't fit your needs, you can customize them and add more in Project Settings.

Switch breakpoints quickly with the number keys 1 through 5:

Breakpoint names and widths are configured per-project in project.config.json.

Locale Switcher

If your project has an i18n configuration, a locale dropdown appears in the toolbar. Select a locale to preview the page in that language. Locale-specific content and URLs update in real time.

Page Selector

A dropdown showing the current page. Click it to switch pages, or use Cmd+P to open the Pages Palette for fuzzy search.

Three-Dot Menu

The overflow menu in the top-right corner gives access to additional actions: refresh the page, copy the selected element's path, open the Shortcuts panel, and adjust zoom.

Canvas

The canvas is a live iframe that renders your page exactly as it will appear in production. In Select mode, it supports two interaction layers on top of the rendered page:

Element Selection

Click any element on the canvas to select it. The selected element gets a blue highlight outline. As you move the mouse, a subtle outline appears around the hovered element to show what will be selected on click.

Selecting an element on the canvas also selects it in the Structure tree, and vice versa.

XRay Overlay

The XRay overlay draws thin outlines around every element on the page, making it easy to see boundaries of empty or transparent elements. It is enabled by default.

Toggle XRay with the X key.

When XRay is on, the canvas shows a wireframe-style view of the page structure. When off, you see the page exactly as a visitor would.

Canvas and Sidebar Synchronization

Selection is always synchronized between the canvas and the sidebar. When you click an element on the canvas:

1. The Structure tree scrolls to and highlights the corresponding node

2. The tree auto-expands any collapsed ancestors to reveal the node

3. The Properties Panel updates to show that element's styles, attributes, and content

When you click a node in the Structure tree:

1. The canvas scrolls to bring the element into view

2. A blue outline appears around the element

3. The Properties Panel updates with that element's data

This two-way binding means you can freely switch between visual selection on the canvas and tree selection in the sidebar without losing your place.

CMS Preview

When editing a CMS template page, the toolbar shows additional controls for previewing content items. A dropdown lets you pick which CMS item to preview, and the canvas re-renders the template with that item's data. This lets you verify that your template looks correct with different content without running a full build.

Sidebar

The sidebar on the right side of the editor has seven tabs. Click a tab label or use keyboard shortcuts to switch between them.

Structure

The default tab. Shows a hierarchical tree of every element on the current page. Select elements here or on the canvas. The Properties Panel appears below the tree when this tab is active.

See Structure Tree for details.

Pages

Lists all pages in your project, including static pages and CMS templates in one place. Click a page to open it in the editor. Pages are organized by their file path.

Shortcut: press P to jump to this tab.

CMS

Manage content collections. Browse, create, edit, and delete CMS items. CMS templates in the pages/templates/ directory generate one HTML page per content item at build time.

Style Guide

Your project's design tokens. This tab shows colors, fonts, and other style values. These tokens are available as CSS variables throughout your pages.

Components

Browse and add reusable components, organized into folders. Components are JSON definitions stored in the components/ directory. Click a component to add it below the selected element.

The Components tab has two modes:

• Add mode (default): clicking a component adds a new instance below the selected element

• Switch mode: clicking a component replaces the currently selected component instance with the new one

Shortcut: press C to jump to this tab.

Functions

Manage JavaScript functions that can be attached to elements for client-side interactivity. Functions are JavaScript snippets that run in the browser when triggered by user actions like clicks, form submissions, or page loads.

Settings

Project-level configuration including locales, breakpoints, responsive scales, and other project-level options. Changes here affect the entire project and its build output.

AI Assistant

On the left side of the editor is the AI Assistant. You can use it to edit your site directly through natural language -- describe what you want to change and the assistant will make the edits for you.

If you prefer working in a terminal, click Switch to Terminal to use a command-line AI assistant like Claude Code.

See AI Assistant for details.

Modes

The editor has two modes that determine how the canvas behaves.

Select Mode

The default mode. In Select mode:

• Clicking an element selects it for editing

• The XRay overlay can show element boundaries

• The Properties Panel reflects the selected element

• Arrow keys navigate the structure tree

• All keyboard shortcuts for editing are active

Preview Mode

In Preview mode, the canvas becomes fully interactive:

• Links navigate to their targets

• Hover and focus states trigger

• Forms accept input

• JavaScript functions execute

• The page behaves exactly as it would in a browser

You cannot select or edit elements in Preview mode. Switch back to Select mode to continue editing.

Toggle between modes with Cmd+S or by clicking the mode buttons in the toolbar.

When to Use Each Mode

A common workflow is to edit in Select mode, press Cmd+S to preview, interact with the page to verify behavior, then press Cmd+S again to return to editing.

Build Output

Everything you see in the canvas is what gets built. When you run bun run build, Meno renders each page to a static HTML file. The build process:

1. Reads all page JSON files from the pages/ directory

2. Resolves component instances to their definitions

3. Applies CMS data to template pages, generating one HTML file per content item

4. Generates responsive CSS from your breakpoint styles

5. Outputs plain HTML, CSS, and JavaScript files ready for any static host

The build also generates robots.txt, sitemap.xml, and favicon tags from your project.config.json settings.

Quick Reference

Next Steps

• Structure Tree -- navigate and reorganize page elements

• Properties Panel -- edit styles, attributes, and content

• Command Palette -- quick access to components and commands

• Keyboard Shortcuts -- complete shortcut reference

• AI Assistant -- natural language editing and terminal AI

• Publishing -- push to GitHub and deploy your site