rstackjs · chenjiahan · Aug 7, 2026 · Aug 7, 2026
diff --git a/packages/create-rstack/README.md b/packages/create-rstack/README.md
@@ -13,16 +13,18 @@ npm create rstack@latest
 Using CLI flags:
 
 ```bash
-npx create-rstack --dir my-project --template app-ts
+npx create-rstack --dir my-project --template app-vanilla-ts
 
 # Using abbreviations
-npx create-rstack -d my-project -t app-ts
+npx create-rstack -d my-project -t app-vanilla-ts
 ```
 
 ## Templates
 
-- `app-js` - JavaScript application
-- `app-ts` - TypeScript application
+- `app-vanilla-js` - JavaScript Vanilla application
+- `app-vanilla-ts` - TypeScript Vanilla application
+- `app-react-js` - JavaScript React application
+- `app-react-ts` - TypeScript React application
 - `lib-js` - JavaScript Node.js library
 - `lib-ts` - TypeScript Node.js library
 

diff --git a/packages/create-rstack/src/index.ts b/packages/create-rstack/src/index.ts
@@ -1,15 +1,18 @@
-import {
-  type Argv,
-  checkCancel,
-  create,
-  type ESLintTemplateName,
-  type RslintTemplateName,
-  select,
-} from '@rstackjs/create-toolkit';
+import { type Argv, checkCancel, create, select } from '@rstackjs/create-toolkit';
 import path from 'node:path';
 
 const getTemplateName = async ({ template }: Argv): Promise<string> => {
   if (typeof template === 'string') {
+    if (template === 'app' || template.startsWith('app-')) {
+      const [, framework = 'vanilla', language = 'js'] = template.split('-');
+
+      if (framework === 'js' || framework === 'ts') {
+        return `app-vanilla-${framework}`;
+      }
+
+      return `app-${framework}-${language}`;
+    }
+
     const [type, language = 'js'] = template.split('-');
     return `${type}-${language}`;
   }
@@ -24,6 +27,19 @@ const getTemplateName = async ({ template }: Argv): Promise<string> => {
     }),
   );
 
+  const framework =
+    projectType === 'app'
+      ? checkCancel<string>(
+          await select({
+            message: 'Select framework',
+            options: [
+              { value: 'vanilla', label: 'Vanilla' },
+              { value: 'react', label: 'React' },
+            ],
+          }),
+        )
+      : undefined;
+
   const language = checkCancel<string>(
     await select({
       message: 'Select language',
@@ -34,21 +50,20 @@ const getTemplateName = async ({ template }: Argv): Promise<string> => {
     }),
   );
 
-  return `${projectType}-${language}`;
+  return framework ? `${projectType}-${framework}-${language}` : `${projectType}-${language}`;
 };
 
-const mapESLintTemplate = (templateName: string): ESLintTemplateName =>
-  templateName.endsWith('-ts') ? 'vanilla-ts' : 'vanilla-js';
-
-const mapRslintTemplate = (templateName: string): RslintTemplateName =>
-  templateName.endsWith('-ts') ? 'vanilla-ts' : 'vanilla-js';
-
 await create({
   root: path.join(import.meta.dirname, '..'),
   name: 'rstack',
-  templates: ['app-js', 'app-ts', 'lib-js', 'lib-ts'],
+  templates: [
+    'app-vanilla-js',
+    'app-vanilla-ts',
+    'app-react-js',
+    'app-react-ts',
+    'lib-js',
+    'lib-ts',
+  ],
   builtinTools: [],
   getTemplateName,
-  mapESLintTemplate,
-  mapRslintTemplate,
 });
