Guides
Creating Pages
Pages are .astro files under src/pages — the filename is the route. Learn the anatomy of a Meno page and how to add content.
Building Components
Components are single .astro files. Learn the resolveProps prop block, __meno metadata, slots, and inline styles and scripts.
Styling
Styles live in style() as a responsive StyleObject. Learn breakpoints, color and token variables, and prop-bound style mappings.
Interactive Styles
Hover, focus, and JS-triggered states are CSS declared in the style() meta argument. Learn prefix/postfix selectors and child targeting.
JavaScript
Component behavior lives in a script with el and props in scope. Learn the data-el pattern, state classes, and cross-component CustomEvents.
Lists
Repeat markup over a prop array with list().map or over a CMS collection with getCollectionList. Learn loop variables, queries, and nesting.
Content Management System
CMS content lives as JSON items in src/content, with schemas defined by each collection's template page. Learn collections, schemas, and rendering.
Internationalization (i18n)
Configure locales in project.config.json, author i18n values wrapped in i18n(), and get localized routes, slugs, and a locale switcher.
Client-Side Filtering and Search
Filter and search collection lists at build time with queryList, or live in the browser with MenoFilter. Learn when to use each.
Hand-Editing & Round-Trip
Edit .astro files by hand and stay in sync with the visual editor. The dialect grammar, the golden rules, and what round-trips.
AI & Claude Code
A Meno project is a normal repo of .astro files, so any AI coding agent can edit it. Meno ships a CLAUDE.md and a meno-astro skill to guide it.
Deployment
A Meno project builds with astro build into dist and deploys to any static host. Learn build settings, _headers/_redirects, and Git-based deploys.