v148 · in developer trial · DOM

PI Annotation System

A document editor that uses <?target data?> processing instructions as invisible annotations. Edit HTML with PIs, see them parsed into the DOM via TreeWalker, and inspect the annotation panel.

Checking ProcessingInstruction parsing support…

editor + preview

0 PIs found

HTML source (edit freely):

Rendered document:

Click "Parse & render" to see the document.

annotation panel

All ProcessingInstruction nodes found by the TreeWalker. Click an item to highlight the corresponding annotation in the preview.

serialize with PIs intact

use cases

Metadata embedding

Attach invisible metadata to any document position without affecting layout or CSS selectors.

<?meta version="2.4.1" author="alice"?>
<p>This paragraph has metadata</p>

CMS content markers

Mark editable regions, component boundaries, and revision points for CMS systems.

<?cms-block id="hero" editable="true"?>
<h1>Hero heading</h1>
<?cms-block-end?>

i18n string IDs

Tag translatable strings with their translation keys, invisible to the browser.

<p><?i18n key="home.hero.title"?>Welcome</p>
<p><?i18n key="home.hero.body"?>Start here.</p>

Streaming range markers

Declarative Partial Updates uses PIs as lightweight range anchors for out-of-order streaming.

<?start name="section-1"?>
<article>…content…</article>
<?end?>

how it works

Chrome 148 (behind a developer trial flag) enables the HTML parser to emit ProcessingInstruction DOM nodes when it encounters <?target data?> syntax. You walk them with a TreeWalker using the SHOW_PROCESSING_INSTRUCTION filter.

// Walk all PI nodes in a document subtree
const walker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_PROCESSING_INSTRUCTION
);

let node;
while ((node = walker.nextNode())) {
  console.log(node.target); // e.g. "annotation"
  console.log(node.data);   // e.g. 'type="comment" id="1"'
}

// DOMParser also exposes them (DOMParser uses XML rules, so PIs work there today)
const parsed = new DOMParser().parseFromString(html, 'text/html');
// In Chrome 148+ with flag: PI nodes appear in the parsed tree

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