VS Code React Webview Boilerplate

🚀 Automated setup script for VS Code extensions with React + Vite + Tailwind CSS + Shadcn/UI webviews.

✨ Features

• One-command setup - Complete automation from start to finish
• Modern stack - React 18, TypeScript, Vite, Tailwind CSS, Shadcn/UI
• Hot reload - Instant feedback during development
• Production-ready - esbuild bundler with optimized builds
• Path aliases - Clean imports with @/ prefix
• Dark mode - Automatic theme integration
• Example components - Pre-configured Shadcn components (Button, Card)

🚀 Quick Start

Option 1: Use with npx (Recommended)

npx vscode-webview-boilerplate

Option 2: Global Installation

npm install -g vscode-webview-boilerplate
vscode-webview-setup

Option 3: Local Installation

npm install vscode-webview-boilerplate
node node_modules/vscode-webview-boilerplate/setup.js

📋 What It Does

The script automates the entire setup process:

1. Creates VS Code extension (or adds to existing one)
2. Sets up React + Vite webview project
3. Configures TypeScript with path aliases
4. Installs Tailwind CSS with dark mode support
5. Sets up Shadcn/UI component library
6. Copies pre-built components (Button, Card, utils)
7. Configures bundlers (esbuild for extension, Vite for webview)
8. Sets up hot reload for instant development feedback
9. Updates package.json with VS Code contributes
10. Patches extension.ts with WebviewProvider registration
11. Creates development tasks for watch mode

🎯 Requirements

• Node.js 18+
• npm 7+
• VS Code (for testing)

💡 Usage

After running the script, you'll be guided through:

1. Project type - New project or existing extension
2. Webview configuration - View ID, title, location
3. Optional setup - Tailwind CSS and Shadcn/UI
4. Integration - Automatic or manual file updates

New Project

npx vscode-webview-boilerplate
# Choose "Create a new project from scratch"
# Follow the yo code wizard instructions

Existing Extension

cd your-existing-extension
npx vscode-webview-boilerplate
# Choose "I already have an extension project"

🛠️ Post-Setup Commands

# Development mode (watch + hot reload)
npm run watch

# Build for production
npm run compile

# Test extension
Press F5 in VS Code

📦 What's Included

Configuration Files

• esbuild.js - Extension bundler
• vite.config.ts - Webview bundler
• .vscode/tasks.json - Parallel watch tasks
• tsconfig.json - TypeScript configuration

Template Files

• WebviewProvider.ts - Webview provider with hot reload
• App.tsx - React entry point with Shadcn example
• index.css - Tailwind + Shadcn variables
• components/ui/ - Shadcn components (Button, Card)
• lib/utils.ts - Utility functions (cn helper)

🎨 Customization

After setup, you can:

• Add more Shadcn components: npx shadcn@latest add <component>
• Modify theme: Edit CSS variables in index.css
• Add routes: Install react-router-dom for multi-page webviews
• State management: Add Zustand, Jotai, or Redux
• API calls: Use vscode.postMessage() for extension communication

🔧 Troubleshooting

Build errors

npm run clean  # Remove dist folder
npm run compile

Webview not loading

• Check browser console in webview (Ctrl+Shift+I)
• Verify dist/webview/ contains built files
• Ensure view ID matches in all files

Hot reload not working

• Restart watch mode: npm run watch
• Check terminal for build errors
• Verify Vite dev server is running on port 5173

📚 Documentation

For detailed technical documentation, see:

• templates/README.md - Template file reference

🤝 Contributing

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

📄 License

MIT License - See LICENSE for details

🔗 Links

• VS Code Extension API
• Webview API Guide
• React Documentation
• Vite Documentation
• Tailwind CSS
• Shadcn/UI