> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stage.systems/llms.txt
> Use this file to discover all available pages before exploring further.

# Edit anchors

> The inert data-e-* attributes a renderer emits so the editor can map a click back to a component id and a field path.

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](/developers/editing/components#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`.

```astro theme={null}
<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

<Steps>
  <Step title="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.
  </Step>

  <Step title="Anchor the element that holds the text">
    Not a parent. The editor makes exactly that element editable.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>
</Steps>

<Note>
  Anchors were originally named `data-stage-*`. The editor still reads both names during the transition.
</Note>

## Next steps

<CardGroup cols={2}>
  <Card title="Components" href="/developers/editing/components">
    A full renderer, registered.
  </Card>

  <Card title="The write model" href="/developers/editing/write-model">
    What happens to a patch.
  </Card>
</CardGroup>