diff --git a/...s/create-rstack/template-app-js/AGENTS.md → ...te-rstack/template-app-react-js/AGENTS.md b/...s/create-rstack/template-app-js/AGENTS.md → ...te-rstack/template-app-react-js/AGENTS.md
diff --git a/packages/create-rstack/template-app-react-js/package.json b/packages/create-rstack/template-app-react-js/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "rstack-app-react-js",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "rs build",
+    "dev": "rs dev --open",
+    "preview": "rs preview"
+  },
+  "dependencies": {
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-react": "^2.1.0",
+    "rstack": "^0.3.5"
+  }
+}
diff --git a/packages/create-rstack/template-app-react-js/rstack.config.js b/packages/create-rstack/template-app-react-js/rstack.config.js
@@ -0,0 +1,11 @@
+// @ts-check
+// Rstack configuration guide: https://rstack.rs/config
+import { define } from 'rstack';
+
+define.app(async () => {
+  const { pluginReact } = await import('@rsbuild/plugin-react');
+
+  return {
+    plugins: [pluginReact()],
+  };
+});
diff --git a/...eate-rstack/template-app-js/src/index.css → ...-rstack/template-app-react-js/src/App.css b/...eate-rstack/template-app-js/src/index.css → ...-rstack/template-app-react-js/src/App.css
diff --git a/packages/create-rstack/template-app-react-js/src/App.jsx b/packages/create-rstack/template-app-react-js/src/App.jsx
@@ -0,0 +1,12 @@
+import './App.css';
+
+const App = () => {
+  return (
+    <div className="content">
+      <h1>Rstack with React</h1>
+      <p>Start building amazing things with Rstack.</p>
+    </div>
+  );
+};
+
+export default App;
diff --git a/packages/create-rstack/template-app-react-js/src/index.jsx b/packages/create-rstack/template-app-react-js/src/index.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/...s/create-rstack/template-app-ts/AGENTS.md → ...te-rstack/template-app-react-ts/AGENTS.md b/...s/create-rstack/template-app-ts/AGENTS.md → ...te-rstack/template-app-react-ts/AGENTS.md
diff --git a/packages/create-rstack/template-app-react-ts/package.json b/packages/create-rstack/template-app-react-ts/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "rstack-app-react-ts",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "rs build",
+    "dev": "rs dev --open",
+    "preview": "rs preview"
+  },
+  "dependencies": {
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-react": "^2.1.0",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "rstack": "^0.3.5",
+    "typescript": "^7.0.2"
+  }
+}
diff --git a/packages/create-rstack/template-app-react-ts/rstack.config.ts b/packages/create-rstack/template-app-react-ts/rstack.config.ts
@@ -0,0 +1,10 @@
+// Rstack configuration guide: https://rstack.rs/config
+import { define } from 'rstack';
+
+define.app(async () => {
+  const { pluginReact } = await import('@rsbuild/plugin-react');
+
+  return {
+    plugins: [pluginReact()],
+  };
+});
diff --git a/...eate-rstack/template-app-ts/src/index.css → ...-rstack/template-app-react-ts/src/App.css b/...eate-rstack/template-app-ts/src/index.css → ...-rstack/template-app-react-ts/src/App.css
diff --git a/packages/create-rstack/template-app-react-ts/src/App.tsx b/packages/create-rstack/template-app-react-ts/src/App.tsx
@@ -0,0 +1,12 @@
+import './App.css';
+
+const App = () => {
+  return (
+    <div className="content">
+      <h1>Rstack with React</h1>
+      <p>Start building amazing things with Rstack.</p>
+    </div>
+  );
+};
+
+export default App;
diff --git a/packages/create-rstack/template-app-react-ts/src/env.d.ts b/packages/create-rstack/template-app-react-ts/src/env.d.ts
@@ -0,0 +1,9 @@
+/**
+ * Imports the SVG file as a React component.
+ * @requires [@rsbuild/plugin-svgr](https://npmjs.com/package/@rsbuild/plugin-svgr)
+ */
+declare module '*.svg?react' {
+  import type React from 'react';
+  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  export default ReactComponent;
+}
diff --git a/packages/create-rstack/template-app-react-ts/src/index.tsx b/packages/create-rstack/template-app-react-ts/src/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootEl = document.getElementById('root');
+if (rootEl) {
+  const root = ReactDOM.createRoot(rootEl);
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>,
+  );
+}
diff --git a/packages/create-rstack/template-app-react-ts/tsconfig.json b/packages/create-rstack/template-app-react-ts/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "lib": ["DOM", "ES2020"],
+    "jsx": "react-jsx",
+    "target": "ES2020",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "types": ["rstack/types", "node"],
+    "useDefineForClassFields": true,
+
+    /* modules */
+    "moduleDetection": "force",
+    "moduleResolution": "bundler",
+    "verbatimModuleSyntax": true,
+    "resolveJsonModule": true,
+    "allowImportingTsExtensions": true,
+
+    /* type checking */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "include": ["src"]
+}
diff --git a/packages/create-rstack/template-app-vanilla-js/AGENTS.md b/packages/create-rstack/template-app-vanilla-js/AGENTS.md
@@ -0,0 +1,12 @@
+# AGENTS.md
+
+## Commands
+
+- `{{ packageManager }} run dev` - Start the development server
+- `{{ packageManager }} run build` - Build the app for production
+- `{{ packageManager }} run preview` - Preview the production build locally
+
+## Docs
+
+- Rsbuild: https://rsbuild.rs/llms.txt
+- Rspack: https://rspack.rs/llms.txt
diff --git a/...reate-rstack/template-app-js/package.json → ...tack/template-app-vanilla-js/package.json b/...reate-rstack/template-app-js/package.json → ...tack/template-app-vanilla-js/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "rstack-app-js",
+  "name": "rstack-app-vanilla-js",
   "version": "1.0.0",
   "private": true,
   "type": "module",

