Creating Pages

Pages are the top-level documents in your Meno project. Each page produces one HTML file in your static build. This guide walks you through creating, configuring, and publishing pages.

Creating a New Page

1. Open the Pages tab in the left sidebar.

2. Click the + button at the top of the panel.

3. Enter a filename (e.g., about or blog/first-post). Use forward slashes for nested paths.

4. The new page appears in the list. Click it to open it in the canvas.

5. You now have an empty page with a single root <div>. Start adding elements.

Adding Content

Once your page is open:

1. Press Cmd+E (or Ctrl+E on Windows/Linux) to open the Command Palette.

2. Search for an element type (e.g., "section", "heading", "image") or a component name.

3. Select it to insert it into the page at the current selection point.

Alternatively, press C to open the Components tab and drag a component onto the canvas.

Setting Page Metadata

Every page has metadata that controls SEO, social sharing, and routing. To edit it:

1. Click the page background (deselect all elements) so the Properties panel shows page-level settings.

2. Fill in the fields described below.

SEO Fields

Custom Slugs

By default, the page filename becomes the URL path. To override this, set a custom slug in the metadata.

If your project uses multiple locales, you can set translated slugs so that /en/about becomes /pl/o-nas in Polish.

Draft Pages

Mark a page as draft to exclude it from the static build, sitemap, and robots.txt. Draft pages are still visible in the editor so you can work on them before publishing.

1. Open the page metadata.

2. Toggle the Draft switch on.

3. The page stays in your project but will not appear in production output until you turn draft off.

Pages Auto-Save

Meno saves your page automatically as you edit. There is no manual save button for page content. You will see changes reflected immediately in the canvas.

Page Navigation

The Pages tab shows all pages in your project as a flat list or grouped by folder. Use these shortcuts:

• Click a page name to open it.

• Right-click for options (rename, delete, duplicate).

• Use the search field at the top to filter pages by name.

Organizing Pages in Folders

Use forward slashes in filenames to create folder structure:

• blog/first-post creates a page at /blog/first-post

• products/shoes/running creates a page at /products/shoes/running

The Pages tab groups pages by folder automatically.

Under the Hood

Page JSON Structure

Every page is stored as a JSON file with two top-level keys:

{
  "root": {
    "type": "node",
    "tag": "div",
    "style": {
      "base": {
        "maxWidth": "1200px",
        "margin": "0 auto",
        "padding": "48px 24px"
      }
    },
    "children": [
      {
        "type": "node",
        "tag": "h1",
        "children": "Welcome to Our Site"
      },
      {
        "type": "node",
        "tag": "p",
        "children": "This is the homepage."
      }
    ]
  },
  "meta": {
    "title": "Home",
    "description": "Welcome to our website.",
    "ogType": "website"
  }
}

• root -- The component tree. Always starts with a single root node.

• meta -- Page metadata for SEO and routing.

Important: HTML nodes use the children property for text content, not a text property. This is a common mistake:

// CORRECT
{ "type": "node", "tag": "h1", "children": "Page Title" }

// WRONG - text property does not exist
{ "type": "node", "tag": "h1", "text": "Page Title" }

The Meta Object

The full set of meta fields:

{
  "meta": {
    "title": "About Us",
    "description": "Learn about our team.",
    "keywords": "team, about, company",
    "ogTitle": "About Our Company",
    "ogDescription": "Meet the people behind the product.",
    "ogImage": "/images/og-about.jpg",
    "ogType": "website",
    "draft": false
  }
}

Internationalized Meta

If your project supports multiple locales, meta text fields can be i18n objects instead of plain strings:

{
  "meta": {
    "title": {
      "_i18n": true,
      "en": "About Us",
      "pl": "O Nas",
      "de": "Ueber Uns"
    },
    "description": {
      "_i18n": true,
      "en": "Learn about our team.",
      "pl": "Poznaj nasz zespol.",
      "de": "Erfahren Sie mehr ueber unser Team."
    },
    "slugs": {
      "en": "about",
      "pl": "o-nas",
      "de": "ueber-uns"
    }
  }
}

The _i18n: true marker tells Meno this field has per-locale values. The slugs object maps locale codes to URL-friendly path segments.

Node Types

The root tree can contain these node types:

CMS-Backed Pages

Pages can be backed by a CMS collection. Set source: "cms" in meta and configure the cms object:

{
  "meta": {
    "title": "{{cms.title}}",
    "source": "cms",
    "cms": {
      "id": "blog-posts",
      "name": "Blog Posts",
      "slugField": "slug",
      "urlPattern": "/blog/{{slug}}",
      "fields": {
        "title": { "type": "string", "required": true },
        "slug": { "type": "string", "required": true },
        "body": { "type": "rich-text" }
      }
    }
  }
}

This creates a page template that generates one HTML file per CMS entry during static build.

Next Steps

• Building Components -- Create reusable UI blocks.

• Styling -- Add responsive styles and colors.

• Interactive Styles -- Add hover, focus, and state-based styles.