Quickstart

This walkthrough takes you from an empty project to a published page in about fifteen minutes. You will work in the visual editor the whole time, but everything you do writes to plain Astro files on disk — so you can open the result in any editor afterward.

If you have not installed Meno yet, start with Installation.

Step 1: Create a project

Open Meno and create a new project. Meno scaffolds a normal Astro codebase for you:

src/
  pages/         your routes — index.astro is the home page
  components/    reusable .astro components
  content/       CMS items (JSON entries per collection)
project.config.json   locales, breakpoints, fonts, base component
colors.json           theme colors, used as var(--name)
variables.json        CSS design tokens

Every page lives at src/pages/<slug>.astro and maps to a route by its filename — src/pages/index.astro is /, src/pages/about.astro is /about. Components live under src/components/, and CMS content lives under src/content/. For the full layout and what each file does, see Project Structure.

A project is a real, runnable Astro app. You can astro build it and deploy the output as a static site — but for now, stay in the editor.

Step 2: Tour the editor

The editor has three regions you will use constantly:

• Canvas (center) — a live preview of the current page, rendered exactly as it will ship. Click any element to select it.

• Structure tree (sidebar) — the page as a nested hierarchy of nodes. Selecting here selects on the canvas, and vice versa. Use it to navigate, reorder, and nest elements. See Structure Tree.

• Components panel (sidebar) — the catalog of components you can drop onto the page.

• Properties / Style panel (sidebar) — when an element is selected, this is where you edit its props and styles.

The toolbar across the top toggles between Select mode (edit) and Preview mode (interact), and switches breakpoints for responsive work. For the full interface, see Editor Overview.

Step 3: Add and edit a page

Create a new page from the sidebar — call it hello. Meno writes src/pages/hello.astro, a frontmatter const meta = {…} block plus a node tree wrapped in <BaseLayout meta={meta}>. It opens in the canvas as a blank page.

That file is a normal .astro file. After a few edits it looks like this:

---
import { i18n } from 'meno-astro';
import { BaseLayout } from 'meno-astro/components';
import Heading from '../components/Heading.astro';

const meta = {
  title: "Hello",
  description: "My first Meno page"
};
---
<BaseLayout meta={meta}>
  <main>
    <Heading size={1} text={i18n({ _i18n: true, en: "Hello" })} />
  </main>
</BaseLayout>

The page title and other metadata live in meta. To edit text content, select an element on the canvas and change its value in the Properties panel — the canvas updates live and the change is saved to the file as you go. For deeper coverage of routing, metadata, and page anatomy, see Creating Pages.

Step 4: Drop in components and style them

Open the Components panel and add a component to the selected node — say a Heading and a Text. In the file these become Capitalized JSX tags with their props as attributes, and Meno adds the matching import to the frontmatter automatically:

<Heading size={1} text={i18n({ _i18n: true, en: "Welcome" })} />
<Text text={i18n({ _i18n: true, en: "My first page built with Meno." })} />

Components are the reusable building blocks of your site; you can also create your own. See Building Components.

To style an element, select it and use the Style panel. Set layout, spacing, size, typography, background, and border, and Meno writes those properties into the element's style({…}) call — never a raw class="..." string:

<div class={style({
    base: {
      display: "flex",
      flexDirection: "column",
      gap: "16px",
      padding: "40px",
      backgroundColor: "var(--background)",
      borderRadius: "8px"
    }
  })}>

For colors, use theme variables like var(--background) from colors.json rather than hard-coded values. To make styles responsive, switch the breakpoint in the toolbar (tablet or mobile) and adjust — those overrides land in tablet and mobile keys alongside base. For everything the Style panel can do, see Styling.

Step 5: Preview, then publish

While editing you are in Select mode. Toggle to Preview mode in the toolbar to interact with the page as a visitor would — links work, hover states fire, scripts run. Switch breakpoints in either mode to check that your layout adapts. See Publishing for how previews and publishing fit together.

When you are happy, publish. Because the project is a standard Astro app, the build produces a plain static site you can host anywhere. For connecting a repository and going live on Netlify, Cloudflare Pages, or GitHub Pages, see Deployment.

Step 6: Edit by hand or with AI

The visual editor is one way in — not the only one. Everything you built is .astro source in the meno-astro dialect, so you can:

• Hand-edit the files in your own editor. As long as you stay inside the dialect grammar, your changes round-trip back into the visual model losslessly. See Hand-Editing.

• Let an AI agent edit them. Meno works naturally with Claude Code, which reads and writes the same files using the same format rules.

You now have a project, a page, styled content, and a live site — and a codebase you can keep editing visually, by hand, or with AI, all in sync. From here, dig into Creating Pages, Building Components, or add dynamic content with the CMS.