Layouts

Layouts wrap their children from the outer document inward. This guide is rendered inside the shared site document and the guide navigation layout.

On this page

Wrap a section

A layout is an ordinary default component with LayoutProps. Render children where the matched page should appear. Use an outer document layout for html/head/body and inner layouts for section structure.

src/notes-layout.tsrx

import type { LayoutProps } from "renku";

export default function NotesLayout({ children }: LayoutProps) @{
  <div>
    <nav aria-label="Notes"><a href="/">Home</a></nav>
    <main>{children}</main>
  </div>
}

Nest it in the route tree

This configuration wraps /notes/:id in Document, then NotesLayout, then Note. Layouts and pages receive the same request-local params object. A layout without a path shares structure without adding a URL segment.

renku.config.ts

import { bindings, defineConfig } from "renku";

export default defineConfig({
  worker: {
    name: "my-app",
    compatibilityDate: "2026-10-06",
    env: { ASSETS: bindings.assets() },
  },
  routes: [{
    layout: "./src/document.tsrx",
    children: [
      { index: true, page: "./src/home.tsrx" },
      {
        path: "notes",
        layout: "./src/notes-layout.tsrx",
        children: [{ path: ":id", page: "./src/note.tsrx" }],
      },
    ],
  }],
});

Separate reuse from persistence

Layouts reuse authored structure. They do not retain DOM, focus or input state between document navigations. Client state lasts for the lifetime of its mounted root; navigating to another document creates a new lifetime.

You can share document and section structure across routes with explicit layout nesting.

Continue to server functions

← All guides · Explore the docs source (access required) →