Learn the theme engine by using it.
Every hook, component and page on this site runs inside the real engine, against a real Salla demo store. Change a control, watch the result, and copy the code that produced it.
I know basic JavaScript
Start from what you already know: functions, objects, the DOM. The Learn track explains components, hooks and server rendering in plain words, one idea per page, each with a live example.
I know React and TanStack
Go straight to the reference: every public export with its import path, signature, SSR behaviour, gotchas verified against the source, and a live demo where one can run.
What is inside
A guided track from native JavaScript to a working theme feature.
ConceptsStep-through diagrams of how the engine works underneath.
ReferenceEvery public export, with live demos, signatures and gotchas.
RecipesTask-first changes to a theme, with the exact files to edit.
Built-in pagesThe storefront pages the engine ships, running live.
The whole engine in one picture
A Salla React theme is a small TanStack Start app. The engine gives it the pages, the data and the building blocks; the theme chooses and customises them. This site is itself wired that way, which is why its demos are real:
import { TwilightProvider } from '@salla.sa/twilight-theme-engine';
import { createTwilightRootRoute } from '@salla.sa/twilight-theme-engine/tanstack';
import { Outlet } from '@tanstack/react-router';
export const Route = createTwilightRootRoute()({ shellComponent: Root });
function Root() {
return (
<html>
<body>
{/* Every hook and component below can read the store, theme and language. */}
<TwilightProvider>
<Outlet />
</TwilightProvider>
</body>
</html>
);
}