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

# Process runtime fragments

> Mount reactive bindings on HTML inserted after page load with process().

## The problem

Hypermedia swaps and client `innerHTML` insert new markup after the initial mount. That HTML is not wired to the page signal store unless you manually re-run binding setup.

## How Aero helps

`process(element)` scans a DOM subtree for `data-aero-*` directives and attaches the same binding handlers used at initial mount. Hypermedia swaps call `process` automatically when both flags are on. See [Using hypermedia with reactivity](/guide/hypermedia/using-with-reactivity).

## Hypermedia (automatic)

When both `reactivity: true` and `hypermedia: true` are set, swapped fragment HTML is processed into the shared page store. Compiled regions go through destroy → swap → remount/process so bindings stay consistent.

No extra client code is required for standard action targets.

## Manual process from client scripts

Insert HTML with `data-aero-*` attributes, then process:

```html theme={"theme":"github-dark-default"}
<script is:state>
	let note = 'Hello from the page store'
	let showNote = true
</script>

<div id="host"></div>

<script>
	import aero from '@aero-js/core'

	document.getElementById('insert')?.addEventListener('click', () => {
		const host = document.getElementById('host')
		host.innerHTML =
			'<p data-aero-show="$showNote"><span data-aero-text="$note"></span></p>'
		aero.getReactivityRuntime?.()?.process(host)
	})
</script>
```

In runtime fragments, prefix signal paths with `$` to read from the page store (`$note`, `$showNote`).

### Restricted grammar (default)

`process()` is **eval-free**. Supported attribute values:

* **Store refs:** `$note`, `$items`, `$auth.state`
* **Structural:** `$status` or string literals (`loading`, `"error"`)
* **Events:** hypermedia action grammar only (`GET('/path')`) — wired by hypermedia `process()` before reactivity runs

Arbitrary JavaScript in attributes (e.g. `{ count + 1 }`) is rejected. Use `<script is:state>` for compiled bindings, or `unsafeProcessFragment()` from `@aero-js/reactivity` for trusted dynamic HTML only. See [CSP and eval-free reactivity](/guide/reactivity/csp).

### Structural fragments

Runtime HTML can include structural directives:

```html theme={"theme":"github-dark-default"}
<div data-aero-switch="$status">
	<template data-aero-case="loading"><p>Loading…</p></template>
	<template data-aero-case="error"><p>Error</p></template>
	<template data-aero-default><p>Ready</p></template>
</div>
```

Call `process(host)` after inserting the markup.

## Package API

Lower-level helpers live in `@aero-js/reactivity`:

```ts theme={"theme":"github-dark-default"}
import { processFragment, unsafeProcessFragment, createReactivityRuntime } from '@aero-js/reactivity'

const runtime = createReactivityRuntime({ initialState: { count: 0 } })
processFragment({ element: host, store: runtime.store })

// Trusted content only — requires unsafe-eval CSP:
unsafeProcessFragment({ element: trustedHost, store: runtime.store })
```

Most apps use the composed runtime from `@aero-js/core` rather than calling these directly. `unsafeProcessFragment` is not re-exported from `@aero-js/core`.