diff --git a/.github/workflows/fixtures-test.yml b/.github/workflows/fixtures-test.yml
index e627224a96f3..10ddf497b6d2 100644
--- a/.github/workflows/fixtures-test.yml
+++ b/.github/workflows/fixtures-test.yml
@@ -51,7 +51,7 @@ jobs:
 
         # Testing fixtures for vercel template
       - name: Test cli --help flag
-        working-directory: ./fixtures/webstudio-remix-vercel
+        working-directory: ./fixtures/webstudio-features
         run: pnpm cli --help
 
       - name: Testing cli link command
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 10386ad160b7..b7cca1dc6c0d 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -135,7 +135,7 @@ jobs:
             const results = [
               await assertSize('./fixtures/ssg/dist/client', 352),
               await assertSize('./fixtures/webstudio-remix-netlify-functions/build/client', 440),
-              await assertSize('./fixtures/webstudio-remix-vercel/build/client', 926),
+              await assertSize('./fixtures/webstudio-features/build/client', 926),
             ]
             for (const result of results) {
               if (result.passed) {
diff --git a/fixtures/webstudio-features/.gitignore b/fixtures/webstudio-features/.gitignore
new file mode 100644
index 000000000000..9b7c041f96ea
--- /dev/null
+++ b/fixtures/webstudio-features/.gitignore
@@ -0,0 +1,6 @@
+.DS_Store
+/node_modules/
+
+# React Router
+/.react-router/
+/build/
diff --git a/fixtures/webstudio-remix-vercel/.npmrc b/fixtures/webstudio-features/.npmrc
similarity index 100%
rename from fixtures/webstudio-remix-vercel/.npmrc
rename to fixtures/webstudio-features/.npmrc
diff --git a/fixtures/webstudio-features/.template/.npmrc b/fixtures/webstudio-features/.template/.npmrc
new file mode 100644
index 000000000000..43ce02f127ad
--- /dev/null
+++ b/fixtures/webstudio-features/.template/.npmrc
@@ -0,0 +1,3 @@
+force=true
+# to support using NODE_OPTIONS for windows tests
+shell-emulator=true
diff --git a/fixtures/webstudio-features/.template/app/constants.mjs b/fixtures/webstudio-features/.template/app/constants.mjs
new file mode 100644
index 000000000000..8eea5a78ce0e
--- /dev/null
+++ b/fixtures/webstudio-features/.template/app/constants.mjs
@@ -0,0 +1,12 @@
+/**
+ * We use mjs extension as constants in this file is shared with the build script
+ * and we use `node --eval` to extract the constants.
+ */
+export const assetBaseUrl = "/assets/";
+
+/**
+ * @type {import("@webstudio-is/image").ImageLoader}
+ */
+export const imageLoader = ({ src }) => {
+  return src;
+};
diff --git a/fixtures/webstudio-features/.template/package.json b/fixtures/webstudio-features/.template/package.json
new file mode 100644
index 000000000000..b21dce86c93a
--- /dev/null
+++ b/fixtures/webstudio-features/.template/package.json
@@ -0,0 +1,12 @@
+{
+  "dependencies": {
+    "@webstudio-is/image": "workspace:*",
+    "@webstudio-is/react-sdk": "workspace:*",
+    "@webstudio-is/sdk": "workspace:*",
+    "@webstudio-is/sdk-components-animation": "workspace:*",
+    "@webstudio-is/sdk-components-react": "workspace:*",
+    "@webstudio-is/sdk-components-react-radix": "workspace:*",
+    "@webstudio-is/sdk-components-react-router": "workspace:*",
+    "webstudio": "workspace:*"
+  }
+}
diff --git a/fixtures/webstudio-features/.template/tsconfig.json b/fixtures/webstudio-features/.template/tsconfig.json
new file mode 100644
index 000000000000..75cac78946fd
--- /dev/null
+++ b/fixtures/webstudio-features/.template/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "customConditions": ["webstudio"]
+  }
+}
diff --git a/fixtures/webstudio-features/.template/vite.config.ts b/fixtures/webstudio-features/.template/vite.config.ts
new file mode 100644
index 000000000000..af40508cdc7b
--- /dev/null
+++ b/fixtures/webstudio-features/.template/vite.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from "vite";
+// @ts-ignore
+import { reactRouter } from "@react-router/dev/vite";
+// @ts-ignore
+import { dedupeMeta } from "./proxy-emulator/dedupe-meta";
+
+export default defineConfig({
+  plugins: [reactRouter(), dedupeMeta],
+});
diff --git a/fixtures/webstudio-remix-vercel/.webstudio/config.json b/fixtures/webstudio-features/.webstudio/config.json
similarity index 100%
rename from fixtures/webstudio-remix-vercel/.webstudio/config.json
rename to fixtures/webstudio-features/.webstudio/config.json
diff --git a/fixtures/webstudio-remix-vercel/.webstudio/data.json b/fixtures/webstudio-features/.webstudio/data.json
similarity index 100%
rename from fixtures/webstudio-remix-vercel/.webstudio/data.json
rename to fixtures/webstudio-features/.webstudio/data.json
diff --git a/fixtures/webstudio-remix-vercel/README.md b/fixtures/webstudio-features/README.md
similarity index 100%
rename from fixtures/webstudio-remix-vercel/README.md
rename to fixtures/webstudio-features/README.md
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/$resources.sitemap.xml.ts b/fixtures/webstudio-features/app/__generated__/$resources.sitemap.xml.ts
similarity index 100%
rename from fixtures/webstudio-remix-vercel/app/__generated__/$resources.sitemap.xml.ts
rename to fixtures/webstudio-features/app/__generated__/$resources.sitemap.xml.ts
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[_route_with_symbols_]._index.server.tsx b/fixtures/webstudio-features/app/__generated__/[_route_with_symbols_]._index.server.tsx
similarity index 100%
rename from fixtures/webstudio-remix-vercel/app/__generated__/[_route_with_symbols_]._index.server.tsx
rename to fixtures/webstudio-features/app/__generated__/[_route_with_symbols_]._index.server.tsx
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[_route_with_symbols_]._index.tsx b/fixtures/webstudio-features/app/__generated__/[_route_with_symbols_]._index.tsx
similarity index 99%
rename from fixtures/webstudio-remix-vercel/app/__generated__/[_route_with_symbols_]._index.tsx
rename to fixtures/webstudio-features/app/__generated__/[_route_with_symbols_]._index.tsx
index bd9821bc8708..8be898bf8a71 100644
--- a/fixtures/webstudio-remix-vercel/app/__generated__/[_route_with_symbols_]._index.tsx
+++ b/fixtures/webstudio-features/app/__generated__/[_route_with_symbols_]._index.tsx
@@ -4,7 +4,7 @@
 import { Fragment, useState } from "react";
 import type { FontAsset, ImageAsset } from "@webstudio-is/sdk";
 import { useResource, useVariableState } from "@webstudio-is/react-sdk/runtime";
-import { Body as Body } from "@webstudio-is/sdk-components-react-remix";
+import { Body as Body } from "@webstudio-is/sdk-components-react-router";
 import { Image as Image } from "@webstudio-is/sdk-components-react";
 
 export const siteName = "KittyGuardedZone";
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[class-names]._index.server.tsx b/fixtures/webstudio-features/app/__generated__/[class-names]._index.server.tsx
similarity index 100%
rename from fixtures/webstudio-remix-vercel/app/__generated__/[class-names]._index.server.tsx
rename to fixtures/webstudio-features/app/__generated__/[class-names]._index.server.tsx
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[class-names]._index.tsx b/fixtures/webstudio-features/app/__generated__/[class-names]._index.tsx
similarity index 99%
rename from fixtures/webstudio-remix-vercel/app/__generated__/[class-names]._index.tsx
rename to fixtures/webstudio-features/app/__generated__/[class-names]._index.tsx
index a6a334933d1c..87bfd2b5d375 100644
--- a/fixtures/webstudio-remix-vercel/app/__generated__/[class-names]._index.tsx
+++ b/fixtures/webstudio-features/app/__generated__/[class-names]._index.tsx
@@ -4,7 +4,7 @@
 import { Fragment, useState } from "react";
 import type { FontAsset, ImageAsset } from "@webstudio-is/sdk";
 import { useResource, useVariableState } from "@webstudio-is/react-sdk/runtime";
