Node Types Reference

Meno pages are built from a tree of typed nodes. Every node has a type field that determines its behavior, available properties, and how it renders to HTML during static build.

There are 7 node types: node, component, link, embed, list, locale-list, and slot.

1. node (HTML Element)

Renders a standard HTML element. This is the most common node type.

Properties

Examples

Basic container with padding:

{
  "type": "node",
  "tag": "div",
  "style": { "base": { "padding": "16px", "display": "flex", "gap": "12px" } },
  "children": [
    { "type": "node", "tag": "span", "children": "Hello" },
    { "type": "node", "tag": "span", "children": "World" }
  ]
}

Image element (void element, no children):

{
  "type": "node",
  "tag": "img",
  "attributes": {
    "src": "/hero.jpg",
    "alt": "Hero image",
    "fetchpriority": "high",
    "loading": "eager",
    "width": "1200",
    "height": "600"
  }
}

Text content does NOT use a text property. Always use children:

{
  "type": "node",
  "tag": "p",
  "children": "This is a paragraph."
}

Mixed text and inline elements:

{
  "type": "node",
  "tag": "p",
  "children": [
    "Read our ",
    { "type": "node", "tag": "strong", "children": "documentation" },
    " to learn more."
  ]
}

2. component (Component Instance)

Renders an instance of a reusable component defined in components/*.json.

Properties

Do not add style directly to component instances unless necessary. Define props in the component interface that map to styles via _mapping objects.

Examples

Simple component with props:

{
  "type": "component",
  "component": "Button",
  "props": { "text": "Click me", "variant": "primary" }
}

Component with slot children:

{
  "type": "component",
  "component": "Card",
  "props": { "title": "Featured" },
  "children": [
    { "type": "node", "tag": "p", "children": "Card body content goes here." }
  ]
}

3. link

Renders as a <div> in the editor and as an <a> tag in the static build.

Properties

Examples

Static link:

{
  "type": "link",
  "href": "/about",
  "children": ["Learn more"]
}

Link with target attribute:

{
  "type": "link",
  "href": "https://github.com",
  "attributes": { "target": "_blank", "rel": "noopener noreferrer" },
  "children": ["GitHub"]
}

Dynamic href in a component (using a link-type prop):

{
  "type": "link",
  "href": "{{link}}",
  "children": ["{{linkText}}"]
}

The component interface defines the prop as:

{
  "link": { "type": "link", "default": { "href": "/", "target": "_blank" } }
}

Link mapping for prop-based href resolution:

{
  "type": "link",
  "href": { "_mapping": true, "prop": "link" }
}

4. embed

Renders raw HTML or SVG content. Useful for icons, third-party widgets, or custom markup.

Properties

Examples

SVG icon:

{
  "type": "embed",
  "html": "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>",
  "style": { "base": { "width": "24px", "height": "24px" } }
}

Third-party embed:

{
  "type": "embed",
  "html": "<iframe src=\"https://www.youtube.com/embed/dQw4w9WgXcQ\" frameborder=\"0\" allowfullscreen></iframe>",
  "style": { "base": { "width": "100%", "aspectRatio": "16/9" } }
}

5. list

Renders children repeatedly for each item from a data source. Supports two source types: component props (prop) and CMS collections (collection).

Properties

Collection-only properties (ignored when sourceType is "prop"):

Examples

List from component prop:

{
  "type": "list",
  "sourceType": "prop",
  "source": "items",
  "children": [
    { "type": "node", "tag": "div", "children": "{{item.label}}" }
  ]
}

List from CMS collection with sorting:

{
  "type": "list",
  "sourceType": "collection",
  "source": "posts",
  "limit": 10,
  "sort": { "field": "createdAt", "order": "desc" },
  "children": [
    {
      "type": "link",
      "href": "{{post._url}}",
      "children": [
        { "type": "node", "tag": "h3", "children": "{{post.title}}" },
        { "type": "node", "tag": "p", "children": "{{post.excerpt}}" }
      ]
    }
  ]
}

When sourceType is "collection", the default item variable is the singularized collection name. For "posts", it becomes {{post.title}}. Override with itemAs:

{
  "type": "list",
  "sourceType": "collection",
  "source": "posts",
  "itemAs": "article",
  "children": [
    { "type": "node", "tag": "h3", "children": "{{article.title}}" }
  ]
}

Filtered collection list:

{
  "type": "list",
  "sourceType": "collection",
  "source": "posts",
  "filter": { "field": "category", "operator": "eq", "value": "tech" },
  "sort": { "field": "_createdAt", "order": "desc" },
  "limit": 5,
  "excludeCurrentItem": true,
  "children": [
    { "type": "node", "tag": "div", "children": "{{post.title}}" }
  ]
}

List item context variables available in children templates:

6. locale-list (Language Switcher)

Renders a locale switcher that generates links for each configured language. Requires i18n to be configured in project.config.json.

Properties

Examples

Full language switcher with native names and flags:

{
  "type": "locale-list",
  "displayType": "nativeName",
  "showFlag": true,
  "showCurrent": true,
  "showSeparator": true,
  "style": { "base": { "display": "flex", "gap": "8px", "alignItems": "center" } },
  "itemStyle": { "base": { "fontSize": "14px", "color": "var(--text-secondary)" } },
  "activeItemStyle": { "base": { "fontWeight": "700", "color": "var(--text-primary)" } }
}

Minimal code-only switcher:

{
  "type": "locale-list",
  "displayType": "code",
  "showFlag": false,
  "showSeparator": false
}

7. slot

Marks where instance children are inserted inside a component structure. Used only in component definitions (components/*.json), not in pages.

Only one slot per component is allowed.

Properties

Examples

A component structure with a slot:

{
  "component": {
    "interface": {
      "title": { "type": "string", "default": "Card Title" }
    },
    "structure": {
      "type": "node",
      "tag": "div",
      "style": { "base": { "padding": "16px", "border": "1px solid var(--border)" } },
      "children": [
        { "type": "node", "tag": "h3", "children": "{{title}}" },
        { "type": "slot" }
      ]
    }
  }
}

Slot with default content:

{
  "type": "slot",
  "default": [
    { "type": "node", "tag": "p", "children": "Default slot content" }
  ]
}

Shared Properties

All node types (except slot) support these properties:

Next Steps

• Component Props -- prop types and interpolation

• Style Properties -- responsive styles, interactive styles, and conditionals

• Template Expressions -- mustache syntax in all contexts

• CMS Fields -- field types for CMS collections