How to Integrate Bolt.new with Visual Studio Code

There are two ways to export your Bolt project to your local machine. The first and fastest method is the ZIP download: click the three-dot menu (or the download icon) in the top-right area of the Bolt editor, select 'Download project', and Bolt will package your entire project — including all source files, configuration, and package.json — into a ZIP archive. Your browser will download it automatically, usually in under 10 seconds. The second method, which is better for ongoing development, is the GitHub integration. In Bolt, click the GitHub icon in the top navigation bar and follow the OAuth flow to connect your GitHub account. Once connected, click 'Push to GitHub' and Bolt will create a new repository (or push to an existing one) with your entire project. You can then clone this repository to your local machine using VS Code's built-in 'Clone Repository' command (open VS Code → Ctrl+Shift+P → 'Git: Clone'). If you have a large project or have been working for a while, prefer the GitHub route: it gives you a complete commit history, makes it easy to pull future Bolt changes into your local environment, and lets you use GitHub Actions for CI/CD. The ZIP method is faster for one-off exports when you just want to continue locally without planning to sync back to Bolt.

If you downloaded a ZIP, extract it to a folder of your choice. Avoid paths with spaces or special characters. Open VS Code, go to File → Open Folder, and select the extracted project folder. VS Code will detect the project type and may offer to install recommended extensions — accept these suggestions, as they typically include TypeScript, Tailwind CSS IntelliSense, and ESLint plugins that match how Bolt generates code. If you cloned from GitHub, VS Code will already have the folder open after cloning. Either way, open the integrated terminal (Ctrl+` backtick) and run the dependency install command. Bolt projects always include a package.json with all dependencies listed, so a single install command restores the entire node_modules directory. After installation completes, you can start the local development server. For Vite projects (the Bolt default), the dev command starts a local server at http://localhost:5173. For Next.js projects, it starts at http://localhost:3000. Your browser will open the app automatically, and you will see it running locally — identical to the Bolt preview, but now on your own machine with full Node.js capabilities.

1# Install dependencies
2npm install
3
4# Start the development server (Vite default)
5npm run dev
6
7# OR for Next.js projects
8npm run dev
9# Opens at http://localhost:3000

Bolt.new manages environment variables through its Secrets UI and .env file conventions. When you export the project, any variables already defined in Bolt's .env file will be included in the export — but sensitive credentials like API keys stored in Bolt's Secrets panel are NOT exported for security reasons. You will need to recreate these locally. Create a file named `.env` in the project root (the same folder as package.json). For Vite projects (the Bolt default), prefix client-exposed variables with `VITE_` so they are bundled into the frontend code. For Next.js projects, use `NEXT_PUBLIC_` for client-side variables and no prefix for server-side only variables. Never commit the .env file to Git — Bolt's exported projects already include a `.gitignore` that excludes it. Common variables you will need to fill in include your Supabase URL and anon key, any third-party API keys your integration uses, and feature flag values. Check the Bolt-generated code for `import.meta.env.VITE_*` or `process.env.*` references to find all required variables. VS Code's search-across-files feature (Ctrl+Shift+F) makes this easy — search for `import.meta.env` to find every environment variable reference in the project.

1# .env (Vite project — Bolt default)
2VITE_SUPABASE_URL=https://your-project.supabase.co
3VITE_SUPABASE_ANON_KEY=your_anon_key_here
4VITE_API_BASE_URL=https://api.yourservice.com
5
6# .env (Next.js project)
7NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
8NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key_here
9# Server-only (no prefix):
10SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
11OPENAI_API_KEY=sk-your-key-here

Bolt generates TypeScript + Tailwind CSS + React code, and VS Code has a first-class extension ecosystem for exactly this stack. Installing the right extensions dramatically improves your development experience with Bolt-exported projects. The most valuable extensions for Bolt-generated code are: Tailwind CSS IntelliSense (bradlc.vscode-tailwindcss) — provides autocomplete, hover previews, and linting for every Tailwind class; Prettier (esbenp.prettier-vscode) — auto-formats TypeScript and JSX on save, matching Bolt's code style; ESLint (dbaeumer.vscode-eslint) — catches TypeScript errors and code quality issues in real time; GitLens (eamodio.vscode-gitlens) — enhances Git history visualization, useful for tracking Bolt commits vs your own; and Thunder Client or REST Client — lightweight API testing directly inside VS Code, useful for testing your API routes. For React development, the React Developer Tools browser extension (separate from VS Code) is invaluable for inspecting component state and props — something you cannot do easily in Bolt's preview. With full local development access, you can also run `npm run build` at any time to catch production build errors early, before deploying to Netlify or Bolt Cloud. This is especially important because Bolt's WebContainer preview runs in development mode and may hide errors that only appear in production builds.

1# Install extensions via VS Code command line
2code --install-extension bradlc.vscode-tailwindcss
3code --install-extension esbenp.prettier-vscode
4code --install-extension dbaeumer.vscode-eslint
5code --install-extension eamodio.vscode-gitlens
6code --install-extension humao.rest-client

If you want to continue using Bolt.new's AI assistance after making local changes in VS Code, the GitHub integration provides a clean two-way sync path. Commit your VS Code changes to the connected GitHub repository and push them to the main branch. Then, in Bolt.new, use the GitHub panel to pull the latest changes — your Bolt project will update to reflect everything you did locally. This workflow is powerful for the common pattern of: (1) scaffolding quickly in Bolt, (2) handling complex or native-module-dependent features locally in VS Code, (3) returning to Bolt for AI-assisted UI or feature additions. Keep the sync clean by using feature branches — make local changes on a branch, merge to main when done, and pull in Bolt. One important caveat: Bolt.new currently syncs with the default branch (usually `main`). If you are working on a feature branch locally, you need to merge it to main before Bolt will pick up the changes. Also note that Bolt cannot run native modules even after pulling them from GitHub — the WebContainer will still fail to load packages that require C/C++ compilation. You can view the code in Bolt, but to run native packages you must return to your local VS Code environment. Keep this limitation in mind when deciding which features to develop where.

1# In your local VS Code terminal:
2
3# Stage and commit your local changes
4git add -A
5git commit -m "feat: add image processing with sharp package"
6
7# Push to GitHub (syncs back to Bolt.new)
8git push origin main
9
10# If you created a feature branch, merge first:
11git checkout main
12git merge feature/image-processing
13git push origin main