Schema instances in HTML

A schema instance is an HTML element marked up with Microdata that pagelove.mjs recognizes as an addressable record.

When to reach for it

Reach for an instance whenever a record needs to live on the page. Use one per note, post, comment, or any other typed item the renderer will bind to a template and the patch pipeline will mutate in place.

Anatomy of an instance

An instance is an <article> element carrying Microdata attributes. The element's tag does not have to be <article>, but create() always produces one.

Attribute	Required	Purpose
`itemscope`	yes	Marks the element as a Microdata item.
`itemtype`	yes	Names the schema URL. Must match a registered template.
`id`	only if the instance will be edited, deleted, or bound	Routing key for patches and view binding.

Instances created by create() receive an auto-generated id of the form item-<base36-timestamp><random>.

How instances are discovered

On load, pagelove.mjs runs #discoverInstances() against the document. The selector is:

[itemscope][itemtype]:not(template):not([itemprop])

Discovery rules:

Elements inside a <template> are skipped.
Elements carrying itemprop are skipped — they are nested properties, not top-level instances.
Instances whose itemtype has no matching template in the document are skipped silently. No error is raised.
When an explicit schema root is configured, only its direct [itemscope][itemtype][id] children are scanned.

The renderer locates a template by exact itemtype URL match against <template itemtype="…"> elements already indexed by #discoverTemplates().

Property elements inside an instance

create() builds one child element per property, keyed off the schema type:

Property type	Element shape
`Text`, `Integer`, `Number`, `Boolean`	`<meta itemprop="…" content="…">`
`Date`, `DateTime`	`<time itemprop="…" datetime="…">`
Nested schema type	A child `<article itemscope itemtype="…">`

Properties with cardinality 0..n and no value are omitted at creation and appended later. Nested schema values must be passed as an HTMLElement; raw objects are skipped.

The full grammar of property elements lives on the sibling page Schema definitions in HTML.

Examples

Primitive properties only

<article itemscope
         itemtype="https://schema.host/Note"
         id="item-lxk3p2m1-a7b4">
  <meta itemprop="title" content="Grocery list">
  <meta itemprop="body" content="Bread, olives, lemons.">
  <meta itemprop="color" content="#ffd166">
</article>

Nested item

<article itemscope
         itemtype="https://schema.host/Post"
         id="item-lxk3p9zq-f2c8">
  <meta itemprop="title" content="On discovery">
  <time itemprop="publishedAt" datetime="2026-04-08T09:15:00Z"></time>
  <article itemprop="author"
           itemscope
           itemtype="https://schema.host/Person"
           id="item-lxk3pa11-91de">
    <meta itemprop="name" content="Ada Park">
    <meta itemprop="handle" content="ada">
  </article>
</article>

The nested <article> carries both itemprop="author" (tying it to the parent) and its own itemscope/itemtype. Because it has itemprop, #discoverInstances() will not treat it as a top-level instance — it belongs to its parent.