# Frameworks (https://docs.salla.dev/twilight/react/start/frameworks)



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 [#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](https://docs.salla.dev/twilight/react/api)                                       | Route files in `app/routes/` and the `app/routes.ts` list                     |
| [Hooks](https://docs.salla.dev/twilight/react/hooks/use-store) and [components](https://docs.salla.dev/twilight/react/components/product-card) | `app/router.tsx`, `app/start.ts`, `app/client.tsx` and `app/hydrate.tsx`      |
| Translations, [`useTranslation`](https://docs.salla.dev/twilight/react/hooks/use-translation) 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()`](https://docs.salla.dev/twilight/react/local-development/vite-plugin) |
| [Local development](https://docs.salla.dev/twilight/react/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 [#what-this-means-for-you-today]

* Write routes the way the [Routes](https://docs.salla.dev/twilight/react/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`) in `app/routes/` and `app/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 [#next]

[Quick start](https://docs.salla.dev/twilight/react/start/quick-start): create and run your first theme.