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

The application framework module. Import:

1
import { createApp, scanRoutes, readManifest, resolvePageAssets } from "ekko:rune";

createApp(options) → app

Creates the application. See The application for the narrative.

Options

OptionTypeDefault
portnumber3000
hoststring"0.0.0.0"
manifestobject | nullnull
layoutsobject | nullnull
notFoundComponentnull
errorComponentnull
ssr"eager" | "background" | "lazy""eager"
langstring"en"
staticstring
staticPrefixstring"/static"
tls, http2
maxBodySize, maxWsMessageSizenumber
seoobject

Returns an app with:

MethodSignatureNotes
page(path, component, meta?) → appRegister a route. meta: page, title, head, ssr, ttl, tags, guard.
pages(dir, components, metas) → appBulk register via scanRoutes.
api(method, path, [opts], handler) → appRegister an API route.
use(middleware) → appAdd middleware (runs every request).
layout(fn) → appSet a single root layout (alt. to layouts).
invalidate(pathOrTag) → void"*" all; /path; else tag.
start() → { server, url, stop, invalidate, cache }Begin listening.
renderToString(element) → stringThe active SSR renderer.
htmlShell(opts) → stringAssemble a document.
resolvePageAssets(pageKey, prefix?) → assetsResolve a page's chunks from the manifest.

app.page(path, component, meta?)

component is the page module (with default + optional ssr) or a component. meta:

KeyMeaning
pagemanifest page key (client chunk).
titledefault <title>.
headextra <head> HTML.
ssrper-route strategy override.
ttlcache lifetime (seconds; 0 = no expiry).
tagscache tags for group invalidation.
guard{ redirect } client redirect rule.

app.api(method, path, [opts], handler)

methodGET|POST|PUT|DELETE|PATCH. Handler (req, res); a returned value is auto-sent (object→JSON, else text). Throwing → 500 { error }. Declaring methods for a path auto-adds 405 for the others. See API routes.

app.invalidate(pathOrTag)

  • "*" , clear all + re-render every static SSR route.
  • "/path" , clear + re-render that route.
  • "tag" , clear + re-render every cached route carrying the tag.

app.start() → handle

Begins listening; mounts /_ekko (client bundle), the HMR socket, API routes, page handlers; eagerly renders eager routes; schedules background routes. Returns { server, url, stop(), invalidate, cache }.

scanRoutes(dir = "pages") → Route[]

Scans a directory and returns sorted routes. Each Route:

FieldType
patternstring (/blog/:slug)
file / pageKeystring (manifest key)
dynamicboolean
catchAllboolean
priority0 static · 1 dynamic · 2 catch-all

Name rules: [p]:p, [...r]*r, (g)/→stripped, index→segment root. Skips convention files and *.test.*. See File-based routing.

readManifest(path?) → manifest

Reads .ekko/build/manifest.json (or path). Returns { hydrate, pages, chunks, styles, routes }. Falls back to { hydrate: null, pages: {}, chunks: [] } if absent. See The manifest.

resolvePageAssets(manifest, pageKey, prefix = "/_ekko/") → assets

Resolves a page's client assets. Returns { modules, modulepreload, pageFile, styles } (dedup'd). Used internally to emit <script>/modulepreload/CSS tags.

createStyleCollector() → collector

A small helper to collect <style>s by id during render (add(id, css), getStyles(), reset(), has(id)), for styled-component-style collection.

cssModule(path)

Compile/import a CSS module by path (delegates to the runtime).

Next: ekko:rune/router.