create-react-webview

TL;DR: An interactive CLI to scaffold VS Code extensions with React webviews. Get hot reload in development and a secure production build instantly.

Features

✨ Interactive CLI - Colorful prompts guide you through setup
🚀 Modern Stack - TypeScript, React 18+, and Vite out of the box
🔥 Hot Reload - HMR with React Fast Refresh in development
🔒 Production Ready - Secure CSP-compliant bundle
📦 Pre-configured - ESLint, TypeScript, and best practices included

Quick Start

Using npm (recommended)

npm create react-webview

With a project name

npm create react-webview my-extension

Alternative package managers

# pnpm
pnpm create react-webview

# yarn
yarn create react-webview

# npx
npx create-react-webview

Ready for Development

• Extension code in TypeScript ready to customize
• React webview with Vite configured for hot reload
• Pre-built scripts for dev, build, and test
• Content Security Policy (CSP) safe in production

How It Works

Development Mode

• Hot Module Replacement (HMR) via Vite for instant feedback
• Vite dev server runs on localhost:5174
• React Fast Refresh enabled for seamless updates
• Wide-open CORS for local development

Production Mode

• Secure bundle with strict Content Security Policy
• No unsafe-eval - production-ready security
• Asset URLs rewritten with webview.asWebviewUri()
• Minified and optimized build

Start Developing

After scaffolding:

cd my-extension
code .

In one terminal - Start the dev server

cd webview
npm run dev

In VS Code - Press F5

This launches the Extension Development Host. Run the Hello World command from the Command Palette to see your React app in the Webview with Hot Reload enabled!

Understanding the Template

For a detailed deep-dive into how this template works, including architecture, security considerations, and implementation details, read:

📖 How to use React with a VSCode Webview

Build for Production

cd webview
npm run build

Then publish to the VS Code Marketplace following the official guide.

Next Steps

1. ✏️ Customize the UI in webview/src/App.tsx
2. 🔧 Add extension logic in src/extension.ts
3. 💬 Implement webview/extension communication
4. 🚀 Publish to the VS Code Marketplace

Learn More

• VS Code Extension API
• Webview API
• React Documentation
• Vite Documentation

⭐️ If you found this helpful, consider starring the repo!

License

MIT