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)

SEO

Because rune renders real HTML on the server, SEO works without tricks: crawlers and link unfurlers see your content and your meta tags. ekko:rune/seo's createSEO() generates those tags, <title>, description, Open Graph, Twitter cards, canonical, favicons, robots, and sitemaps, from a single config plus per-page overrides.

Set up once

00000000001
2
3
4
5
6
7
8
9
10
11
// server.tsx
import { createSEO } from "ekko:rune/seo";
import { SITE_NAME, SITE_URL, SITE_DESCRIPTION } from "./lib/site";
 
const seo = createSEO({
  site: { name: SITE_NAME, url: SITE_URL, language: "en" },
  meta: { description: SITE_DESCRIPTION },
  og: { type: "website", site_name: SITE_NAME, image: `${SITE_URL}/assets/og.png` },
  twitter: { card: "summary_large_image", site: "@myhandle" },
  favicon: { svg: "/assets/favicon.svg", ico: "/assets/favicon.ico" },
});

Inject the tags into `<head>`

seo.headTags(overrides?) returns the <title>, <meta>, and <link> markup. Build your head string at startup and pass it to every page (most tags are site-wide):

00000000001
2
3
const globalCSS = compileSass(readText("styles/global.scss"));
const head = `<style>${globalCSS}</style>${noFouc}${seo.headTags()}`;
// then: each route's ssr() returns { title, head }

Per-page meta

Override per page by passing fields to headTags:

00000000001
2
3
4
5
6
7
8
9
10
11
export function ssr() {
  return {
    title: "Launch announcement, My App",
    head: seo.headTags({
      description: "We shipped X today, here is what changed.",
      canonical: "/blog/launch",
      og: { type: "article", image: "https://example.com/assets/og/launch.png" },
      twitter: { title: "We shipped X", image: "https://example.com/assets/og/launch.png" },
    }),
  };
}

headTags(overrides) merges the overrides onto the site defaults, so you only specify what differs for this page.

What `headTags` emits

A typical output (abridged):

00000000001
2
3
4
5
6
7
8
9
<title>Launch announcement, My App</title>
<meta name="description" content="We shipped X today...">
<link rel="canonical" href="https://example.com/blog/launch">
<meta property="og:type" content="article">
<meta property="og:title" content="Launch announcement, My App">
<meta property="og:image" content="https://example.com/assets/og/launch.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/assets/og/launch.png">
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">

robots.txt and sitemap.xml

createSEO can also produce a robots file and a sitemap. Serve them from API routes:

00000000001
2
3
4
5
6
7
8
const seo = createSEO({
  site: { url: SITE_URL },
  robots: { sitemap: `${SITE_URL}/sitemap.xml`, disallow: ["/admin"] },
  sitemap: { routes: [{ path: "/", priority: 1 }, { path: "/docs", changefreq: "weekly" }] },
});
 
app.api("GET", "/robots.txt", (_req, res) => { res.header("Content-Type", "text/plain"); res.send(seo.robotsTxt()); });
app.api("GET", "/sitemap.xml", (_req, res) => { res.header("Content-Type", "application/xml"); res.send(seo.sitemapXml()); });

For a sitemap whose routes are data-driven (e.g. one entry per doc/post), pass sitemap.dynamicRoutes a function that returns the list, the same data you used to register the routes.

Structured data (JSON-LD)

For rich results, emit JSON-LD and add it to a page's head:

00000000001
2
3
4
5
6
7
const ld = seo.structuredData({
  "@context": "https://schema.org",
  "@type": "Article",
  headline: "Launch announcement",
  datePublished: "2026-06-14",
});
export function ssr() { return { title: "...", head: head + ld }; }

Checklist

[ ] createSEO configured with site.url, a default description, OG image, Twitter card.
[ ] head (with seo.headTags()) passed to every route.
[ ] Per-page title and, where useful, description/og.image overrides.
[ ] robots.txt and sitemap.xml API routes.
[ ] Canonical URLs for pages reachable by multiple paths.

That completes the SSR chapter. Next, the heart of rune's state model, Mimir.

On this page

Set up once Inject the tags into <head>Per-page meta What headTags emits robots.txt and sitemap.xml Structured data (JSON-LD)Checklist