Documentation

Docs

Introduction

What is rune

Philosophy

Why rune

Architecture

Getting Started

Installation

Quick start

Project structure

The dev loop

Tutorial: build an app

1. Create the app

2. Pages & routes

3. Layouts

4. State with Mimir

5. SSR & data

6. API routes

7. Styling

8. Build & deploy

Core Concepts

The application object

Rendering pipeline

Hydration

The build manifest

Configuration (ekko.json)

Permissions

Conventions

Routing

File-based routing

Dynamic routes

The router (useRouter)

Navigation & Link

Guards & redirects

Programmatic routes

Server-Side Rendering

Overview

The ssr() function

Strategies (eager/lazy)

SSR → hydration

Caching & invalidation

SEO

Mimir, state management

Overview

Atoms

Reading & writing

Selectors (derived state)

Subscriptions & the store

SSR & hydration

Persistence & sessions

Patterns & recipes

Pitfalls

Pages & Layouts

Pages

Layouts

Error & not-found

API Routes

Defining routes

Request & response

Middleware

helmet

cors

rateLimit

bodyLimit

validateContentType

csrf

requestId

timeout

errorHandler

httpsRedirect

secureCookies

ipFilter

safePath

Validation & options

Styling & Theming

SCSS

Theming (light/dark)

Asgard integration

No flash (no-FOUC)

Building & Deploying

The build

Static assets

Production deploy

API Reference

ekko:rune

ekko:rune/router

ekko:rune/mimir

ekko:rune/seo

ekko:ssr / css

ekko.json schema

CLI commands

Guides

Rune app from scratch

Recipes

Dark mode

Forms

Data fetching

Authentication

Pagination

FAQ (use cases)

Documentation

Docs

Introduction

What is rune

Philosophy

Why rune

Architecture

Getting Started

Installation

Quick start

Project structure

The dev loop

Tutorial: build an app

1. Create the app

2. Pages & routes

3. Layouts

4. State with Mimir

5. SSR & data

6. API routes

7. Styling

8. Build & deploy

Core Concepts

The application object

Rendering pipeline

Hydration

The build manifest

Configuration (ekko.json)

Permissions

Conventions

Routing

File-based routing

Dynamic routes

The router (useRouter)

Navigation & Link

Guards & redirects

Programmatic routes

Server-Side Rendering

Overview

The ssr() function

Strategies (eager/lazy)

SSR → hydration

Caching & invalidation

SEO

Mimir, state management

Overview

Atoms

Reading & writing

Selectors (derived state)

Subscriptions & the store

SSR & hydration

Persistence & sessions

Patterns & recipes

Pitfalls

Pages & Layouts

Pages

Layouts

Error & not-found

API Routes

Defining routes

Request & response

Middleware

helmet

cors

rateLimit

bodyLimit

validateContentType

csrf

requestId

timeout

errorHandler

httpsRedirect

secureCookies

ipFilter

safePath

Validation & options

Styling & Theming

SCSS

Theming (light/dark)

Asgard integration

No flash (no-FOUC)

Building & Deploying

The build

Static assets

Production deploy

API Reference

ekko:rune

ekko:rune/router

ekko:rune/mimir

ekko:rune/seo

ekko:ssr / css

ekko.json schema

CLI commands

Guides

Rune app from scratch

Recipes

Dark mode

Forms

Data fetching

Authentication

Pagination

FAQ (use cases)

Reference , ekko:rune/router

Client navigation and location hooks. Import:

1
import { useRouter, useParams, useSearchParams, navigate, Link } from "ekko:rune/router";

See The router and Navigation for the narrative.

useRouter() → router

FieldTypeDescription
pathstringCurrent pathname.
paramsobjectRoute params from the matched pattern.
queryobjectParsed query object.
navigate(href, opts?) => voidClient navigation (no reload).
back() => voidHistory back.
forward() => voidHistory forward.

Subscribes the component to route changes (re-renders on navigation, including back/forward).

useParams() → object

The route params for the current match ({ id } for /items/:id). Subscribes to changes.

useSearchParams() → object

The query string parsed to an object (from location.search). Empty object on the server.

Imperative client navigation. Matches href against the client route table, imports the target chunk, renders in place, updates history. No-op on the server.

Renders a real <a href> and intercepts the click for client navigation. Crawlable, middle-clickable, works without JS (falls back to a normal navigation). Use for in-app links; use a plain <a> for external URLs.

1
<Link href="/docs" className="nav-link">Docs</Link>

Behaviour notes

  • Matching: the client matches against __routes ({ pattern, pageFile, guard }), sorted static →

dynamic → catch-all, the same priority order as the server.

  • Caching: a route's chunk is fetched on first navigation and cached thereafter; modulepreload warms the

current page's chunks.

  • Guards: a route registered with meta.guard = { redirect } carries that into __routes[].guard; the

client router can redirect before rendering the guarded page. See Guards & redirects.

  • Server vs client: on the server navigate is a no-op and the hooks read the request; in the browser they

are live. The same component code works in both.

__routerConfig

Advanced router configuration baked into the page (from the router's toClientConfig()):

FieldDescription
backRulesRules for the browser Back button: match a path (string/regex) and goTo a destination or skip the entry.
beforeUnloadGuards that run before a navigation/unload (e.g. unsaved-changes warnings).

Next: ekko:rune/mimir.