diff --git a/...e-rstack/template-app-js/rstack.config.js → .../template-app-vanilla-js/rstack.config.js b/...e-rstack/template-app-js/rstack.config.js → .../template-app-vanilla-js/rstack.config.js
diff --git a/packages/create-rstack/template-app-vanilla-js/src/index.css b/packages/create-rstack/template-app-vanilla-js/src/index.css
@@ -0,0 +1,26 @@
+body {
+  margin: 0;
+  color: #fff;
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  background-image: linear-gradient(to bottom, #020917, #101725);
+}
+
+.content {
+  display: flex;
+  min-height: 100vh;
+  line-height: 1.1;
+  text-align: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.content h1 {
+  font-size: 3.6rem;
+  font-weight: 700;
+}
+
+.content p {
+  font-size: 1.2rem;
+  font-weight: 400;
+  opacity: 0.5;
+}
diff --git a/...reate-rstack/template-app-js/src/index.js → ...tack/template-app-vanilla-js/src/index.js b/...reate-rstack/template-app-js/src/index.js → ...tack/template-app-vanilla-js/src/index.js
@@ -5,7 +5,7 @@ const rootElement = document.querySelector('#root');
 if (rootElement) {
   rootElement.innerHTML = `
     <main class="content">
-      <h1>Rstack</h1>
+      <h1>Vanilla Rstack</h1>
       <p>Start building amazing things with Rstack.</p>
     </main>
   `;

diff --git a/packages/create-rstack/template-app-vanilla-ts/AGENTS.md b/packages/create-rstack/template-app-vanilla-ts/AGENTS.md
@@ -0,0 +1,12 @@
+# AGENTS.md
+
+## Commands
+
+- `{{ packageManager }} run dev` - Start the development server
+- `{{ packageManager }} run build` - Build the app for production
+- `{{ packageManager }} run preview` - Preview the production build locally
+
+## Docs
+
+- Rsbuild: https://rsbuild.rs/llms.txt
+- Rspack: https://rspack.rs/llms.txt
diff --git a/...reate-rstack/template-app-ts/package.json → ...tack/template-app-vanilla-ts/package.json b/...reate-rstack/template-app-ts/package.json → ...tack/template-app-vanilla-ts/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "rstack-app-ts",
+  "name": "rstack-app-vanilla-ts",
   "version": "1.0.0",
   "private": true,
   "type": "module",

diff --git a/...e-rstack/template-app-ts/rstack.config.ts → .../template-app-vanilla-ts/rstack.config.ts b/...e-rstack/template-app-ts/rstack.config.ts → .../template-app-vanilla-ts/rstack.config.ts
diff --git a/packages/create-rstack/template-app-vanilla-ts/src/index.css b/packages/create-rstack/template-app-vanilla-ts/src/index.css
@@ -0,0 +1,26 @@
+body {
+  margin: 0;
+  color: #fff;
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  background-image: linear-gradient(to bottom, #020917, #101725);
+}
+
+.content {
+  display: flex;
+  min-height: 100vh;
+  line-height: 1.1;
+  text-align: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.content h1 {
+  font-size: 3.6rem;
+  font-weight: 700;
+}
+
+.content p {
+  font-size: 1.2rem;
+  font-weight: 400;
+  opacity: 0.5;
+}
diff --git a/...reate-rstack/template-app-ts/src/index.ts → ...tack/template-app-vanilla-ts/src/index.ts b/...reate-rstack/template-app-ts/src/index.ts → ...tack/template-app-vanilla-ts/src/index.ts
@@ -5,7 +5,7 @@ const rootElement = document.querySelector('#root');
 if (rootElement) {
   rootElement.innerHTML = `
     <main class="content">
-      <h1>Rstack</h1>
+      <h1>Vanilla Rstack</h1>
       <p>Start building amazing things with Rstack.</p>
     </main>
   `;

diff --git a/...eate-rstack/template-app-ts/tsconfig.json → ...ack/template-app-vanilla-ts/tsconfig.json b/...eate-rstack/template-app-ts/tsconfig.json → ...ack/template-app-vanilla-ts/tsconfig.json