-import { Body as Body } from "@webstudio-is/sdk-components-react-remix";
+import { Body as Body } from "@webstudio-is/sdk-components-react-router";
 import { Box as Box } from "@webstudio-is/sdk-components-react";
 
 export const siteName = "KittyGuardedZone";
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[content-block]._index.server.tsx b/fixtures/webstudio-features/app/__generated__/[content-block]._index.server.tsx
similarity index 100%
rename from fixtures/webstudio-remix-vercel/app/__generated__/[content-block]._index.server.tsx
rename to fixtures/webstudio-features/app/__generated__/[content-block]._index.server.tsx
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[content-block]._index.tsx b/fixtures/webstudio-features/app/__generated__/[content-block]._index.tsx
similarity index 99%
rename from fixtures/webstudio-remix-vercel/app/__generated__/[content-block]._index.tsx
rename to fixtures/webstudio-features/app/__generated__/[content-block]._index.tsx
index 699270407fbd..915014f852e0 100644
--- a/fixtures/webstudio-remix-vercel/app/__generated__/[content-block]._index.tsx
+++ b/fixtures/webstudio-features/app/__generated__/[content-block]._index.tsx
@@ -4,7 +4,7 @@
 import { Fragment, useState } from "react";
 import type { FontAsset, ImageAsset } from "@webstudio-is/sdk";
 import { useResource, useVariableState } from "@webstudio-is/react-sdk/runtime";
