Markup contract

You mark editable spots with data-ueee* attributes. Deciding what is editable is a human authoring choice — ueee cannot infer it. This is the heart of the system.

Attribute	Meaning
data-ueee="key"	An editable text slot. The value at this dotted path replaces the element’s text.
data-ueee-parent="seg"	On an ancestor — composes a path prefix for descendants (path scoping).
data-ueee-attr="name"	Inject into an attribute (e.g. src, href) instead of text content.

The path of a slot is its ancestor data-ueee-parent segments joined with the leaf data-ueee, dot-separated.

<section data-ueee-parent="hero">
  <h1 data-ueee="title">Welcome</h1>
  <img data-ueee="image" data-ueee-attr="src" src="/placeholder.jpg" alt="" />
</section>

src/content/index.yaml

hero:
  title: Welcome to Harbor
  image: /media/hero.jpg

→ renders <h1>Welcome to Harbor</h1> and <img src="/media/hero.jpg">. A slot with no matching value is left as authored (its hardcoded text acts as the fallback).

A slot edits text by default. To give it a type — number, richtext, select, image, and more — plus validation, see Field types.

Editing content behind components

If your text is a component prop (not an inline element), the component must opt in — accept a key and tag its own elements:

---
const { title, ueeeKey } = Astro.props;
---
<h1 data-ueee={ueeeKey ? 'title' : undefined}>{title}</h1>

<PageHeader title="About" ueeeKey="about" />   <!-- → about.title -->

Other usages of the component (no ueeeKey) stay untouched.