API Reference
The v0.44.0-beta.1 current line documents only the five consumer packages. Retired alpha packages and internal subpaths are not authoring surfaces.
Authoring starts at product packages.
Five products, one application path.
The official Vite, content, static-build and Nitro output adapter.
Use `buildApp()` or the generated build task.Plugin ordering, manifests and content scans are adapter implementation details.The application surface for pages, routes, islands and request/render semantics.
Use `definePage`, `defineIslandConfig` and `defineApp` for application authoring.The router and request-driver implementation are internal product knowledge.The installed starter and zero-context consumer entrypoint.
Generated projects expose `dev`, `check`, `test`, `build`, `start` and `preview`.The starter imports product packages only.The supported Custom Element authoring surface for JSX, DSD, hydration, signals and styles.
Start here for standalone element authoring.Author compiled elements as `@element`-decorated `OpenElement` classes with `@property` state; `StyleSheet` and signal helpers come from the same root.@experimental additions: the `element`/`property` decorator intrinsics (#1209) and the dangerous-key guards `isDangerousKey`, `injectPropsSafe`, `DANGEROUS_KEYS` (#1214).Optional primitives retained only when they have demonstrated reusable behavior.
UI is not required to use OpenElement.Website-specific brand, hero, lab and layout artifacts are not UI package contracts.Every documented export, anchored.
Build an OpenElement application through the supported adapter boundary.
packages/adapter-vite/src/index.ts:64Build the headExtras string from FrameworkOptions.inject.
packages/adapter-vite/src/head-injection.ts:247One loaded collection entry: slug, validated frontmatter and rendered HTML.
packages/adapter-vite/src/internal/content/collection/types.ts:48Declarative definition of one frontmatter field (type, required, default).
packages/adapter-vite/src/internal/content/collection/types.ts:5Primitive frontmatter field types supported by content collections.
packages/adapter-vite/src/internal/content/collection/types.ts:2Configuration of one content collection (directory, base path, schema).
packages/adapter-vite/src/internal/content/collection/types.ts:39Declarative fields keep generated modules typed. `transform` covers values derived from filenames (for example a site's locale suffix) without making that convention part of the framework.
packages/adapter-vite/src/internal/content/collection/types.ts:30Context handed to a collection schema's `transform` hook.
packages/adapter-vite/src/internal/content/collection/types.ts:12The slug/frontmatter result a collection schema `transform` returns.
packages/adapter-vite/src/internal/content/collection/types.ts:20Create the Vite plugin that loads one content collection into a generated data module.
packages/adapter-vite/src/internal/content/collection/plugin.ts:22Low-level Vite plugin pipeline: SSR dev server, SSG and islands without the content/i18n conveniences of `openElement()`.
packages/adapter-vite/src/index.ts:43Generate sitemap.xml and optionally robots.txt from dist/ output.
packages/adapter-vite/src/internal/content/sitemap/generator.ts:79Result of building head extras from FrameworkOptions.
packages/adapter-vite/src/head-injection.ts:235Load a content collection from disk: parse frontmatter, validate the schema and render Markdown.
packages/adapter-vite/src/internal/content/collection/data.ts:10Vite plugin compiling `.mdx` route files into compiled page modules.
packages/adapter-vite/src/plugin-mdx.ts:228Create the full OpenElement Vite plugin set: pipeline, content collections, nav, i18n and sitemap.
packages/adapter-vite/src/app-vite.ts:38Blog options stored in the adapter build context.
packages/adapter-vite/src/framework.ts:27Minimal build-context contract available to adapter sub-plugins.
packages/adapter-vite/src/framework.ts:52Locale options carried through the build context to the i18n integration.
packages/adapter-vite/src/framework.ts:45Options for the openElement() unified Vite entry.
packages/adapter-vite/src/app-vite.ts:28Options for the `.mdx` route plugin ({@linkcode mdxPlugin}).
packages/adapter-vite/src/plugin-mdx.ts:25Low-level Vite plugin pipeline: SSR dev server, SSG and islands without the content/i18n conveniences of `openElement()`.
packages/adapter-vite/src/index.ts:43Options for the low-level {@linkcode openPipeline} Vite plugin pipeline.
packages/adapter-vite/src/index.ts:32Serialize loaded collection entries into the generated typed data module source.
packages/adapter-vite/src/internal/content/collection/data.ts:44Mounts an OpenElement request handler on a Nitro v3 route. Near pass-through: the event's standard `req` goes in, the handler's Response comes out — h3 v2 serves a returned Response as-is.
packages/adapter-vite/src/nitro-mount.ts:62Minimal Nitro v3 route event shape (#857). Nitro v3 is fetch-native: its h3 v2 event carries `req`, a srvx ServerRequest that already IS a standard Request, so the pre-v3 method/path/headers/body translation layer is gone. The mount only wires the OpenElement runtime context around the standard Request → Response seam.
packages/adapter-vite/src/nitro-mount.ts:11Options for mounting an OpenElement request handler under a Nitro/Node server.
packages/adapter-vite/src/nitro-mount.ts:21Generate sitemap.xml and optionally robots.txt from dist/ output.
packages/adapter-vite/src/internal/content/sitemap/generator.ts:79Sitemap module configuration
packages/adapter-vite/src/internal/content/types.ts:73Route action: handles form submissions for a page route.
packages/element/src/internal/protocol/data.ts:67Request header selecting the action response channel (ADR-0121, amends ADR-0120): `true` marks a programmatic caller and selects the serialized ActionResult union; `enhance` marks the built-in morph enhancement and selects the same full-HTML responses the no-JS path receives.
packages/element/src/internal/protocol/data.ts:144Context passed to a route action function (extends loader context).
packages/element/src/internal/protocol/data.ts:50Wire shape returned to the JavaScript form-enhancement path (0.42.0-alpha.2, ADR-0120). The no-JS path never sees this: it gets the equivalent semantics as plain HTTP (303 on success, 422 with the re-rendered form on validation failure, redirect/error as status codes).
packages/element/src/internal/protocol/data.ts:110Build the canonical OpenElement request context from a platform request event.
packages/app/src/model.ts:27Inputs for building an {@linkcode OpenElementRequestContext} from a platform request event.
packages/app/src/model.ts:17Define a client-side SPA application: route table, router mode and mount/dispose lifecycle.
packages/app/src/spa.ts:100Validate and register an island delivery descriptor; returns the normalized config.
packages/app/src/authoring.ts:493Attach a page descriptor to a compiled page element class.
packages/app/src/authoring.ts:320Return a structured action failure with an HTTP status and typed data payload.
packages/app/src/authoring.ts:166Type guard for {@linkcode OpenElementActionFailure}, including its duck-typed cross-realm shape.
packages/app/src/authoring.ts:171Per-island delivery configuration (SSR/DSD participation and hydration strategy).
packages/app/src/authoring.ts:422Delivery strategy for an island: a hydration trigger or media-gated loading.
packages/app/src/authoring.ts:419Type guard for {@linkcode OpenElementNotFound}, including its duck-typed cross-realm shape.
packages/app/src/authoring.ts:130Type guard for {@linkcode OpenElementRedirect}, including its duck-typed cross-realm shape.
packages/app/src/authoring.ts:114Route loader: fetches data for a page route.
packages/element/src/internal/protocol/data.ts:59Context passed to a request-time ('dynamic') route loader.
packages/element/src/internal/protocol/data.ts:43Throw an {@linkcode OpenElementNotFound} to render the 404 path.
packages/app/src/authoring.ts:109Expected-failure channel for actions (0.42.0-alpha.2, ADR-0120): validation failures RETURN `fail(status, data)` — never throw — so the server can answer 422 with the form re-rendered and the submitted values echoed back. Thrown values keep the exception channel (redirect/notFound/error page).
packages/app/src/authoring.ts:147Not-found signal thrown from a loader to render the route's 404 path.
packages/app/src/authoring.ts:88The page descriptor the pipeline reads (`module.default.openElementPage`). Attached to the compiled page class by definePage(); the class owns the render program, so the descriptor carries metadata and projectors only.
packages/app/src/authoring.ts:275Redirect signal thrown from a loader/action to short-circuit rendering with an HTTP redirect.
packages/app/src/authoring.ts:60Host-agnostic request context shared by App request adapters.
packages/app/src/model.ts:3A compiled element class carrying the page descriptor static.
packages/app/src/authoring.ts:288Maps a caught render/loader/action failure onto the error variant of the page's compiled properties. Its presence declares that the page's compiled markup carries an error variant (the generated entry renders the page with these props and status 500 — the POST/GET error-boundary channel of ADR-0121 §7); without it the generic status page answers.
packages/app/src/authoring.ts:251The request-scoped context handed to a page's props projector. Everything a compiled page can render must pass through here: the compiled render() only reads `this.<property>`, so the projector is the single deterministic seam that maps loader data, action data, params and request onto the page's compiled properties (v0.44, ADR-0143).
packages/app/src/authoring.ts:219Maps the request-scoped context onto the page's compiled properties. Declared as part of the page descriptor; the generated server entry and the SPA bootstrap call it per render and feed the result to renderDsd() props (server) or pre-connect property sets (SPA).
packages/app/src/authoring.ts:239Media type of the RFC 9457 action error channel (#863).
packages/element/src/internal/protocol/data.ts:136RFC 9457 Problem Details document (0.42.0-alpha.13, #863, ADR-0123 addendum item 13): the action error channel answers `application/problem+json` instead of the bespoke `{ type: 'error', error: { message } }` JSON, so HTTP tooling recognizes failures natively. With `type: 'about:blank'`, `title` is the HTTP reason phrase and `detail` carries the specific explanation. The wire shape is alpha-unfrozen; ADR-0122 acceptance freezes it in this problem+json form.
packages/element/src/internal/protocol/data.ts:124Throw an {@linkcode OpenElementRedirect} for `location` (status must be a real 3xx).
packages/app/src/authoring.ts:104Canonical request-time/SSG server route context.
packages/element/src/internal/protocol/data.ts:28Context passed to a request-time ('dynamic') route loader. This is the server contract: the loader runs on the server with the Web-standard request, matched route params, the host environment and the platform object, and signals validation failure via fail()/redirect() (ADR-0120).
packages/element/src/internal/protocol/data.ts:22SPA route action: client-side submit handler; signal failure by throwing.
packages/element/src/internal/protocol/data.ts:97Context passed to an SPA-mode route action (client-side).
packages/element/src/internal/protocol/data.ts:89A mounted SPA: idempotent mount/dispose plus the client-side router instance.
packages/app/src/spa.ts:88SPA route loader: client-side data fetch receiving route params only.
packages/element/src/internal/protocol/data.ts:94Context passed to an SPA-mode route loader (#570). The SPA chain runs client-side and supplies only the matched route params — no request, env or platform — and signals failure by throwing (a throw is normalized to action data by the SPA submit handler). These semantics are frozen under ADR-0119; this type names the existing narrowing without changing any runtime behavior.
packages/element/src/internal/protocol/data.ts:84Build the canonical OpenElement request context from a platform request event.
packages/app/src/model.ts:27Inputs for building an {@linkcode OpenElementRequestContext} from a platform request event.
packages/app/src/model.ts:17Host-agnostic request context shared by App request adapters.
packages/app/src/model.ts:3Define a Preact component as a custom-element island with attribute-to-props bridging.
packages/app/src/preact.ts:77A Preact island constructor plus its server-render seam.
packages/app/src/preact.ts:46Options for {@linkcode definePreactIsland} (base props, SSR participation).
packages/app/src/preact.ts:34Define a client-side SPA application: route table, router mode and mount/dispose lifecycle.
packages/app/src/spa.ts:100A mounted SPA: idempotent mount/dispose plus the client-side router instance.
packages/app/src/spa.ts:88Route action: handles form submissions for a page route.
packages/element/src/internal/protocol/data.ts:67Request header selecting the action response channel (ADR-0121, amends ADR-0120): `true` marks a programmatic caller and selects the serialized ActionResult union; `enhance` marks the built-in morph enhancement and selects the same full-HTML responses the no-JS path receives.
packages/element/src/internal/protocol/data.ts:144Context passed to a route action function (extends loader context).
packages/element/src/internal/protocol/data.ts:50Wire shape returned to the JavaScript form-enhancement path (0.42.0-alpha.2, ADR-0120). The no-JS path never sees this: it gets the equivalent semantics as plain HTTP (303 on success, 422 with the re-rendered form on validation failure, redirect/error as status codes).
packages/element/src/internal/protocol/data.ts:110Create a derived read-only signal recomputed from its dependencies.
packages/element/src/internal/signal/framework.ts:23Consumer-local reactive projection of a protocol context value.
packages/element/src/internal/core/signal-context.ts:143A typed context token: protocol identity (`key`) plus its default value.
packages/element/src/internal/core/signal-context.ts:13Create a typed context token shared between provider and consumer elements.
packages/element/src/internal/core/signal-context.ts:58Object prototype keys that must never be injected from untrusted props.
packages/element/src/internal/core/security.ts:25Run a side effect that re-subscribes whenever its signal dependencies change.
packages/element/src/internal/signal/framework.ts:29Compiler-recognized element decorator; inert no-op at runtime.
packages/element/src/internal/core/compile-decorators.ts:20Error message prefix for all openElement errors.
packages/element/src/internal/protocol/errors.ts:15Base class for elements that catch descendant render/hydration errors and apply a retry policy.
packages/element/src/error-boundary.ts:27Callback receiving every reported {@linkcode OpenElementError} for telemetry.
packages/element/src/internal/protocol/errors.ts:38Escape an HTML attribute value.
packages/element/src/internal/core/html-escape.ts:54Escape the five HTML-significant characters in text content.
packages/element/src/internal/core/html-escape.ts:34Runtime list of supported hydration strategies; the single source of truth for the `HydrationStrategy` union. Consumed by island/registry validation and re-exported from the element root for app and build adapters.
packages/element/src/internal/protocol/framework.ts:21Island hydration trigger: 'load' | 'idle' | 'visible' | 'only'.
packages/element/src/internal/protocol/framework.ts:23Safely assign caller-supplied props onto a target object, skipping keys that could enable prototype pollution and tolerating read-only properties.
packages/element/src/internal/core/security.ts:128Shared dangerous-key predicate (#903, #1214). Prototype-internal keys must never be injected from untrusted props on ANY path: host prop collection (collectPublicProps / normalizePublicProps in props-utils.ts), guarded assignment (injectPropsSafe below — the SPA bootstrap page-projection write boundary in
packages/element/src/internal/core/security.ts:51Per-island delivery options (hydration strategy, SSR/DSD participation).
packages/element/src/internal/protocol/island.ts:8Shared safe-attribute-name predicate (#1033). Attribute *names* are not escaped on any render path, so a name must be a valid HTML attribute name (blocks quote/space injection, #602) and must not be an event handler (`on*`, case-insensitive). render-ir.ts (silent skip) and adapter-vite head-injection.ts (throw) enforce the same rule with different failure strategies; both delegate here so the boundary cannot diverge.
packages/element/src/internal/core/security.ts:63Route loader: fetches data for a page route.
packages/element/src/internal/protocol/data.ts:59Context passed to a request-time ('dynamic') route loader.
packages/element/src/internal/protocol/data.ts:43Locale-aware resolved path contract.
packages/element/src/internal/protocol/framework.ts:73Fetch middleware contract (ADR-0123 item 2, #858): WinterCG shape, dialect-free — no Hono/h3 context object. Composed at the handler boundary in onion order (`use[0]` is outermost: it sees the request first and the response last), so it runs with identical semantics in the dev server, the `start` CLI, the e2e fixture server, and the Nitro production entry.
packages/element/src/internal/protocol/framework.ts:131Custom Element base class for the compiled Part Program architecture.
packages/element/src/open-element-implementation.ts:134One documented attribute of a custom element declaration.
packages/element/src/internal/protocol/manifest.ts:10One documented CSS part of a custom element declaration.
packages/element/src/internal/protocol/manifest.ts:33One custom element declaration in a package manifest: tag, members and delivery metadata.
packages/element/src/internal/protocol/manifest.ts:48Framework error carrying a stable code, severity, phase and recoverability contract.
packages/element/src/internal/core/errors.ts:52One documented custom event of a custom element declaration.
packages/element/src/internal/protocol/manifest.ts:20Package manifest of component declarations (not CEM-compatible; see packages/ui README).
packages/element/src/internal/protocol/manifest.ts:61Host-agnostic route and asset contracts shared by app and build drivers.
packages/element/src/internal/protocol/app-model.ts:2One documented slot of a custom element declaration.
packages/element/src/internal/protocol/manifest.ts:27Media type of the RFC 9457 action error channel (#863).
packages/element/src/internal/protocol/data.ts:136RFC 9457 Problem Details document (0.42.0-alpha.13, #863, ADR-0123 addendum item 13): the action error channel answers `application/problem+json` instead of the bespoke `{ type: 'error', error: { message } }` JSON, so HTTP tooling recognizes failures natively. With `type: 'about:blank'`, `title` is the HTTP reason phrase and `detail` carries the specific explanation. The wire shape is alpha-unfrozen; ADR-0122 acceptance freezes it in this problem+json form.
packages/element/src/internal/protocol/data.ts:124Compiler-recognized property decorator; inert no-op at runtime.
packages/element/src/internal/core/compile-decorators.ts:34Provide a plain protocol value; the provider Signal remains OE-private.
packages/element/src/internal/core/signal-context.ts:107Recoverable render-phase error carrying the failing component path and tag.
packages/element/src/internal/core/errors.ts:108Report an {@linkcode OpenElementError} to the telemetry hook, or console.error when none is installed.
packages/element/src/internal/core/errors.ts:149Canonical request-time/SSG server route context.
packages/element/src/internal/protocol/data.ts:28Context passed to a request-time ('dynamic') route loader. This is the server contract: the loader runs on the server with the Web-standard request, matched route params, the host environment and the platform object, and signals validation failure via fail()/redirect() (ADR-0120).
packages/element/src/internal/protocol/data.ts:22Install the process-wide error telemetry hook (replaceable for tests/HMR/multi-app pages).
packages/element/src/internal/core/errors.ts:137Create a writable signal through the selected signal engine.
packages/element/src/internal/signal/framework.ts:17Alias for APIs that accept either writable or read-only signals.
packages/element/src/internal/protocol/signal.ts:31SPA route action: client-side submit handler; signal failure by throwing.
packages/element/src/internal/protocol/data.ts:97Context passed to an SPA-mode route action (client-side).
packages/element/src/internal/protocol/data.ts:89SPA route loader: client-side data fetch receiving route params only.
packages/element/src/internal/protocol/data.ts:94Context passed to an SPA-mode route loader (#570). The SPA chain runs client-side and supplies only the matched route params — no request, env or platform — and signals failure by throwing (a throw is normalized to action data by the SPA submit handler). These semantics are frozen under ADR-0119; this type names the existing narrowing without changing any runtime behavior.
packages/element/src/internal/protocol/data.ts:84Cross-realm StyleSheet constructor: the native CSSStyleSheet or the internal shim.
packages/element/src/internal/core/style-sheet.ts:67Minimal stylesheet contract (replaceSync + cssRules) satisfied by native and shim sheets.
packages/element/src/internal/protocol/style-sheet.ts:14Mark an HTML string as trusted for explicit `innerHTML` sinks (the trust does not serialize).
packages/element/src/internal/core/security.ts:84Opaque capability marking HTML the application has explicitly vetted as trusted.
packages/element/src/internal/core/security.ts:79Typechecking-only fragment marker; fails closed when executed at runtime.
packages/element/src/jsx-dev-runtime.ts:38JSX type interface consumed by TypeScript's automatic JSX transform.
packages/element/src/jsx-dev-runtime.ts:43Typechecking-only factory; fails closed when executed at runtime.
packages/element/src/jsx-dev-runtime.ts:26Typechecking-only fragment marker; fails closed when executed at runtime.
packages/element/src/jsx-runtime.ts:39Typechecking-only factory; fails closed when executed at runtime.
packages/element/src/jsx-runtime.ts:29JSX type interface consumed by TypeScript's automatic JSX transform.
packages/element/src/jsx-runtime.ts:44Typechecking-only factory; fails closed when executed at runtime.
packages/element/src/jsx-runtime.ts:34URL scheme policy (ADR-0126): reject anything that could become an executable scheme after browser-side parsing.
packages/element/src/sanitize.ts:236Sanitize untrusted HTML against the allow-list (ADR-0126).
packages/element/src/sanitize.ts:353Per-tag attribute allow-list; '*' applies to every tag.
packages/element/src/sanitize.ts:26The build-time generated package manifest (declarations for every UI component).
packages/ui/src/manifest.ts:12Compact status badge backed by Open Props semantic tokens.
packages/ui/src/open-badge.tsx:13Minimal button component following Swiss International Style.
packages/ui/src/open-button.tsx:30Callout/notice box for inline documentation alerts.
packages/ui/src/open-callout.tsx:27Minimal card container with optional header and footer.
packages/ui/src/open-card.tsx:28Code block with copy button AND syntax highlighting via Prism.
packages/ui/src/open-code-block.tsx:32Dialog component using native <dialog> element + popover API.
packages/ui/src/open-dialog.tsx:36Popover-API dropdown with CSS Anchor Positioning placement.
packages/ui/src/open-dropdown.tsx:21Minimal input field following Swiss International Style.
packages/ui/src/open-input.tsx:41Pre-built stylesheet exposing the Open Props tokens on `:root` (document-level adoption).
packages/ui/src/open-props-tokens.ts:408Pre-built stylesheet carrying the full Open Props token set (adopt into a shadow root).
packages/ui/src/open-props-tokens.ts:405WAI-ARIA tabs pattern. The slotted [slot="tab"] and [slot="panel"] elements
packages/ui/src/open-tabs.tsx:25Theme toggle Reactive DSD component for Dark/Light mode switching.
packages/ui/src/open-theme-toggle.tsx:26Explicitly register every first-party UI element. Safe to call repeatedly.
packages/ui/src/register.ts:29Compact status badge backed by Open Props semantic tokens.
packages/ui/src/open-badge.tsx:13Minimal button component following Swiss International Style.
packages/ui/src/open-button.tsx:30Callout/notice box for inline documentation alerts.
packages/ui/src/open-callout.tsx:27Minimal card container with optional header and footer.
packages/ui/src/open-card.tsx:28Code block with copy button AND syntax highlighting via Prism.
packages/ui/src/open-code-block.tsx:32Dialog component using native <dialog> element + popover API.
packages/ui/src/open-dialog.tsx:36Popover-API dropdown with CSS Anchor Positioning placement.
packages/ui/src/open-dropdown.tsx:21Minimal input field following Swiss International Style.
packages/ui/src/open-input.tsx:41Pre-built stylesheet exposing the Open Props tokens on `:root` (document-level adoption).
packages/ui/src/open-props-tokens.ts:408Pre-built stylesheet carrying the full Open Props token set (adopt into a shadow root).
packages/ui/src/open-props-tokens.ts:405WAI-ARIA tabs pattern. The slotted [slot="tab"] and [slot="panel"] elements
packages/ui/src/open-tabs.tsx:25Theme toggle Reactive DSD component for Dark/Light mode switching.
packages/ui/src/open-theme-toggle.tsx:26Custom elements from the compiler manifest.
Compact status badge backed by Open Props semantic tokens.
@openelement/ui/open-badgeMinimal button component following Swiss International Style.
@openelement/ui/open-buttonCallout/notice box for inline documentation alerts.
@openelement/ui/open-calloutMinimal card container with optional header and footer.
@openelement/ui/open-cardCode block with copy button AND syntax highlighting via Prism.
@openelement/ui/open-code-blockDialog component using native <dialog> element + popover API.
@openelement/ui/open-dialogPopover-API dropdown with CSS Anchor Positioning placement.
@openelement/ui/open-dropdownMinimal input field following Swiss International Style.
@openelement/ui/open-inputWAI-ARIA tabs pattern. The slotted [slot="tab"] and [slot="panel"] elements
@openelement/ui/open-tabsTheme toggle Reactive DSD component for Dark/Light mode switching.
@openelement/ui/open-theme-toggle