diff --git a/.github/workflows/demos_check.yml b/.github/workflows/demos_check.yml
index ab18f9dfb..aceb447d4 100644
--- a/.github/workflows/demos_check.yml
+++ b/.github/workflows/demos_check.yml
@@ -40,9 +40,9 @@ jobs:
run: pnpm install --frozen-lockfile
- name: Lint code
- working-directory: ./demos
- run: pnpm run lint
+ working-directory: ./demos/vite-demo
+ run: pnpm run build && pnpm run lint
- name: Typecheck code
- working-directory: ./demos
- run: pnpm run typecheck
+ working-directory: ./demos/vite-react-router-demo
+ run: pnpm run build && pnpm run typecheck
diff --git a/demos/vite-demo/.gitignore b/demos/vite-demo/.gitignore
index 9b7c041f9..a547bf36d 100644
--- a/demos/vite-demo/.gitignore
+++ b/demos/vite-demo/.gitignore
@@ -1,6 +1,24 @@
-.DS_Store
-/node_modules/
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
-# React Router
-/.react-router/
-/build/
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/demos/vite-demo/README.md b/demos/vite-demo/README.md
index e0d20664e..74872fd4a 100644
--- a/demos/vite-demo/README.md
+++ b/demos/vite-demo/README.md
@@ -1,100 +1,50 @@
-# Welcome to React Router!
+# React + TypeScript + Vite
-A modern, production-ready template for building full-stack React applications using React Router.
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-[](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default)
+Currently, two official plugins are available:
-## Features
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-- 🚀 Server-side rendering
-- ⚡️ Hot Module Replacement (HMR)
-- 📦 Asset bundling and optimization
-- 🔄 Data loading and mutations
-- 🔒 TypeScript by default
-- 🎉 TailwindCSS for styling
-- 📖 [React Router docs](https://reactrouter.com/)
+## Expanding the ESLint configuration
-## Getting Started
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-### Installation
+- Configure the top-level `parserOptions` property like this:
-Install the dependencies:
-
-```bash
-npm install
-```
-
-### Development
-
-Start the development server with HMR:
-
-```bash
-npm run dev
-```
-
-Your application will be available at `http://localhost:5173`.
-
-## Building for Production
-
-Create a production build:
-
-```bash
-npm run build
-```
-
-## Deployment
-
-### Docker Deployment
-
-This template includes three Dockerfiles optimized for different package managers:
-
-- `Dockerfile` - for npm
-- `Dockerfile.pnpm` - for pnpm
-- `Dockerfile.bun` - for bun
-
-To build and run using Docker:
-
-```bash
-# For npm
-docker build -t my-app .
-
-# For pnpm
-docker build -f Dockerfile.pnpm -t my-app .
-
-# For bun
-docker build -f Dockerfile.bun -t my-app .
-
-# Run the container
-docker run -p 3000:3000 my-app
+```js
+export default tseslint.config({
+ languageOptions: {
+ // other options...
+ parserOptions: {
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
+ tsconfigRootDir: import.meta.dirname,
+ },
+ },
+})
```
-The containerized application can be deployed to any platform that supports Docker, including:
-
-- AWS ECS
-- Google Cloud Run
-- Azure Container Apps
-- Digital Ocean App Platform
-- Fly.io
-- Railway
-
-### DIY Deployment
-
-If you're familiar with deploying Node applications, the built-in app server is production-ready.
-
-Make sure to deploy the output of `npm run build`
-
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+ // Set the react version
+ settings: { react: { version: '18.3' } },
+ plugins: {
+ // Add the react plugin
+ react,
+ },
+ rules: {
+ // other rules...
+ // Enable its recommended rules
+ ...react.configs.recommended.rules,
+ ...react.configs['jsx-runtime'].rules,
+ },
+})
```
-├── package.json
-├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
-├── build/
-│ ├── client/ # Static assets
-│ └── server/ # Server-side code
-```
-
-## Styling
-
-This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
-
----
-
-Built with ❤️ using React Router.
diff --git a/demos/vite-demo/app/routes.ts b/demos/vite-demo/app/routes.ts
deleted file mode 100644
index 102b40258..000000000
--- a/demos/vite-demo/app/routes.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { type RouteConfig, index } from "@react-router/dev/routes";
-
-export default [index("routes/home.tsx")] satisfies RouteConfig;
diff --git a/demos/vite-demo/app/routes/home.tsx b/demos/vite-demo/app/routes/home.tsx
deleted file mode 100644
index 398e47cb7..000000000
--- a/demos/vite-demo/app/routes/home.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { Route } from "./+types/home";
-import { Welcome } from "../welcome/welcome";
-
-export function meta({}: Route.MetaArgs) {
- return [
- { title: "New React Router App" },
- { name: "description", content: "Welcome to React Router!" },
- ];
-}
-
-export default function Home() {
- return ;
-}
diff --git a/demos/vite-demo/app/welcome/logo-dark.svg b/demos/vite-demo/app/welcome/logo-dark.svg
deleted file mode 100644
index dd8202894..000000000
--- a/demos/vite-demo/app/welcome/logo-dark.svg
+++ /dev/null
@@ -1,23 +0,0 @@
-
diff --git a/demos/vite-demo/app/welcome/logo-light.svg b/demos/vite-demo/app/welcome/logo-light.svg
deleted file mode 100644
index 73284929d..000000000
--- a/demos/vite-demo/app/welcome/logo-light.svg
+++ /dev/null
@@ -1,23 +0,0 @@
-
diff --git a/demos/vite-demo/app/welcome/welcome.tsx b/demos/vite-demo/app/welcome/welcome.tsx
deleted file mode 100644
index 8ac6e1d30..000000000
--- a/demos/vite-demo/app/welcome/welcome.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import logoDark from "./logo-dark.svg";
-import logoLight from "./logo-light.svg";
-
-export function Welcome() {
- return (
-
-
-
-
-
-
-
-
-
-
-
Vite + React
+
+
+
+
+
+
+ Edit src/App.tsx and save to test HMR
+
+
+ Click on the Vite and React logos to learn more
+
+
+ )
+}
+
+export default App
diff --git a/demos/vite-demo/src/assets/react.svg b/demos/vite-demo/src/assets/react.svg
new file mode 100644
index 000000000..6c87de9bb
--- /dev/null
+++ b/demos/vite-demo/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/demos/vite-demo/src/components/SmelterCanvas.tsx b/demos/vite-demo/src/components/SmelterCanvas.tsx
new file mode 100644
index 000000000..337a062af
--- /dev/null
+++ b/demos/vite-demo/src/components/SmelterCanvas.tsx
@@ -0,0 +1,72 @@
+import { Smelter } from "@swmansion/smelter-web-wasm";
+import { useCallback, useEffect, useState, type ReactElement } from "react";
+
+type CanvasProps = React.DetailedHTMLProps<
+ React.CanvasHTMLAttributes,
+ HTMLCanvasElement
+>;
+
+type SmelterCanvasProps = CanvasProps & {
+ onSmelterCreated?: (smelter: Smelter) => Promise;
+ onSmelterStarted?: (smelter: Smelter) => Promise;
+ children: ReactElement,
+};
+
+type SmelterState = { smelter: Smelter, initPromise: Promise }
+
+/**
+ * Helper component that starts smelter with single WHIP output.
+ * Preview of the stream is displayed in a `` tag.
+ */
+export default function SmelterCanvas(props: SmelterCanvasProps) {
+ const { children, onSmelterCreated, onSmelterStarted, ...canvasProps } = props;
+
+ const [smelterState, setSmelterState] = useState();
+
+ const canvasRef = useCallback((canvasElement: HTMLCanvasElement | null) => {
+ if (!canvasElement) {
+ return
+ }
+ const smelter = new Smelter();
+ const initPromise = smelter.init()
+ setSmelterState({
+ smelter,
+ initPromise,
+ });
+
+ (async () => {
+ await initPromise;
+ if (onSmelterCreated) {
+ await onSmelterCreated(smelter)
+ }
+
+ await smelter.registerOutput('output', children, {
+ type: 'canvas',
+ video: {
+ canvas: canvasElement,
+ resolution: { width: Number(props.width ?? 1920), height: Number(props.height ?? 1080) },
+ },
+ audio: true,
+ });
+
+ await smelter.start()
+ if (onSmelterStarted) {
+ await onSmelterStarted(smelter)
+ }
+ })();
+ }, [onSmelterStarted, onSmelterCreated, children, props.width, props.height])
+
+ useEffect(() => {
+ return () => {
+ if (smelterState) {
+ smelterState.initPromise
+ .catch(() => { })
+ .then(() => smelterState.smelter.terminate())
+ }
+ };
+ }, [smelterState]);
+
+ return (
+
+ )
+}
diff --git a/demos/vite-demo/src/index.css b/demos/vite-demo/src/index.css
new file mode 100644
index 000000000..6119ad9a8
--- /dev/null
+++ b/demos/vite-demo/src/index.css
@@ -0,0 +1,68 @@
+:root {
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/demos/vite-demo/src/main.tsx b/demos/vite-demo/src/main.tsx
new file mode 100644
index 000000000..bef5202a3
--- /dev/null
+++ b/demos/vite-demo/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+
+
+ ,
+)
diff --git a/demos/vite-demo/src/vite-env.d.ts b/demos/vite-demo/src/vite-env.d.ts
new file mode 100644
index 000000000..11f02fe2a
--- /dev/null
+++ b/demos/vite-demo/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/demos/vite-demo/tsconfig.app.json b/demos/vite-demo/tsconfig.app.json
new file mode 100644
index 000000000..358ca9ba9
--- /dev/null
+++ b/demos/vite-demo/tsconfig.app.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["src"]
+}
diff --git a/demos/vite-demo/tsconfig.json b/demos/vite-demo/tsconfig.json
index dc391a45f..1ffef600d 100644
--- a/demos/vite-demo/tsconfig.json
+++ b/demos/vite-demo/tsconfig.json
@@ -1,27 +1,7 @@
{
- "include": [
- "**/*",
- "**/.server/**/*",
- "**/.client/**/*",
- ".react-router/types/**/*"
- ],
- "compilerOptions": {
- "lib": ["DOM", "DOM.Iterable", "ES2022"],
- "types": ["node", "vite/client"],
- "target": "ES2022",
- "module": "ES2022",
- "moduleResolution": "bundler",
- "jsx": "react-jsx",
- "rootDirs": [".", "./.react-router/types"],
- "baseUrl": ".",
- "paths": {
- "~/*": ["./app/*"]
- },
- "esModuleInterop": true,
- "verbatimModuleSyntax": true,
- "noEmit": true,
- "resolveJsonModule": true,
- "skipLibCheck": true,
- "strict": true
- }
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ]
}
diff --git a/demos/vite-demo/tsconfig.node.json b/demos/vite-demo/tsconfig.node.json
new file mode 100644
index 000000000..db0becc8b
--- /dev/null
+++ b/demos/vite-demo/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "ES2022",
+ "lib": ["ES2023"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/demos/vite-demo/vite.config.ts b/demos/vite-demo/vite.config.ts
index 4a88d5871..603c5701e 100644
--- a/demos/vite-demo/vite.config.ts
+++ b/demos/vite-demo/vite.config.ts
@@ -1,8 +1,28 @@
-import { reactRouter } from "@react-router/dev/vite";
-import tailwindcss from "@tailwindcss/vite";
-import { defineConfig } from "vite";
-import tsconfigPaths from "vite-tsconfig-paths";
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+import { createRequire } from 'node:module';
+import path from 'node:path';
+
+const require = createRequire(import.meta.url);
export default defineConfig({
- plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
+ plugins: [
+ react(),
+ viteStaticCopy({
+ targets: [
+ {
+ src: path.join(
+ path.dirname(require.resolve('@swmansion/smelter-browser-render')),
+ 'smelter.wasm'
+ ),
+ dest: 'assets',
+ },
+ ],
+ }),
+ ],
+ optimizeDeps: {
+ exclude: ['@swmansion/smelter-web-wasm'],
+ include: ['pino']
+ },
});
diff --git a/demos/vite-demo/.dockerignore b/demos/vite-react-router-demo/.dockerignore
similarity index 100%
rename from demos/vite-demo/.dockerignore
rename to demos/vite-react-router-demo/.dockerignore
diff --git a/demos/vite-react-router-demo/.gitignore b/demos/vite-react-router-demo/.gitignore
new file mode 100644
index 000000000..9b7c041f9
--- /dev/null
+++ b/demos/vite-react-router-demo/.gitignore
@@ -0,0 +1,6 @@
+.DS_Store
+/node_modules/
+
+# React Router
+/.react-router/
+/build/
diff --git a/demos/vite-demo/Dockerfile b/demos/vite-react-router-demo/Dockerfile
similarity index 100%
rename from demos/vite-demo/Dockerfile
rename to demos/vite-react-router-demo/Dockerfile
diff --git a/demos/vite-react-router-demo/README.md b/demos/vite-react-router-demo/README.md
new file mode 100644
index 000000000..e0d20664e
--- /dev/null
+++ b/demos/vite-react-router-demo/README.md
@@ -0,0 +1,100 @@
+# Welcome to React Router!
+
+A modern, production-ready template for building full-stack React applications using React Router.
+
+[](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default)
+
+## Features
+
+- 🚀 Server-side rendering
+- ⚡️ Hot Module Replacement (HMR)
+- 📦 Asset bundling and optimization
+- 🔄 Data loading and mutations
+- 🔒 TypeScript by default
+- 🎉 TailwindCSS for styling
+- 📖 [React Router docs](https://reactrouter.com/)
+
+## Getting Started
+
+### Installation
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+### Development
+
+Start the development server with HMR:
+
+```bash
+npm run dev
+```
+
+Your application will be available at `http://localhost:5173`.
+
+## Building for Production
+
+Create a production build:
+
+```bash
+npm run build
+```
+
+## Deployment
+
+### Docker Deployment
+
+This template includes three Dockerfiles optimized for different package managers:
+
+- `Dockerfile` - for npm
+- `Dockerfile.pnpm` - for pnpm
+- `Dockerfile.bun` - for bun
+
+To build and run using Docker:
+
+```bash
+# For npm
+docker build -t my-app .
+
+# For pnpm
+docker build -f Dockerfile.pnpm -t my-app .
+
+# For bun
+docker build -f Dockerfile.bun -t my-app .
+
+# Run the container
+docker run -p 3000:3000 my-app
+```
+
+The containerized application can be deployed to any platform that supports Docker, including:
+
+- AWS ECS
+- Google Cloud Run
+- Azure Container Apps
+- Digital Ocean App Platform
+- Fly.io
+- Railway
+
+### DIY Deployment
+
+If you're familiar with deploying Node applications, the built-in app server is production-ready.
+
+Make sure to deploy the output of `npm run build`
+
+```
+├── package.json
+├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
+├── build/
+│ ├── client/ # Static assets
+│ └── server/ # Server-side code
+```
+
+## Styling
+
+This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
+
+---
+
+Built with ❤️ using React Router.
diff --git a/demos/vite-demo/app/app.css b/demos/vite-react-router-demo/app/app.css
similarity index 76%
rename from demos/vite-demo/app/app.css
rename to demos/vite-react-router-demo/app/app.css
index 99345d821..efa6da3ae 100644
--- a/demos/vite-demo/app/app.css
+++ b/demos/vite-react-router-demo/app/app.css
@@ -3,6 +3,9 @@
@theme {
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+ --color-purple-100: #302555;
+ --color-black-100: #161127;
}
html,
@@ -12,4 +15,6 @@ body {
@media (prefers-color-scheme: dark) {
color-scheme: dark;
}
+
+ background-color: #161127
}
diff --git a/demos/vite-react-router-demo/app/canvas/CanvasPage.tsx b/demos/vite-react-router-demo/app/canvas/CanvasPage.tsx
new file mode 100644
index 000000000..30d2734e0
--- /dev/null
+++ b/demos/vite-react-router-demo/app/canvas/CanvasPage.tsx
@@ -0,0 +1,18 @@
+import { View, Text } from '@swmansion/smelter';
+import { setWasmBundleUrl } from '@swmansion/smelter-web-wasm';
+import SmelterCanvas from '~/canvas/SmelterCanvas';
+
+setWasmBundleUrl('/assets/smelter.wasm');
+
+export default function StreamPage() {
+ return (
+
+
Example canvas output
+
+
+ CanvasExample
+
+
+
+
+
+
+
+ {resources.map(({ href, text, title }) => (
+
+
+
+ ))}
+
+
Example WHIP stream with preview
+
+
+
+