Edit anchors

Anchors are how a rendered page tells the editor what it is looking at. They are plain attributes added at build time. No script, no runtime cost, a few bytes per field.

The attributes

Attribute	On	Meaning
`data-e-id`	A component wrapper	The component’s stable id
`data-e-type`	A component wrapper	The component type
`data-e-path`	An editable field	The dotted path of the field, relative to the component (`props.title`, `props.items.2.name`)
`data-e-rich`	A field	Rendered as HTML, so the editor keeps inline markup
`data-e-date`	A field	Open a date picker instead of a text editor
`data-e-media`	A field	An image-or-video slot; opens the combined library
`data-e-ref`	A field	The value’s canonical home is another row. See Shared content
`data-e-current`	An item	The active item in a stateful component (the current slide or tab)

Row-level fields on an article or form (title, date) use a reserved meta id so the editor patches the row rather than a body component.

The helpers

The SDK exports one set of helpers. Each returns a plain attribute object that spreads identically onto an Astro element or a React element, so the attribute names can never diverge between stacks. The template re-exports them from lib/stage-anchors.ts.

<section {...stageAttrs(_stageId, _stageType)}>
  <h1 {...stagePath("props.title")}>{title}</h1>
  <div {...stagePath("props.body", { rich: true })} set:html={sanitizeHtml(body)} />
  <time {...stageMeta("date", { date: true })}>{formatted}</time>
</section>

Helper	Emits
`stageAttrs(id, type)`	`data-e-id`, `data-e-type` on the wrapper
`stagePath(path, { rich })`	`data-e-path`, plus `data-e-rich` for HTML fields
`stageMeta(path, { date })`	A row-level article field (`title`, `date`)
`stageFormMeta(path)`	A row-level form field
`stageArray(path)` / `stageField(key)`	A list container and the fields inside a list item
`stageMedia(path, videoPath)`	An image-or-video slot
`stageRef({ kind, key, id, path }, opts)`	A field whose home is another page, article or global

Rules for renderers

Render the raw stored value

The editor baselines from what is rendered. A truncated or reformatted render would drift from the stored value. Dates are the exception: a date anchor baselines from the stored value and opens a calendar.

Anchor the element that holds the text

Not a parent. The editor makes exactly that element editable.

Sanitise HTML on the way in and out

Rich fields render through sanitizeHtml and are cleaned again on save. Inline markup survives, scripts and unexpected tags do not.

Leave anchors in production

They are inert and named so the platform is invisible in view-source. To strip them from a public-only build, the SDK has one emit switch every stack routes through.

Anchors were originally named data-stage-*. The editor still reads both names during the transition.

Start

Making content editable

Making content addable

Media

Next.js

Analytics SDK

Platform reference

Edit anchors

The attributes

The helpers

Rules for renderers

Next steps

Components

The write model

​The attributes

​The helpers

​Rules for renderers

​Next steps

Components

The write model

The attributes

The helpers

Rules for renderers

Next steps