Signature

function Document({
  children,
  ...attributes
}: DocumentProps): import("preact").JSX.Element;

Parameters

Accepts DocumentProps: HTML attributes and children, plus an optional boolean data-debug attribute. Pass an explicit lang value for accessible server markup.

Returns

Both server renderers emit the html element. React hydrates that element natively; Preact returns its children in the browser and reconciles document attributes through its document integration.

Root layout

Use Document in the root module's Layout component. Keep metadata, links, and hydration scripts in that layout so the server and browser render the same document structure.

import { Document, Links, Meta, Scripts } from "@kasperrt/smolter/preact/document";
import type { DocumentProps } from "@kasperrt/smolter/preact/document";

export function Layout({ children }: DocumentProps) {
  return (
    <Document lang="en" className="app">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <Scripts />
      </body>
    </Document>
  );
}

Hydration and subsequent changes

Hydration preserves theme classes added before mounting. Subsequent className changes replace only the prior managed classes. React reconciles the html element and its other attributes natively; Preact explicitly synchronizes lang, className and data-debug.

Externally injected head elements

Mark externally owned direct children of head with data-smolter-preserve and do not also render them in the application. Preact temporarily excludes marked nodes from hydration; React 19 uses native head reconciliation. Both integrations test preserved script identity/execution and styles across navigation. Arbitrary body injection and hydration-payload changes remain unsupported.

<script data-smolter-preserve src="/infrastructure-instrumentation.js"></script>
<meta data-smolter-preserve name="infrastructure-tag" content="example">