Skip to content
Twilight React Playground
ثيم رائدaren

Framework wiring

./tanstack./nextjs./dom

The TanStack Start integration a theme sets up once: router, root route, middleware, head.

A theme wires the engine into TanStack Start in three files: app/start.ts, app/router.tsx and app/routes/__root.tsx. These are the functions used there. You write them once and rarely touch them again.

Entries

twilightMiddleware

The request middleware every theme lists first in app/start.ts; it opens the private, per-request context the rest of the engine reads.

middlewareAdvanced
createRouter

Builds the theme's TanStack router with the engine's defaults: a data cache, SSR hydration, a loading skeleton, and the error and 404 pages.

functionAdvancedlive demo
createTwilightRootRoute

Creates the root route of app/routes/__root.tsx with the engine's store-settings loading, global head tags and "Store Unavailable" error page.

functionAdvanced
getTwilightContext

Reads the engine's context outside React: store settings, language, location, route id, auth token and the data cache.

functionBeginnerlive demo
withHead

Wraps a route module's head function into the head option of a TanStack route, with an optional step to change the result.

functionBeginnerlive demo
earlyHintsMiddleware

Optional request middleware that adds preload Link headers for the SDK, fonts and theme CSS to every HTML response.

middlewareAdvanced
head

Converts a HeadDescriptor (title, description, Open Graph, canonical, JSON-LD) into the meta, links, styles and scripts arrays a TanStack route returns.

functionAdvancedlive demo
updateTwilightContext

Writes values into the current twilight context: the request's own on the server, the page's single context in the browser.

functionAdvancedlive demo
runWithTwilightContext

Runs a function inside a fresh request context on the server. twilightMiddleware() does this for every request, so themes rarely call it.

functionAdvanced
TanStackLinkAdapter

The anchor behind the engine's Link under TanStack Router: it adds the current language to internal paths and passes intent preloading on.

componentAdvancedlive demo
attrs

Turns an { html, body } attribute descriptor into React props to spread onto the html and body elements: class becomes className.

functionAdvancedlive demo
mergeAttrs

Merges several { html, body } descriptors into React props: every class is kept once, and for other attributes the last value wins.

functionAdvancedlive demo
useAttrs

Collects the html and body attributes the matched routes declare in staticData.documentAttrs, as React props for the root shell.

hookAdvanced
TanStackNavigationProvider

Deprecated: connects the engine's navigate and Link to TanStack Router. TwilightProvider now does this itself, with locale handling this one lacks.

providerAdvanced
head (Next.js)

Converts a HeadDescriptor into a Next.js App Router Metadata object; part of the engine's experimental, unfinished Next.js adapter.

functionAdvancedlive demo
attrs, mergeAttrs (Next.js)

The Next.js copies of attrs and mergeAttrs: descriptors in, htmlAttrs and bodyAttrs out, for a root layout that cannot call hooks.

functionAdvanced
NextJsLinkAdapter

The link adapter for Next.js setups. It renders a plain anchor, not next/link, so a click loads a whole new page.

componentAdvanced
attrs, clearAttrs (DOM)

Applies html and body attributes straight to the live document, and removes them again; for browser-only apps without TwilightProvider.

functionAdvanced