@salla.sa/twilight-theme-engine

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.

store ثيم رائدuseMoney().format(1250) 1,250.00 locale en · ltr

Beginner path

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.

Start the Learn track See how it works

Advanced path

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.

Open the reference Every export A–Z

What is inside

Learn

A guided track from native JavaScript to a working theme feature.

17 pages Concepts

Step-through diagrams of how the engine works underneath.

9 pages Reference

Every public export, with live demos, signatures and gotchas.

12 groups Recipes

Task-first changes to a theme, with the exact files to edit.

9 pages Built-in pages

The 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:

app/routes/__root.tsx (a theme's root route, shortened)

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>
  );
}