Properties Panel

The properties panel sits at the side of the editor and edits whatever node is currently selected in the structure tree. What it shows depends on the node type: a component instance shows that component's props, while a plain HTML element shows its tag, attributes, and content. Styling lives in its own surface — see the styling editor — so this panel focuses on data and structure.

Every change you make here is written straight to the underlying .astro file. When you edit a prop value, the editor re-emits the matching JSX attribute; when you set a condition, it re-emits the {cond && ( … )} wrapper. Hand-edit the same file and the panel reflects it on the next read. The two surfaces stay in sync through the meno-astro codec.

Editing a component instance

When the selected node is a component instance — a Capitalized tag like <Button /> or <Heading /> — the panel lists that component's props. The fields come from the component's resolveProps(Astro, {…}) definition, which is the single source of truth for its props (see component props). Each prop is rendered with an editor matched to its declared type:

So a Heading defined with resolveProps(Astro, { text: { type: "rich-text" }, size: { type: "select", options: ["1","2","3"] } }) shows a rich text field for text and a dropdown for size. Setting them re-emits <Heading size="2" text={i18n({ _i18n: true, en: "About" })} />. A prop left at its default emits nothing — only overrides are written.

Editing an HTML element

When the selected node is a plain element (<div>, <img>, <p>, …), the panel exposes its tag, attributes, and content.

• Tag — change div to section, span to p, and so on. The element re-emits with the new tag.

• Attributes — standard HTML attributes are written verbatim into the markup: src, alt, href, target, loading, id, data-*, aria-*. An <img> with src and alt set emits <img src="/images/hero.webp" alt="Hero" loading="lazy" />.

• Content — for a text element, the content field edits the node's children. Plain text emits as a bare string (<span>Hello</span>); an internationalized value emits through i18n({ _i18n: true, en, pl }).

Binding to data

Any prop, attribute, or content value can be bound to dynamic data instead of a fixed value. A bound value is a template expression: in the model it is {{expr}}, and in the markup it emits as a JSX {expr} (a whole-string template) or a backtick literal (a mixed string).

The most common case is a CMS field on a template page. Binding an <img> src to cms.featuredImage emits <img src={i18n(cms.featuredImage)} />, and binding a <span>'s content to item.title inside a list emits <span>{item.title}</span>. The editor wraps CMS-data bindings in i18n(…) automatically so an internationalized field never renders as [object Object].

Inside a component, the link to prop option binds a value to one of the component's own props rather than a literal. Linking a class mapping or an href to a prop emits a _mapping binding — for example href={href({ _mapping: true, prop: "link" })} ties the element's link to the component's link prop, so each instance can set its own destination from the props panel. The same mechanism powers prop-driven style mappings ({ _mapping: true, prop, values }).

Label, visibility, and meta

Beyond props and content, the panel carries a few node-level settings:

• Label — a custom display name for the node. It does not change the markup output; it travels in the node's editor meta (the label key of the style() meta argument) and is shown in the structure tree to make a deep tree readable.

• **Condition (if)** — controls whether the node renders. A condition of {{visible}} emits {visible && ( … )}; a hard false emits {false && ( … )}; a prop-driven boolean mapping emits {when({…}) && ( … )}. Use this to make optional sections — a Card image that only renders when a showImage prop is truthy.

• Meta — other editor-only metadata for the node is kept in the same meta payload and round-trips alongside the markup.

Because the panel writes directly to the .astro source, anything you set here is plain, version-controlled Astro you can also reach by hand-editing the file. Pair this panel with the styling editor for visuals and the structure tree for selection and nesting.