Mounting

Enhance existing markup or mount independent reactive islands on a static page.

Regor can mount directly on existing DOM and compose with many rendering/runtime strategies.

One common pattern is static-first pages with dynamic islands, but Regor is not limited to that model.

Render most page content as static HTML (SSG/SSR/build-time output).
Mount Regor only where runtime behavior is needed.
Keep static and dynamic ownership intentionally separated.

In many projects, this can mean mostly static content with selectively mounted dynamic regions.

Existing HTMLIslandsOwnership

Mount only where interaction is needed. Give each app a clear DOM boundary.

Why this is powerful

This architecture gives you:

Fast first paint from static HTML.
Minimal runtime cost by mounting only where needed.
Better control over complexity and ownership boundaries.
Freedom to run multiple independent Regor apps on one page.

Typical dynamic islands

Examples where selective mounting is ideal:

Auth/login area in top navigation.
Profile badge/menu/avatar state.
Cart counters and checkout widgets.
Search/filter controls.
Realtime status chips, notifications, dashboards.

This guide uses the island pattern

The live previews in the reactivity, templates, components, and lifecycle guides mount into their own roots. Navigation and the rest of the page stay outside those roots.

Multi-mount pattern

You can mount separate Regor contexts into multiple existing DOM roots:

<header>
  <div id="auth-island">
    <button r-if="!user">Login</button>
    <img r-else :src="user.avatar" :title="user.name" />
  </div>
</header>

<aside>
  <div id="notif-island">
    <span r-text="count"></span>
  </div>
</aside>

import { createApp, ref, sref } from 'regor'

const user = sref<{ name: string; avatar: string } | null>(null)
const count = ref(0)

createApp({ user }, { element: document.querySelector('#auth-island')! })

createApp({ count }, { element: document.querySelector('#notif-island')! })

This is first-class Regor usage.

Runtime ownership options

When mixing runtimes and rendering layers:

Static renderer owns static regions.
Regor owns only mounted island roots.
Multiple runtimes can coexist, including on nearby/overlapping areas, but behavior is easiest to reason about when ownership boundaries are explicit.
Use clear root boundaries per island where possible for predictability.

Mount modes on existing DOM

createApp supports:

In-place binding of existing subtree ({ element } or { selector } without template/json).
Replacing root children when template or json is provided.

Use in-place mode whenever markup is already present and you only need reactive behavior.

Architectural guidance

Prefer many small island roots over one giant runtime root.
Keep high-churn UI in isolated islands.
Keep long-form/static content fully static.
Unmount islands explicitly when their host is removed.