---
title: "Annotations · Leiho docs"
description: "Mark what editors can change."
url: https://leiho.dev/docs/annotations
lang: en
updated: 2026-11-04
---
Guides

# Annotations

Mark what editors can change.

In a JavaScript framework, let the `leiho` package write the attributes: `field()`, `block()` and `entry()` return an object to spread on the element (JSX, Astro, Svelte; `v-bind` in Vue).

```jsx
import { field, block } from 'leiho';

<h1 {...field(page, 'hero_title')}>{page.fields.hero_title}</h1>
<section {...block(page, 'sections', i, 'Hero')}>…</section>
```

`field(page, 'intro', { html: true })` adds `data-leiho-apply="html"`; `{ refresh: true }` adds `data-leiho-refresh="save"`. In plain HTML or server templates, write the attributes below by hand.

| Attribute | Purpose |
| --- | --- |
| `data-wp-post="12"` | Container: the WordPress post ID for the fields inside |
| `data-wp-field="hero_title"` | Editable element: ACF field name, or `_title` / `_thumbnail` |
| `data-wp-field="cards.0.title"` | Dotted paths reach into repeaters, flexible content and groups |
| `data-leiho-apply="html"` | The value contains markup (an accent `<span>` in a heading): inject filtered HTML instead of text |
| `data-leiho-refresh="save"` | No live preview for this field; reload the page after saving (complex WYSIWYG rendering) |
| `data-leiho-section="Hero"` | Name a section in the Structure tree |
| `data-leiho-layout="sections.2"` | Bind a section to a flexible content row, so editors can add, move, duplicate and remove it |
| `data-leiho-managed="menu"` | Content managed elsewhere (menus, post lists, WooCommerce): clicking explains where to edit it |
| `data-leiho-edit-url="…"` | The wp-admin screen for that managed content |

**One rule:** always render an annotated element, even when its value is empty. `{title && <h2 data-wp-field="title">…}` breaks live editing, because an element missing from the page can't be filled in. Leiho flags such fields as "not on this page".

Client-side navigation (React Router, Next.js links, `history.pushState`) and re-renders are handled: the bridge re-scans the page and keeps unsaved edits applied.

Updated November 4, 2026[Something unclear on this page? Tell us →](https://github.com/pixelersagency/leiho/issues/new?title=Docs%3A%20Annotations)