Frameworks
Which React frameworks a Twilight theme can run on, and which parts of your theme depend on the choice.
Read this to know which parts of your theme are tied to a framework and which are not.
The engine is built to run on more than one React framework. Today you can use one, and a second is planned.
| Framework | Status |
|---|---|
| TanStack Start | The default. Every page in this documentation is written for it. |
| Next.js | Planned. Not available yet. |
New themes use TanStack Start. You do not have to choose anything: twilightReact() defaults to "tanstack".
What depends on the framework
Most of a theme does not care which framework runs it. The framework only decides how URLs reach your code and how a page's head and links are wired.
| Same on every framework | Specific to the framework |
|---|---|
| API client and modules | Route files in app/routes/ and the app/routes.ts list |
| Hooks and components | app/router.tsx, app/start.ts, app/client.tsx and app/hydrate.tsx |
Translations, useTranslation and RTL | The generated route tree, app/routeTree.gen.ts |
twilight.json, settings and home blocks | Loaders and head (createFileRoute, withHead, getTwilightContext) |
| Styling and layout | The framework option of twilightReact() |
| Local development with the Salla CLI | Request middleware |
A page that depends on the framework says so at the top, in a "Framework: TanStack Start" note. A page without that note works the same everywhere.
What this means for you today
- Write routes the way the Routes tab shows. Those examples are TanStack Start.
- Keep logic that does not need a framework in hooks, components and API calls. That code carries over when another framework arrives.
- Keep framework code (
createFileRoute, loaders,head) inapp/routes/andapp/router.tsx, so it stays in one place.
When Next.js arrives, pages that differ will show both versions side by side. Pages that do not differ will stay as they are.
Next
Quick start: create and run your first theme.