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:ssr` and `ekko:ssr/css`

The low-level server-rendering primitives rune is built on. You mostly use these indirectly (via createApp), but they are available directly.

00000000001
2
import { compileSass } from "ekko:ssr/css";
import "@ekko/react-dom/server";   // registers React's renderToString as the active renderer

`ekko:ssr/css`

`compileSass(scss: string) → string`

Compiles SCSS source to CSS. Used at server start to build the inlined stylesheet:

00000000001
2
3
import { compileSass } from "ekko:ssr/css";
import { readText } from "ekko:fs";
const css = compileSass(readText("styles/global.scss"));

Compiled once at startup, restart the server to pick up SCSS changes. See SCSS.

`ekko:ssr` (rendering primitives)

These power the pipeline; createApp calls them for you.

`renderToString(element) → string`

Renders a React element tree to an HTML string. When @ekko/react-dom/server is imported, this is React's real renderToString (hooks, context). Without it, a built-in pure renderer is used (legacy/no-React apps).

`htmlShell(opts) → string`

Assembles a complete HTML document.

Option	Type	Purpose
`title`	`string`	`<title>` (default `"EkkoJS App"`).
`head`	`string`	Extra `<head>` HTML (styles, SEO).
`body`	`string`	Inner HTML for `<div id="__ekko">`.
`styles`	`string[]`	`<link rel="stylesheet">` hrefs.
`scripts`	`string[]`	`<script src>` srcs.
`modules`	`string[]`	`<script type="module" src>` srcs.
`modulepreload`	`string[]`	`<link rel="modulepreload">` hrefs.
`data`	`any`	Embedded as `<script id="__EKKO_DATA__" type="application/json">`.
`inlineStyles`	`string`	A `<style>` block in `<head>`.
`lang`	`string`	`<html lang>` (default `"en"`).

`escapeHtml(s) → string`

Escapes &, <, >, ", ' for safe HTML embedding.

`serializeProps(value) → JSON-safe value`

Recursively prepares a value for embedding in hydration data. Throws on non-serializable inputs (functions, symbols, BigInt, NaN/Infinity, RegExp, Map/Set, circular refs), keep atom values and props JSON-shaped.

`jsonForScript(v) → string`

JSON-encodes a value with <, >, & escaped so it is safe inside a <script> (prevents </script> breakout).

`getRenderer() → renderer | null`

Returns the registered external renderer (React's, after import "@ekko/react-dom/server"), or null.

`registerRenderer(r)`

Registers an external renderer as the active one. @ekko/react-dom/server calls this on import, which is why that single import switches the whole SSR pipeline to React's renderer.

How they compose (for reference)

ssr() → seed Mimir → renderToString(layout(page)) → resolve assets (manifest)
      → htmlShell({ body, head, styles, modules, modulepreload, data }) → cache → respond

You rarely call these directly; createApp orchestrates them. They are documented so the pipeline is fully inspectable.

Next: ekko.json schema.

On this page

ekko:ssr/css compileSass(scss: string) → string ekko:ssr (rendering primitives)renderToString(element) → string htmlShell(opts) → string escapeHtml(s) → string serializeProps(value) → JSON-safe value jsonForScript(v) → string getRenderer() → renderer | null registerRenderer(r)How they compose (for reference)

Reference , ekko:ssr and ekko:ssr/css

ekko:ssr/css

compileSass(scss: string) → string

ekko:ssr (rendering primitives)

renderToString(element) → string

htmlShell(opts) → string

escapeHtml(s) → string

serializeProps(value) → JSON-safe value

jsonForScript(v) → string

getRenderer() → renderer | null

registerRenderer(r)