-import { Body as Body } from "@webstudio-is/sdk-components-react-remix";
+import { Body as Body } from "@webstudio-is/sdk-components-react-router";
 import {
   Box as Box,
   Heading as Heading,
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[expressions]._index.server.tsx b/fixtures/webstudio-features/app/__generated__/[expressions]._index.server.tsx
similarity index 100%
rename from fixtures/webstudio-remix-vercel/app/__generated__/[expressions]._index.server.tsx
rename to fixtures/webstudio-features/app/__generated__/[expressions]._index.server.tsx
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[expressions]._index.tsx b/fixtures/webstudio-features/app/__generated__/[expressions]._index.tsx
similarity index 99%
rename from fixtures/webstudio-remix-vercel/app/__generated__/[expressions]._index.tsx
rename to fixtures/webstudio-features/app/__generated__/[expressions]._index.tsx
index 50067cdb7e2f..a0deb6d33450 100644
--- a/fixtures/webstudio-remix-vercel/app/__generated__/[expressions]._index.tsx
+++ b/fixtures/webstudio-features/app/__generated__/[expressions]._index.tsx
@@ -4,7 +4,7 @@
 import { Fragment, useState } from "react";
 import type { FontAsset, ImageAsset } from "@webstudio-is/sdk";
 import { useResource, useVariableState } from "@webstudio-is/react-sdk/runtime";
-import { Body as Body } from "@webstudio-is/sdk-components-react-remix";
+import { Body as Body } from "@webstudio-is/sdk-components-react-router";
 import {
   Heading as Heading,
   HtmlEmbed as HtmlEmbed,
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[form]._index.server.tsx b/fixtures/webstudio-features/app/__generated__/[form]._index.server.tsx
similarity index 100%
rename from fixtures/webstudio-remix-vercel/app/__generated__/[form]._index.server.tsx
rename to fixtures/webstudio-features/app/__generated__/[form]._index.server.tsx
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[form]._index.tsx b/fixtures/webstudio-features/app/__generated__/[form]._index.tsx
similarity index 98%
rename from fixtures/webstudio-remix-vercel/app/__generated__/[form]._index.tsx
rename to fixtures/webstudio-features/app/__generated__/[form]._index.tsx
index 4505b50506fa..0f118431fae2 100644
--- a/fixtures/webstudio-remix-vercel/app/__generated__/[form]._index.tsx
+++ b/fixtures/webstudio-features/app/__generated__/[form]._index.tsx
@@ -7,7 +7,7 @@ import { useResource, useVariableState } from "@webstudio-is/react-sdk/runtime";
 import {
   Body as Body,
   Form as Form,
-} from "@webstudio-is/sdk-components-react-remix";
+} from "@webstudio-is/sdk-components-react-router";
 import {
   Box as Box,
   Label as Label,
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[head-tag]._index.server.tsx b/fixtures/webstudio-features/app/__generated__/[head-tag]._index.server.tsx
similarity index 100%
rename from fixtures/webstudio-remix-vercel/app/__generated__/[head-tag]._index.server.tsx
rename to fixtures/webstudio-features/app/__generated__/[head-tag]._index.server.tsx
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[head-tag]._index.tsx b/fixtures/webstudio-features/app/__generated__/[head-tag]._index.tsx
similarity index 97%
rename from fixtures/webstudio-remix-vercel/app/__generated__/[head-tag]._index.tsx
rename to fixtures/webstudio-features/app/__generated__/[head-tag]._index.tsx
index ccea8747cf94..f6e5a4b2dd0c 100644
--- a/fixtures/webstudio-remix-vercel/app/__generated__/[head-tag]._index.tsx
+++ b/fixtures/webstudio-features/app/__generated__/[head-tag]._index.tsx
@@ -7,7 +7,7 @@ import { useResource, useVariableState } from "@webstudio-is/react-sdk/runtime";
 import {
   Body as Body,
   Link as Link,
-} from "@webstudio-is/sdk-components-react-remix";
+} from "@webstudio-is/sdk-components-react-router";
 import {
   HeadSlot as HeadSlot,
   HeadLink as HeadLink,
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[heading-with-id]._index.server.tsx b/fixtures/webstudio-features/app/__generated__/[heading-with-id]._index.server.tsx
similarity index 100%
rename from fixtures/webstudio-remix-vercel/app/__generated__/[heading-with-id]._index.server.tsx
rename to fixtures/webstudio-features/app/__generated__/[heading-with-id]._index.server.tsx
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[heading-with-id]._index.tsx b/fixtures/webstudio-features/app/__generated__/[heading-with-id]._index.tsx
similarity index 99%
rename from fixtures/webstudio-remix-vercel/app/__generated__/[heading-with-id]._index.tsx
rename to fixtures/webstudio-features/app/__generated__/[heading-with-id]._index.tsx
index 3c268fbaca36..d08d9868422d 100644
--- a/fixtures/webstudio-remix-vercel/app/__generated__/[heading-with-id]._index.tsx
+++ b/fixtures/webstudio-features/app/__generated__/[heading-with-id]._index.tsx
@@ -4,7 +4,7 @@
 import { Fragment, useState } from "react";
 import type { FontAsset, ImageAsset } from "@webstudio-is/sdk";
 import { useResource, useVariableState } from "@webstudio-is/react-sdk/runtime";
-import { Body as Body } from "@webstudio-is/sdk-components-react-remix";
+import { Body as Body } from "@webstudio-is/sdk-components-react-router";
 import { Heading as Heading } from "@webstudio-is/sdk-components-react";
 
 export const siteName = "KittyGuardedZone";
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[nested].[nested-page]._index.server.tsx b/fixtures/webstudio-features/app/__generated__/[nested].[nested-page]._index.server.tsx
similarity index 100%
rename from fixtures/webstudio-remix-vercel/app/__generated__/[nested].[nested-page]._index.server.tsx
rename to fixtures/webstudio-features/app/__generated__/[nested].[nested-page]._index.server.tsx
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[nested].[nested-page]._index.tsx b/fixtures/webstudio-features/app/__generated__/[nested].[nested-page]._index.tsx
similarity index 99%
rename from fixtures/webstudio-remix-vercel/app/__generated__/[nested].[nested-page]._index.tsx
rename to fixtures/webstudio-features/app/__generated__/[nested].[nested-page]._index.tsx
index 7db4b5ec4910..e417451e9877 100644
--- a/fixtures/webstudio-remix-vercel/app/__generated__/[nested].[nested-page]._index.tsx
+++ b/fixtures/webstudio-features/app/__generated__/[nested].[nested-page]._index.tsx
@@ -4,7 +4,7 @@
 import { Fragment, useState } from "react";
 import type { FontAsset, ImageAsset } from "@webstudio-is/sdk";
 import { useResource, useVariableState } from "@webstudio-is/react-sdk/runtime";
-import { Body as Body } from "@webstudio-is/sdk-components-react-remix";
+import { Body as Body } from "@webstudio-is/sdk-components-react-router";
 import { Heading as Heading } from "@webstudio-is/sdk-components-react";
 
 export const siteName = "KittyGuardedZone";
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[radix]._index.server.tsx b/fixtures/webstudio-features/app/__generated__/[radix]._index.server.tsx
similarity index 100%
rename from fixtures/webstudio-remix-vercel/app/__generated__/[radix]._index.server.tsx
rename to fixtures/webstudio-features/app/__generated__/[radix]._index.server.tsx
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[radix]._index.tsx b/fixtures/webstudio-features/app/__generated__/[radix]._index.tsx
similarity index 99%
rename from fixtures/webstudio-remix-vercel/app/__generated__/[radix]._index.tsx
rename to fixtures/webstudio-features/app/__generated__/[radix]._index.tsx
index fb53b840b43a..9df7ab2ab5fd 100644
--- a/fixtures/webstudio-remix-vercel/app/__generated__/[radix]._index.tsx
+++ b/fixtures/webstudio-features/app/__generated__/[radix]._index.tsx
@@ -4,7 +4,7 @@
 import { Fragment, useState } from "react";
 import type { FontAsset, ImageAsset } from "@webstudio-is/sdk";
 import { useResource, useVariableState } from "@webstudio-is/react-sdk/runtime";
-import { Body as Body } from "@webstudio-is/sdk-components-react-remix";
+import { Body as Body } from "@webstudio-is/sdk-components-react-router";
 import {
   Accordion as Accordion,
   AccordionItem as AccordionItem,
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[resources]._index.server.tsx b/fixtures/webstudio-features/app/__generated__/[resources]._index.server.tsx
similarity index 100%
rename from fixtures/webstudio-remix-vercel/app/__generated__/[resources]._index.server.tsx
rename to fixtures/webstudio-features/app/__generated__/[resources]._index.server.tsx
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[resources]._index.tsx b/fixtures/webstudio-features/app/__generated__/[resources]._index.tsx
similarity index 99%
rename from fixtures/webstudio-remix-vercel/app/__generated__/[resources]._index.tsx
rename to fixtures/webstudio-features/app/__generated__/[resources]._index.tsx
index 192c01a3fbb9..5bc992e4e4df 100644
--- a/fixtures/webstudio-remix-vercel/app/__generated__/[resources]._index.tsx
+++ b/fixtures/webstudio-features/app/__generated__/[resources]._index.tsx
@@ -4,7 +4,7 @@
 import { Fragment, useState } from "react";
 import type { FontAsset, ImageAsset } from "@webstudio-is/sdk";
 import { useResource, useVariableState } from "@webstudio-is/react-sdk/runtime";
-import { Body as Body } from "@webstudio-is/sdk-components-react-remix";
+import { Body as Body } from "@webstudio-is/sdk-components-react-router";
 import {
   Box as Box,
   HtmlEmbed as HtmlEmbed,
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[sitemap.xml]._index.server.tsx b/fixtures/webstudio-features/app/__generated__/[sitemap.xml]._index.server.tsx
similarity index 100%
rename from fixtures/webstudio-remix-vercel/app/__generated__/[sitemap.xml]._index.server.tsx
rename to fixtures/webstudio-features/app/__generated__/[sitemap.xml]._index.server.tsx
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[sitemap.xml]._index.tsx b/fixtures/webstudio-features/app/__generated__/[sitemap.xml]._index.tsx
similarity index 100%
rename from fixtures/webstudio-remix-vercel/app/__generated__/[sitemap.xml]._index.tsx
rename to fixtures/webstudio-features/app/__generated__/[sitemap.xml]._index.tsx
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/_index.server.tsx b/fixtures/webstudio-features/app/__generated__/_index.server.tsx
similarity index 100%
rename from fixtures/webstudio-remix-vercel/app/__generated__/_index.server.tsx
rename to fixtures/webstudio-features/app/__generated__/_index.server.tsx
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/_index.tsx b/fixtures/webstudio-features/app/__generated__/_index.tsx
similarity index 98%
rename from fixtures/webstudio-remix-vercel/app/__generated__/_index.tsx
rename to fixtures/webstudio-features/app/__generated__/_index.tsx
index ddee88589ec0..e86fe2db5f89 100644
--- a/fixtures/webstudio-remix-vercel/app/__generated__/_index.tsx
+++ b/fixtures/webstudio-features/app/__generated__/_index.tsx
@@ -7,7 +7,7 @@ import { useResource, useVariableState } from "@webstudio-is/react-sdk/runtime";
 import {
   Body as Body,
   Link as Link,
-} from "@webstudio-is/sdk-components-react-remix";
+} from "@webstudio-is/sdk-components-react-router";
 import {
   Heading as Heading,
   Box as Box,
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/index.css b/fixtures/webstudio-features/app/__generated__/index.css
similarity index 100%
rename from fixtures/webstudio-remix-vercel/app/__generated__/index.css
rename to fixtures/webstudio-features/app/__generated__/index.css
diff --git a/fixtures/webstudio-features/app/constants.mjs b/fixtures/webstudio-features/app/constants.mjs
new file mode 100644
index 000000000000..8eea5a78ce0e
--- /dev/null
+++ b/fixtures/webstudio-features/app/constants.mjs
@@ -0,0 +1,12 @@
+/**
+ * We use mjs extension as constants in this file is shared with the build script
+ * and we use `node --eval` to extract the constants.
+ */
+export const assetBaseUrl = "/assets/";
+
+/**
+ * @type {import("@webstudio-is/image").ImageLoader}
+ */
+export const imageLoader = ({ src }) => {
+  return src;
+};
diff --git a/fixtures/webstudio-remix-vercel/app/extension.ts b/fixtures/webstudio-features/app/extension.ts
similarity index 61%
rename from fixtures/webstudio-remix-vercel/app/extension.ts
rename to fixtures/webstudio-features/app/extension.ts
index 3345c28d98a3..bffd05d48e17 100644
--- a/fixtures/webstudio-remix-vercel/app/extension.ts
+++ b/fixtures/webstudio-features/app/extension.ts
@@ -1,9 +1,6 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import { AppLoadContext } from "@remix-run/server-runtime";
 import { ResourceRequest } from "@webstudio-is/sdk";
 
-declare module "@remix-run/server-runtime" {
+declare module "react-router" {
   interface AppLoadContext {
     EXCLUDE_FROM_SEARCH: boolean;
     getDefaultActionResource?: (options: {
diff --git a/fixtures/webstudio-remix-vercel/app/root.tsx b/fixtures/webstudio-features/app/root.tsx
similarity index 92%
rename from fixtures/webstudio-remix-vercel/app/root.tsx
rename to fixtures/webstudio-features/app/root.tsx
index 40cefeeec7bc..aa2a8c416496 100644
--- a/fixtures/webstudio-remix-vercel/app/root.tsx
+++ b/fixtures/webstudio-features/app/root.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 
-import { Links, Meta, Outlet, useMatches } from "@remix-run/react";
+import { Links, Meta, Outlet, useMatches } from "react-router";
 // @todo think about how to make __generated__ typeable
 // @ts-ignore
 import { CustomCode } from "./__generated__/_index";
diff --git a/fixtures/webstudio-features/app/routes.ts b/fixtures/webstudio-features/app/routes.ts
new file mode 100644
index 000000000000..4c05936cb638
--- /dev/null
+++ b/fixtures/webstudio-features/app/routes.ts
@@ -0,0 +1,4 @@
+import { type RouteConfig } from "@react-router/dev/routes";
+import { flatRoutes } from "@react-router/fs-routes";
+
+export default flatRoutes() satisfies RouteConfig;
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[_route_with_symbols_]._index.tsx b/fixtures/webstudio-features/app/routes/[_route_with_symbols_]._index.tsx
similarity index 96%
rename from fixtures/webstudio-remix-vercel/app/routes/[_route_with_symbols_]._index.tsx
rename to fixtures/webstudio-features/app/routes/[_route_with_symbols_]._index.tsx
index b20c8d220bac..c8f4a46b6340 100644
--- a/fixtures/webstudio-remix-vercel/app/routes/[_route_with_symbols_]._index.tsx
+++ b/fixtures/webstudio-features/app/routes/[_route_with_symbols_]._index.tsx
@@ -1,14 +1,14 @@
 import {
-  type ServerRuntimeMetaFunction as MetaFunction,
+  type MetaFunction,
   type LinksFunction,
   type LinkDescriptor,
   type ActionFunctionArgs,
   type LoaderFunctionArgs,
   type HeadersFunction,
-  json,
+  data,
   redirect,
-} from "@remix-run/server-runtime";
-import { useLoaderData } from "@remix-run/react";
+  useLoaderData,
+} from "react-router";
 import {
   isLocalResource,
   loadResource,
@@ -20,7 +20,6 @@ import {
   ReactSdkContext,
   PageSettingsMeta,
   PageSettingsTitle,
-  PageSettingsCanonicalLink,
 } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
@@ -82,7 +81,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
       pageMeta.status === 301 || pageMeta.status === 302
         ? pageMeta.status
         : 302;
-    return redirect(pageMeta.redirect, status);
+    throw redirect(pageMeta.redirect, status);
   }
 
   // typecheck
@@ -92,7 +91,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     pageMeta.excludePageFromSearch = arg.context.EXCLUDE_FROM_SEARCH;
   }
 
-  return json(
+  return data(
     {
       host,
       url: url.href,
@@ -289,7 +288,6 @@ const Outlet = () => {
         imageLoader={imageLoader}
       />
       <PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
-      <PageSettingsCanonicalLink href={url} />
     </ReactSdkContext.Provider>
   );
 };
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[class-names]._index.tsx b/fixtures/webstudio-features/app/routes/[class-names]._index.tsx
similarity index 96%
rename from fixtures/webstudio-remix-vercel/app/routes/[class-names]._index.tsx
rename to fixtures/webstudio-features/app/routes/[class-names]._index.tsx
index 6b1827cdcf76..a63384caf796 100644
--- a/fixtures/webstudio-remix-vercel/app/routes/[class-names]._index.tsx
+++ b/fixtures/webstudio-features/app/routes/[class-names]._index.tsx
@@ -1,14 +1,14 @@
 import {
-  type ServerRuntimeMetaFunction as MetaFunction,
+  type MetaFunction,
   type LinksFunction,
   type LinkDescriptor,
   type ActionFunctionArgs,
   type LoaderFunctionArgs,
   type HeadersFunction,
-  json,
+  data,
   redirect,
-} from "@remix-run/server-runtime";
-import { useLoaderData } from "@remix-run/react";
+  useLoaderData,
+} from "react-router";
 import {
   isLocalResource,
   loadResource,
@@ -20,7 +20,6 @@ import {
   ReactSdkContext,
   PageSettingsMeta,
   PageSettingsTitle,
-  PageSettingsCanonicalLink,
 } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
@@ -82,7 +81,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
       pageMeta.status === 301 || pageMeta.status === 302
         ? pageMeta.status
         : 302;
-    return redirect(pageMeta.redirect, status);
+    throw redirect(pageMeta.redirect, status);
   }
 
   // typecheck
@@ -92,7 +91,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     pageMeta.excludePageFromSearch = arg.context.EXCLUDE_FROM_SEARCH;
   }
 
-  return json(
+  return data(
     {
       host,
       url: url.href,
@@ -289,7 +288,6 @@ const Outlet = () => {
         imageLoader={imageLoader}
       />
       <PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
-      <PageSettingsCanonicalLink href={url} />
     </ReactSdkContext.Provider>
   );
 };
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[content-block]._index.tsx b/fixtures/webstudio-features/app/routes/[content-block]._index.tsx
similarity index 96%
rename from fixtures/webstudio-remix-vercel/app/routes/[content-block]._index.tsx
rename to fixtures/webstudio-features/app/routes/[content-block]._index.tsx
index 58f75037e5ab..b4733304c6f2 100644
--- a/fixtures/webstudio-remix-vercel/app/routes/[content-block]._index.tsx
+++ b/fixtures/webstudio-features/app/routes/[content-block]._index.tsx
@@ -1,14 +1,14 @@
 import {
-  type ServerRuntimeMetaFunction as MetaFunction,
+  type MetaFunction,
   type LinksFunction,
   type LinkDescriptor,
   type ActionFunctionArgs,
   type LoaderFunctionArgs,
   type HeadersFunction,
-  json,
+  data,
   redirect,
-} from "@remix-run/server-runtime";
-import { useLoaderData } from "@remix-run/react";
+  useLoaderData,
+} from "react-router";
 import {
   isLocalResource,
   loadResource,
@@ -20,7 +20,6 @@ import {
   ReactSdkContext,
   PageSettingsMeta,
   PageSettingsTitle,
-  PageSettingsCanonicalLink,
 } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
@@ -82,7 +81,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
       pageMeta.status === 301 || pageMeta.status === 302
         ? pageMeta.status
         : 302;
-    return redirect(pageMeta.redirect, status);
+    throw redirect(pageMeta.redirect, status);
   }
 
   // typecheck
@@ -92,7 +91,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     pageMeta.excludePageFromSearch = arg.context.EXCLUDE_FROM_SEARCH;
   }
 
-  return json(
+  return data(
     {
       host,
       url: url.href,
@@ -289,7 +288,6 @@ const Outlet = () => {
         imageLoader={imageLoader}
       />
       <PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
-      <PageSettingsCanonicalLink href={url} />
     </ReactSdkContext.Provider>
   );
 };
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[expressions]._index.tsx b/fixtures/webstudio-features/app/routes/[expressions]._index.tsx
similarity index 96%
rename from fixtures/webstudio-remix-vercel/app/routes/[expressions]._index.tsx
rename to fixtures/webstudio-features/app/routes/[expressions]._index.tsx
index db508536023f..d74fa5b1c339 100644
--- a/fixtures/webstudio-remix-vercel/app/routes/[expressions]._index.tsx
+++ b/fixtures/webstudio-features/app/routes/[expressions]._index.tsx
@@ -1,14 +1,14 @@
 import {
-  type ServerRuntimeMetaFunction as MetaFunction,
+  type MetaFunction,
   type LinksFunction,
   type LinkDescriptor,
   type ActionFunctionArgs,
   type LoaderFunctionArgs,
   type HeadersFunction,
-  json,
+  data,
   redirect,
-} from "@remix-run/server-runtime";
-import { useLoaderData } from "@remix-run/react";
+  useLoaderData,
+} from "react-router";
 import {
   isLocalResource,
   loadResource,
@@ -20,7 +20,6 @@ import {
   ReactSdkContext,
   PageSettingsMeta,
   PageSettingsTitle,
-  PageSettingsCanonicalLink,
 } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
@@ -82,7 +81,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
       pageMeta.status === 301 || pageMeta.status === 302
         ? pageMeta.status
         : 302;
-    return redirect(pageMeta.redirect, status);
+    throw redirect(pageMeta.redirect, status);
   }
 
   // typecheck
@@ -92,7 +91,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     pageMeta.excludePageFromSearch = arg.context.EXCLUDE_FROM_SEARCH;
   }
 
-  return json(
+  return data(
     {
       host,
       url: url.href,
@@ -289,7 +288,6 @@ const Outlet = () => {
         imageLoader={imageLoader}
       />
       <PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
-      <PageSettingsCanonicalLink href={url} />
     </ReactSdkContext.Provider>
   );
 };
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[form]._index.tsx b/fixtures/webstudio-features/app/routes/[form]._index.tsx
similarity index 96%
rename from fixtures/webstudio-remix-vercel/app/routes/[form]._index.tsx
rename to fixtures/webstudio-features/app/routes/[form]._index.tsx
index 5b31450447e6..16fab5e22a8b 100644
--- a/fixtures/webstudio-remix-vercel/app/routes/[form]._index.tsx
+++ b/fixtures/webstudio-features/app/routes/[form]._index.tsx
@@ -1,14 +1,14 @@
 import {
-  type ServerRuntimeMetaFunction as MetaFunction,
+  type MetaFunction,
   type LinksFunction,
   type LinkDescriptor,
   type ActionFunctionArgs,
   type LoaderFunctionArgs,
   type HeadersFunction,
-  json,
+  data,
   redirect,
-} from "@remix-run/server-runtime";
-import { useLoaderData } from "@remix-run/react";
+  useLoaderData,
+} from "react-router";
 import {
   isLocalResource,
   loadResource,
@@ -20,7 +20,6 @@ import {
   ReactSdkContext,
   PageSettingsMeta,
   PageSettingsTitle,
-  PageSettingsCanonicalLink,
 } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
@@ -82,7 +81,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
       pageMeta.status === 301 || pageMeta.status === 302
         ? pageMeta.status
         : 302;
-    return redirect(pageMeta.redirect, status);
+    throw redirect(pageMeta.redirect, status);
   }
 
   // typecheck
@@ -92,7 +91,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     pageMeta.excludePageFromSearch = arg.context.EXCLUDE_FROM_SEARCH;
   }
 
-  return json(
+  return data(
     {
       host,
       url: url.href,
@@ -289,7 +288,6 @@ const Outlet = () => {
         imageLoader={imageLoader}
       />
       <PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
-      <PageSettingsCanonicalLink href={url} />
     </ReactSdkContext.Provider>
   );
 };
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[head-tag]._index.tsx b/fixtures/webstudio-features/app/routes/[head-tag]._index.tsx
similarity index 96%
rename from fixtures/webstudio-remix-vercel/app/routes/[head-tag]._index.tsx
rename to fixtures/webstudio-features/app/routes/[head-tag]._index.tsx
index 62036aa81d98..8192767960e7 100644
--- a/fixtures/webstudio-remix-vercel/app/routes/[head-tag]._index.tsx
+++ b/fixtures/webstudio-features/app/routes/[head-tag]._index.tsx
@@ -1,14 +1,14 @@
 import {
-  type ServerRuntimeMetaFunction as MetaFunction,
+  type MetaFunction,
   type LinksFunction,
   type LinkDescriptor,
   type ActionFunctionArgs,
   type LoaderFunctionArgs,
   type HeadersFunction,
-  json,
+  data,
   redirect,
-} from "@remix-run/server-runtime";
-import { useLoaderData } from "@remix-run/react";
+  useLoaderData,
+} from "react-router";
 import {
   isLocalResource,
   loadResource,
@@ -20,7 +20,6 @@ import {
   ReactSdkContext,
   PageSettingsMeta,
   PageSettingsTitle,
-  PageSettingsCanonicalLink,
 } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
@@ -82,7 +81,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
       pageMeta.status === 301 || pageMeta.status === 302
         ? pageMeta.status
         : 302;
-    return redirect(pageMeta.redirect, status);
+    throw redirect(pageMeta.redirect, status);
   }
 
   // typecheck
@@ -92,7 +91,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     pageMeta.excludePageFromSearch = arg.context.EXCLUDE_FROM_SEARCH;
   }
 
-  return json(
+  return data(
     {
       host,
       url: url.href,
@@ -289,7 +288,6 @@ const Outlet = () => {
         imageLoader={imageLoader}
       />
       <PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
-      <PageSettingsCanonicalLink href={url} />
     </ReactSdkContext.Provider>
   );
 };
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[heading-with-id]._index.tsx b/fixtures/webstudio-features/app/routes/[heading-with-id]._index.tsx
similarity index 96%
rename from fixtures/webstudio-remix-vercel/app/routes/[heading-with-id]._index.tsx
rename to fixtures/webstudio-features/app/routes/[heading-with-id]._index.tsx
index cb7aa40b47d3..3b9d7a1bd913 100644
--- a/fixtures/webstudio-remix-vercel/app/routes/[heading-with-id]._index.tsx
+++ b/fixtures/webstudio-features/app/routes/[heading-with-id]._index.tsx
@@ -1,14 +1,14 @@
 import {
-  type ServerRuntimeMetaFunction as MetaFunction,
+  type MetaFunction,
   type LinksFunction,
   type LinkDescriptor,
   type ActionFunctionArgs,
   type LoaderFunctionArgs,
   type HeadersFunction,
-  json,
+  data,
   redirect,
-} from "@remix-run/server-runtime";
-import { useLoaderData } from "@remix-run/react";
+  useLoaderData,
+} from "react-router";
 import {
   isLocalResource,
   loadResource,
@@ -20,7 +20,6 @@ import {
   ReactSdkContext,
   PageSettingsMeta,
   PageSettingsTitle,
-  PageSettingsCanonicalLink,
 } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
@@ -82,7 +81,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
       pageMeta.status === 301 || pageMeta.status === 302
         ? pageMeta.status
         : 302;
-    return redirect(pageMeta.redirect, status);
+    throw redirect(pageMeta.redirect, status);
   }
 
   // typecheck
@@ -92,7 +91,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     pageMeta.excludePageFromSearch = arg.context.EXCLUDE_FROM_SEARCH;
   }
 
-  return json(
+  return data(
     {
       host,
       url: url.href,
@@ -289,7 +288,6 @@ const Outlet = () => {
         imageLoader={imageLoader}
       />
       <PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
-      <PageSettingsCanonicalLink href={url} />
     </ReactSdkContext.Provider>
   );
 };
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[nested].[nested-page]._index.tsx b/fixtures/webstudio-features/app/routes/[nested].[nested-page]._index.tsx
similarity index 96%
rename from fixtures/webstudio-remix-vercel/app/routes/[nested].[nested-page]._index.tsx
rename to fixtures/webstudio-features/app/routes/[nested].[nested-page]._index.tsx
index da0ae1858512..aab71db81206 100644
--- a/fixtures/webstudio-remix-vercel/app/routes/[nested].[nested-page]._index.tsx
+++ b/fixtures/webstudio-features/app/routes/[nested].[nested-page]._index.tsx
@@ -1,14 +1,14 @@
 import {
-  type ServerRuntimeMetaFunction as MetaFunction,
+  type MetaFunction,
   type LinksFunction,
   type LinkDescriptor,
   type ActionFunctionArgs,
   type LoaderFunctionArgs,
   type HeadersFunction,
-  json,
+  data,
   redirect,
-} from "@remix-run/server-runtime";
-import { useLoaderData } from "@remix-run/react";
+  useLoaderData,
+} from "react-router";
 import {
   isLocalResource,
   loadResource,
@@ -20,7 +20,6 @@ import {
   ReactSdkContext,
   PageSettingsMeta,
   PageSettingsTitle,
-  PageSettingsCanonicalLink,
 } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
@@ -82,7 +81,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
       pageMeta.status === 301 || pageMeta.status === 302
         ? pageMeta.status
         : 302;
-    return redirect(pageMeta.redirect, status);
+    throw redirect(pageMeta.redirect, status);
   }
 
   // typecheck
@@ -92,7 +91,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     pageMeta.excludePageFromSearch = arg.context.EXCLUDE_FROM_SEARCH;
   }
 
-  return json(
+  return data(
     {
       host,
       url: url.href,
@@ -289,7 +288,6 @@ const Outlet = () => {
         imageLoader={imageLoader}
       />
       <PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
-      <PageSettingsCanonicalLink href={url} />
     </ReactSdkContext.Provider>
   );
 };
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[radix]._index.tsx b/fixtures/webstudio-features/app/routes/[radix]._index.tsx
similarity index 96%
rename from fixtures/webstudio-remix-vercel/app/routes/[radix]._index.tsx
rename to fixtures/webstudio-features/app/routes/[radix]._index.tsx
index 46dcaf1bbe7e..e238fff71afb 100644
--- a/fixtures/webstudio-remix-vercel/app/routes/[radix]._index.tsx
+++ b/fixtures/webstudio-features/app/routes/[radix]._index.tsx
@@ -1,14 +1,14 @@
 import {
-  type ServerRuntimeMetaFunction as MetaFunction,
+  type MetaFunction,
   type LinksFunction,
   type LinkDescriptor,
   type ActionFunctionArgs,
   type LoaderFunctionArgs,
   type HeadersFunction,
-  json,
+  data,
   redirect,
-} from "@remix-run/server-runtime";
-import { useLoaderData } from "@remix-run/react";
+  useLoaderData,
+} from "react-router";
 import {
   isLocalResource,
   loadResource,
@@ -20,7 +20,6 @@ import {
   ReactSdkContext,
   PageSettingsMeta,
   PageSettingsTitle,
-  PageSettingsCanonicalLink,
 } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
@@ -82,7 +81,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
       pageMeta.status === 301 || pageMeta.status === 302
         ? pageMeta.status
         : 302;
-    return redirect(pageMeta.redirect, status);
+    throw redirect(pageMeta.redirect, status);
   }
 
   // typecheck
@@ -92,7 +91,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     pageMeta.excludePageFromSearch = arg.context.EXCLUDE_FROM_SEARCH;
   }
 
-  return json(
+  return data(
     {
       host,
       url: url.href,
@@ -289,7 +288,6 @@ const Outlet = () => {
         imageLoader={imageLoader}
       />
       <PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
-      <PageSettingsCanonicalLink href={url} />
     </ReactSdkContext.Provider>
   );
 };
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[resources]._index.tsx b/fixtures/webstudio-features/app/routes/[resources]._index.tsx
similarity index 96%
rename from fixtures/webstudio-remix-vercel/app/routes/[resources]._index.tsx
rename to fixtures/webstudio-features/app/routes/[resources]._index.tsx
index 2d6a14b080a4..450b879f7b81 100644
--- a/fixtures/webstudio-remix-vercel/app/routes/[resources]._index.tsx
+++ b/fixtures/webstudio-features/app/routes/[resources]._index.tsx
@@ -1,14 +1,14 @@
 import {
-  type ServerRuntimeMetaFunction as MetaFunction,
+  type MetaFunction,
   type LinksFunction,
   type LinkDescriptor,
   type ActionFunctionArgs,
   type LoaderFunctionArgs,
   type HeadersFunction,
-  json,
+  data,
   redirect,
-} from "@remix-run/server-runtime";
-import { useLoaderData } from "@remix-run/react";
+  useLoaderData,
+} from "react-router";
 import {
   isLocalResource,
   loadResource,
@@ -20,7 +20,6 @@ import {
   ReactSdkContext,
   PageSettingsMeta,
   PageSettingsTitle,
-  PageSettingsCanonicalLink,
 } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
@@ -82,7 +81,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
       pageMeta.status === 301 || pageMeta.status === 302
         ? pageMeta.status
         : 302;
-    return redirect(pageMeta.redirect, status);
+    throw redirect(pageMeta.redirect, status);
   }
 
   // typecheck
@@ -92,7 +91,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     pageMeta.excludePageFromSearch = arg.context.EXCLUDE_FROM_SEARCH;
   }
 
-  return json(
+  return data(
     {
       host,
       url: url.href,
@@ -289,7 +288,6 @@ const Outlet = () => {
         imageLoader={imageLoader}
       />
       <PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
-      <PageSettingsCanonicalLink href={url} />
     </ReactSdkContext.Provider>
   );
 };
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[robots.txt].tsx b/fixtures/webstudio-features/app/routes/[robots.txt].tsx
similarity index 84%
rename from fixtures/webstudio-remix-vercel/app/routes/[robots.txt].tsx
rename to fixtures/webstudio-features/app/routes/[robots.txt].tsx
index aad4a9b36820..cb8fe07b8f6f 100644
--- a/fixtures/webstudio-remix-vercel/app/routes/[robots.txt].tsx
+++ b/fixtures/webstudio-features/app/routes/[robots.txt].tsx
@@ -1,4 +1,4 @@
-import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
+import type { LoaderFunctionArgs } from "react-router";
 
 export const loader = (arg: LoaderFunctionArgs) => {
   const host =
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[sitemap.xml]._index.tsx b/fixtures/webstudio-features/app/routes/[sitemap.xml]._index.tsx
similarity index 97%
rename from fixtures/webstudio-remix-vercel/app/routes/[sitemap.xml]._index.tsx
rename to fixtures/webstudio-features/app/routes/[sitemap.xml]._index.tsx
index 942cf029831e..862a0c3733d4 100644
--- a/fixtures/webstudio-remix-vercel/app/routes/[sitemap.xml]._index.tsx
+++ b/fixtures/webstudio-features/app/routes/[sitemap.xml]._index.tsx
@@ -1,5 +1,5 @@
 import { renderToString } from "react-dom/server";
-import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
+import { type LoaderFunctionArgs, redirect } from "react-router";
 import { isLocalResource, loadResources } from "@webstudio-is/sdk/runtime";
 import {
   ReactSdkContext,
diff --git a/fixtures/webstudio-remix-vercel/app/routes/_index.tsx b/fixtures/webstudio-features/app/routes/_index.tsx
similarity index 96%
rename from fixtures/webstudio-remix-vercel/app/routes/_index.tsx
rename to fixtures/webstudio-features/app/routes/_index.tsx
index 9bc280da9b7a..5ecd622ce95e 100644
--- a/fixtures/webstudio-remix-vercel/app/routes/_index.tsx
+++ b/fixtures/webstudio-features/app/routes/_index.tsx
@@ -1,14 +1,14 @@
 import {
-  type ServerRuntimeMetaFunction as MetaFunction,
+  type MetaFunction,
   type LinksFunction,
   type LinkDescriptor,
   type ActionFunctionArgs,
   type LoaderFunctionArgs,
   type HeadersFunction,
-  json,
+  data,
   redirect,
-} from "@remix-run/server-runtime";
-import { useLoaderData } from "@remix-run/react";
+  useLoaderData,
+} from "react-router";
 import {
   isLocalResource,
   loadResource,
@@ -20,7 +20,6 @@ import {
   ReactSdkContext,
   PageSettingsMeta,
   PageSettingsTitle,
-  PageSettingsCanonicalLink,
 } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
@@ -82,7 +81,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
       pageMeta.status === 301 || pageMeta.status === 302
         ? pageMeta.status
         : 302;
-    return redirect(pageMeta.redirect, status);
+    throw redirect(pageMeta.redirect, status);
   }
 
   // typecheck
@@ -92,7 +91,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     pageMeta.excludePageFromSearch = arg.context.EXCLUDE_FROM_SEARCH;
   }
 
-  return json(
+  return data(
     {
       host,
       url: url.href,
@@ -289,7 +288,6 @@ const Outlet = () => {
         imageLoader={imageLoader}
       />
       <PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
-      <PageSettingsCanonicalLink href={url} />
     </ReactSdkContext.Provider>
   );
 };
diff --git a/fixtures/webstudio-remix-vercel/package.json b/fixtures/webstudio-features/package.json
similarity index 69%
rename from fixtures/webstudio-remix-vercel/package.json
rename to fixtures/webstudio-features/package.json
index 2ec7c3ddcfce..bde13cfe1728 100644
--- a/fixtures/webstudio-remix-vercel/package.json
+++ b/fixtures/webstudio-features/package.json
@@ -1,44 +1,45 @@
 {
   "type": "module",
   "scripts": {
-    "build": "remix vite:build",
-    "dev": "remix vite:dev",
     "typecheck": "tsc",
+    "build": "react-router build",
+    "dev": "react-router dev",
     "cli": "NODE_OPTIONS='--conditions=webstudio --import=tsx' webstudio",
     "fixtures:link": "pnpm cli link --link https://p-cddc1d44-af37-4cb6-a430-d300cf6f932d-dot-${BUILDER_HOST:-main.development.webstudio.is}'?authToken=1cdc6026-dd5b-4624-b89b-9bd45e9bcc3d'",
     "fixtures:sync": "pnpm cli sync --buildId 3173a7d8-1af3-4e23-87fd-94c3b0cb1018 && pnpm prettier --write ./.webstudio/",
-    "fixtures:build": "pnpm cli build --template vercel --template internal --template ./.template && pnpm prettier --write ./app/ ./package.json ./tsconfig.json"
+    "fixtures:build": "pnpm cli build --template react-router --template ./.template && pnpm prettier --write ./app/ ./package.json ./tsconfig.json"
   },
   "private": true,
   "sideEffects": false,
   "dependencies": {
-    "@remix-run/node": "2.15.2",
-    "@remix-run/react": "2.15.2",
-    "@remix-run/server-runtime": "2.15.2",
+    "@miniflare/html-rewriter": "^2.14.4",
+    "@react-router/dev": "^7.1.5",
+    "@react-router/fs-routes": "^7.1.5",
+    "@react-router/node": "^7.1.5",
     "@webstudio-is/image": "workspace:*",
     "@webstudio-is/react-sdk": "workspace:*",
     "@webstudio-is/sdk": "workspace:*",
     "@webstudio-is/sdk-components-animation": "workspace:*",
-    "@webstudio-is/sdk-components-react": "workspace:*",
     "@webstudio-is/sdk-components-react-radix": "workspace:*",
-    "@webstudio-is/sdk-components-react-remix": "workspace:*",
+    "@webstudio-is/sdk-components-react-router": "workspace:*",
+    "@webstudio-is/sdk-components-react": "workspace:*",
     "isbot": "^5.1.22",
     "react": "18.3.0-canary-14898b6a9-20240318",
-    "react-dom": "18.3.0-canary-14898b6a9-20240318"
+    "react-dom": "18.3.0-canary-14898b6a9-20240318",
+    "react-router": "^7.1.5",
+    "vite": "^5.4.11",
+    "webstudio": "workspace:*"
   },
   "devDependencies": {
-    "@miniflare/html-rewriter": "^2.14.4",
-    "@remix-run/dev": "2.15.2",
+    "webstudio": "workspace:*",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
-    "typescript": "5.7.3",
-    "vite": "^5.4.11",
-    "webstudio": "workspace:*"
+    "typescript": "5.7.3"
   },
   "engines": {
     "node": ">=20.0.0"
   },
-  "name": "webstudio-remix-vercel",
+  "name": "webstudio-features",
   "version": "0.0.1",
   "description": "",
   "main": "index.js",
diff --git a/fixtures/webstudio-remix-vercel/proxy-emulator/dedupe-meta.ts b/fixtures/webstudio-features/proxy-emulator/dedupe-meta.ts
similarity index 100%
rename from fixtures/webstudio-remix-vercel/proxy-emulator/dedupe-meta.ts
rename to fixtures/webstudio-features/proxy-emulator/dedupe-meta.ts
diff --git a/fixtures/webstudio-remix-vercel/public/assets/DALL_E_2023-10-30_12.39.46_-_Photo_logo_with_a_bold_cat_silhouette_centered_on_a_contrasting_background_designed_for_clarity_at_small_32x32_favicon_resolution_00h6cEA8u2pJRvVJv7hRe.png b/fixtures/webstudio-features/public/assets/DALL_E_2023-10-30_12.39.46_-_Photo_logo_with_a_bold_cat_silhouette_centered_on_a_contrasting_background_designed_for_clarity_at_small_32x32_favicon_resolution_00h6cEA8u2pJRvVJv7hRe.png
similarity index 100%
rename from fixtures/webstudio-remix-vercel/public/assets/DALL_E_2023-10-30_12.39.46_-_Photo_logo_with_a_bold_cat_silhouette_centered_on_a_contrasting_background_designed_for_clarity_at_small_32x32_favicon_resolution_00h6cEA8u2pJRvVJv7hRe.png
rename to fixtures/webstudio-features/public/assets/DALL_E_2023-10-30_12.39.46_-_Photo_logo_with_a_bold_cat_silhouette_centered_on_a_contrasting_background_designed_for_clarity_at_small_32x32_favicon_resolution_00h6cEA8u2pJRvVJv7hRe.png
diff --git a/fixtures/webstudio-features/public/assets/_937084ed-a798-49fe-8664-df93a2af605e_uiBk3o6UWdqolyakMvQJ9.jpeg b/fixtures/webstudio-features/public/assets/_937084ed-a798-49fe-8664-df93a2af605e_uiBk3o6UWdqolyakMvQJ9.jpeg
new file mode 100644
index 000000000000..1c8219b73bf2
Binary files /dev/null and b/fixtures/webstudio-features/public/assets/_937084ed-a798-49fe-8664-df93a2af605e_uiBk3o6UWdqolyakMvQJ9.jpeg differ
diff --git a/fixtures/webstudio-remix-vercel/public/assets/small-avif-kitty_FnabJsioMWpBtXZSGf4DR.webp b/fixtures/webstudio-features/public/assets/small-avif-kitty_FnabJsioMWpBtXZSGf4DR.webp
similarity index 100%
rename from fixtures/webstudio-remix-vercel/public/assets/small-avif-kitty_FnabJsioMWpBtXZSGf4DR.webp
rename to fixtures/webstudio-features/public/assets/small-avif-kitty_FnabJsioMWpBtXZSGf4DR.webp
diff --git a/fixtures/webstudio-remix-vercel/public/favicon.ico b/fixtures/webstudio-features/public/favicon.ico
similarity index 100%
rename from fixtures/webstudio-remix-vercel/public/favicon.ico
rename to fixtures/webstudio-features/public/favicon.ico
diff --git a/fixtures/webstudio-remix-vercel/tsconfig.json b/fixtures/webstudio-features/tsconfig.json
similarity index 80%
rename from fixtures/webstudio-remix-vercel/tsconfig.json
rename to fixtures/webstudio-features/tsconfig.json
index 99e0e652cc0f..0744b14c56a2 100644
--- a/fixtures/webstudio-remix-vercel/tsconfig.json
+++ b/fixtures/webstudio-features/tsconfig.json
@@ -2,11 +2,7 @@
   "include": ["**/*.ts", "**/*.tsx", "**/*.mjs"],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "types": [
-      "@remix-run/node",
-      "vite/client",
-      "@webstudio-is/react-sdk/placeholder"
-    ],
+    "types": ["vite/client", "@webstudio-is/react-sdk/placeholder"],
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
diff --git a/fixtures/webstudio-features/vite.config.ts b/fixtures/webstudio-features/vite.config.ts
new file mode 100644
index 000000000000..af40508cdc7b
--- /dev/null
+++ b/fixtures/webstudio-features/vite.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from "vite";
+// @ts-ignore
+import { reactRouter } from "@react-router/dev/vite";
+// @ts-ignore
+import { dedupeMeta } from "./proxy-emulator/dedupe-meta";
+
+export default defineConfig({
+  plugins: [reactRouter(), dedupeMeta],
+});
diff --git a/fixtures/webstudio-remix-vercel/.template/vite.config.ts b/fixtures/webstudio-remix-vercel/.template/vite.config.ts
deleted file mode 100644
index e057ea698cda..000000000000
--- a/fixtures/webstudio-remix-vercel/.template/vite.config.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { defineConfig } from "vite";
-import { vitePlugin as remix } from "@remix-run/dev";
-// @ts-ignore
-import { dedupeMeta } from "./proxy-emulator/dedupe-meta";
-
-export default defineConfig({
-  plugins: [
-    remix({
-      future: {
-        v3_lazyRouteDiscovery: false,
-        v3_relativeSplatPath: false,
-        v3_singleFetch: false,
-        v3_fetcherPersist: false,
-        v3_throwAbortReason: false,
-      },
-    }),
-    dedupeMeta,
-  ],
-});
diff --git a/fixtures/webstudio-remix-vercel/.vercelignore b/fixtures/webstudio-remix-vercel/.vercelignore
deleted file mode 100644
index 6a0e67a2fbe7..000000000000
--- a/fixtures/webstudio-remix-vercel/.vercelignore
+++ /dev/null
@@ -1,8 +0,0 @@
-node_modules
-
-.cache
-.env
-.vercel
-.webstudio
-build
-public/build
diff --git a/fixtures/webstudio-remix-vercel/app/constants.mjs b/fixtures/webstudio-remix-vercel/app/constants.mjs
deleted file mode 100644
index 8bfaf110674a..000000000000
--- a/fixtures/webstudio-remix-vercel/app/constants.mjs
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * We use mjs extension as constants in this file is shared with the build script
- * and we use `node --eval` to extract the constants.
- */
-export const assetBaseUrl = "/assets/";
-
-/**
- * @type {import("@webstudio-is/image").ImageLoader}
- */
-export const imageLoader = (props) => {
-  if (process.env.NODE_ENV !== "production") {
-    return props.src;
-  }
-
-  if (props.format === "raw") {
-    return props.src;
-  }
-
-  // https://vercel.com/blog/build-your-own-web-framework#automatic-image-optimization
-  const searchParams = new URLSearchParams();
-  searchParams.set("url", props.src);
-  searchParams.set("w", props.width.toString());
-  searchParams.set("q", props.quality.toString());
-  return `/_vercel/image?${searchParams}`;
-};
diff --git a/fixtures/webstudio-remix-vercel/public/assets/_937084ed-a798-49fe-8664-df93a2af605e_uiBk3o6UWdqolyakMvQJ9.jpeg b/fixtures/webstudio-remix-vercel/public/assets/_937084ed-a798-49fe-8664-df93a2af605e_uiBk3o6UWdqolyakMvQJ9.jpeg
deleted file mode 100644
index ba43ae9a7a66..000000000000
Binary files a/fixtures/webstudio-remix-vercel/public/assets/_937084ed-a798-49fe-8664-df93a2af605e_uiBk3o6UWdqolyakMvQJ9.jpeg and /dev/null differ
diff --git a/fixtures/webstudio-remix-vercel/vercel.json b/fixtures/webstudio-remix-vercel/vercel.json
deleted file mode 100644
index 94ff3b2f352e..000000000000
--- a/fixtures/webstudio-remix-vercel/vercel.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "images": {
-    "domains": [],
-    "sizes": [
-      16, 32, 48, 64, 96, 128, 144, 256, 384, 640, 750, 828, 1080, 1200, 1920,
-      2048, 3840
-    ],
-    "minimumCacheTTL": 60,
-    "formats": ["image/webp", "image/avif"]
-  }
-}
diff --git a/fixtures/webstudio-remix-vercel/vite.config.ts b/fixtures/webstudio-remix-vercel/vite.config.ts
deleted file mode 100644
index e057ea698cda..000000000000
--- a/fixtures/webstudio-remix-vercel/vite.config.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { defineConfig } from "vite";
-import { vitePlugin as remix } from "@remix-run/dev";
-// @ts-ignore
-import { dedupeMeta } from "./proxy-emulator/dedupe-meta";
-
-export default defineConfig({
-  plugins: [
-    remix({
-      future: {
-        v3_lazyRouteDiscovery: false,
-        v3_relativeSplatPath: false,
-        v3_singleFetch: false,
-        v3_fetcherPersist: false,
-        v3_throwAbortReason: false,
-      },
-    }),
-    dedupeMeta,
-  ],
-});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5d5f5a9bb17d..8637653806b7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -861,23 +861,20 @@ importers:
         specifier: workspace:*
         version: link:../../packages/cli
 
-  fixtures/webstudio-remix-netlify-edge-functions:
+  fixtures/webstudio-features:
     dependencies:
-      '@netlify/edge-functions':
-        specifier: ^2.11.1
-        version: 2.11.1
-      '@netlify/remix-edge-adapter':
-        specifier: ^3.4.2
-        version: 3.4.2(@remix-run/react@2.15.2(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318)(typescript@5.7.3))(@remix-run/serve@2.15.2(typescript@5.7.3))(@remix-run/server-runtime@2.15.2(typescript@5.7.3))(@types/node@22.10.7)(typescript@5.7.3)(vite@5.4.11(@types/node@22.10.7))(wrangler@3.63.2(@cloudflare/workers-types@4.20240701.0))
-      '@remix-run/node':
-        specifier: 2.15.2
-        version: 2.15.2(typescript@5.7.3)
-      '@remix-run/react':
-        specifier: 2.15.2
-        version: 2.15.2(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318)(typescript@5.7.3)
-      '@remix-run/server-runtime':
-        specifier: 2.15.2
-        version: 2.15.2(typescript@5.7.3)
+      '@miniflare/html-rewriter':
+        specifier: ^2.14.4
+        version: 2.14.4
+      '@react-router/dev':
+        specifier: ^7.1.5
+        version: 7.1.5(@react-router/serve@7.1.5(react-router@7.1.5(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@5.7.3))(@types/node@22.10.7)(react-router@7.1.5(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@5.7.3)(vite@5.4.11(@types/node@22.10.7))(wrangler@3.63.2(@cloudflare/workers-types@4.20240701.0))
+      '@react-router/fs-routes':
+        specifier: ^7.1.5
+        version: 7.1.5(@react-router/dev@7.1.5(@react-router/serve@7.1.5(react-router@7.1.5(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@5.7.3))(@types/node@22.10.7)(react-router@7.1.5(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@5.7.3)(vite@5.4.11(@types/node@22.10.7))(wrangler@3.63.2(@cloudflare/workers-types@4.20240701.0)))(typescript@5.7.3)
+      '@react-router/node':
+        specifier: ^7.1.5
+        version: 7.1.5(react-router@7.1.5(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@5.7.3)
       '@webstudio-is/image':
         specifier: workspace:*
         version: link:../../packages/image
@@ -896,9 +893,9 @@ importers:
       '@webstudio-is/sdk-components-react-radix':
         specifier: workspace:*
         version: link:../../packages/sdk-components-react-radix
-      '@webstudio-is/sdk-components-react-remix':
+      '@webstudio-is/sdk-components-react-router':
         specifier: workspace:*
-        version: link:../../packages/sdk-components-react-remix
+        version: link:../../packages/sdk-components-react-router
       isbot:
         specifier: ^5.1.22
         version: 5.1.22
@@ -908,10 +905,16 @@ importers:
       react-dom:
         specifier: 18.3.0-canary-14898b6a9-20240318
         version: 18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318)
+      react-router:
+        specifier: ^7.1.5
+        version: 7.1.5(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318)
+      vite:
+        specifier: ^5.4.11
+        version: 5.4.11(@types/node@22.10.7)
+      webstudio:
+        specifier: workspace:*
+        version: link:../../packages/cli
     devDependencies:
-      '@remix-run/dev':
-        specifier: 2.15.2
-        version: 2.15.2(patch_hash=yortwzoeu3uj2blmdikhhw5byy)(@remix-run/react@2.15.2(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318)(typescript@5.7.3))(@remix-run/serve@2.15.2(typescript@5.7.3))(@types/node@22.10.7)(typescript@5.7.3)(vite@5.4.11(@types/node@22.10.7))(wrangler@3.63.2(@cloudflare/workers-types@4.20240701.0))
       '@types/react':
         specifier: ^18.2.70
         version: 18.2.79
@@ -921,21 +924,15 @@ importers:
       typescript:
         specifier: 5.7.3
         version: 5.7.3
-      vite:
-        specifier: ^5.4.11
-        version: 5.4.11(@types/node@22.10.7)
-      webstudio:
-        specifier: workspace:*
-        version: link:../../packages/cli
 
-  fixtures/webstudio-remix-netlify-functions:
+  fixtures/webstudio-remix-netlify-edge-functions:
     dependencies:
-      '@netlify/functions':
-        specifier: ^2.8.2
-        version: 2.8.2
-      '@netlify/remix-adapter':
-        specifier: ^2.5.1
-        version: 2.5.1(@netlify/functions@2.8.2)(typescript@5.7.3)(vite@5.4.11(@types/node@22.10.7))
+      '@netlify/edge-functions':
+        specifier: ^2.11.1
+        version: 2.11.1
+      '@netlify/remix-edge-adapter':
+        specifier: ^3.4.2
+        version: 3.4.2(@remix-run/react@2.15.2(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318)(typescript@5.7.3))(@remix-run/serve@2.15.2(typescript@5.7.3))(@remix-run/server-runtime@2.15.2(typescript@5.7.3))(@types/node@22.10.7)(typescript@5.7.3)(vite@5.4.11(@types/node@22.10.7))(wrangler@3.63.2(@cloudflare/workers-types@4.20240701.0))
       '@remix-run/node':
         specifier: 2.15.2
         version: 2.15.2(typescript@5.7.3)
@@ -995,8 +992,14 @@ importers:
         specifier: workspace:*
         version: link:../../packages/cli
 
-  fixtures/webstudio-remix-vercel:
+  fixtures/webstudio-remix-netlify-functions:
     dependencies:
+      '@netlify/functions':
+        specifier: ^2.8.2
+        version: 2.8.2
+      '@netlify/remix-adapter':
+        specifier: ^2.5.1
+        version: 2.5.1(@netlify/functions@2.8.2)(typescript@5.7.3)(vite@5.4.11(@types/node@22.10.7))
       '@remix-run/node':
         specifier: 2.15.2
         version: 2.15.2(typescript@5.7.3)
@@ -1037,9 +1040,6 @@ importers:
         specifier: 18.3.0-canary-14898b6a9-20240318
         version: 18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318)
     devDependencies:
-      '@miniflare/html-rewriter':
-        specifier: ^2.14.4
-        version: 2.14.4
       '@remix-run/dev':
         specifier: 2.15.2
         version: 2.15.2(patch_hash=yortwzoeu3uj2blmdikhhw5byy)(@remix-run/react@2.15.2(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318)(typescript@5.7.3))(@remix-run/serve@2.15.2(typescript@5.7.3))(@types/node@22.10.7)(typescript@5.7.3)(vite@5.4.11(@types/node@22.10.7))(wrangler@3.63.2(@cloudflare/workers-types@4.20240701.0))