# How to Integrate Bolt.new with Visual Studio Code - Tool: Bolt.new - Difficulty: Beginner - Time required: 15 minutes - Last updated: April 2026 ## TL;DR To use Bolt.new with VS Code, export your project as a ZIP or push it to GitHub, then open it locally in VS Code. Bolt generates standard Vite or Next.js projects that work with any local editor. Once exported, you can install native Node.js modules, run full TCP database drivers, use VS Code extensions, and debug with DevTools — capabilities unavailable in Bolt's browser-based WebContainer. ## Why export from Bolt.new to VS Code? Bolt.new's browser-based WebContainer is a powerful rapid-prototyping environment, but it runs inside a browser tab, which imposes real constraints. Native Node.js modules that require C/C++ compilation — like `sharp`, `bcrypt`, `canvas`, and most native database drivers — cannot run in the WebContainer. Storage is ephemeral: files vanish on refresh. Incoming webhooks cannot reach a browser-hosted preview URL. And as your project grows past 15–20 components, the AI context window fills up and editing becomes unreliable. VS Code removes every one of those constraints. Once you export your Bolt project and open it locally, you can install any npm package including native binaries, connect directly to PostgreSQL or MongoDB via TCP, persist files to disk, receive webhooks on localhost via tools like ngrok, and use the full VS Code extension marketplace — ESLint, Prettier, GitLens, REST Client, Tailwind IntelliSense, and hundreds more. The codebase Bolt generates is 100% standard — there is no Bolt-specific runtime, no proprietary config, and no vendor lock-in. The recommended workflow for serious projects is to start fast in Bolt.new, get to a working prototype, then export to VS Code for the remaining 20–30% of work that requires local capabilities. You can maintain a two-way sync using GitHub: push your VS Code changes upstream and Bolt can pull them back in when you want AI assistance again. This hybrid approach gives you the best of both worlds — AI-accelerated scaffolding and full local development power. ## Before you start - A Bolt.new account (free or paid) with an existing project - Visual Studio Code installed (download at code.visualstudio.com) - Node.js 18+ installed locally (download at nodejs.org) - A GitHub account if you want to use the GitHub sync method - Basic familiarity with opening a terminal or command prompt ## Step-by-step guide ### 1. Export your Bolt.new project 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. **Expected result:** You have either a downloaded ZIP file or a cloned GitHub repository containing your Bolt project's source code on your local machine. ### 2. Open the project in VS Code and install dependencies 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. ``` # Install dependencies npm install # Start the development server (Vite default) npm run dev # OR for Next.js projects npm run dev # Opens at http://localhost:3000 ``` **Expected result:** The development server is running at localhost:5173 or localhost:3000, and your app looks identical to the Bolt.new preview. ### 3. Configure your local environment variables 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. ``` # .env (Vite project — Bolt default) VITE_SUPABASE_URL=https://your-project.supabase.co VITE_SUPABASE_ANON_KEY=your_anon_key_here VITE_API_BASE_URL=https://api.yourservice.com # .env (Next.js project) NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key_here # Server-only (no prefix): SUPABASE_SERVICE_ROLE_KEY=your_service_role_key OPENAI_API_KEY=sk-your-key-here ``` **Expected result:** Your local app connects to all external services correctly — no 'missing environment variable' errors in the console. ### 4. Install recommended VS Code extensions for Bolt-generated code 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. ``` # Install extensions via VS Code command line code --install-extension bradlc.vscode-tailwindcss code --install-extension esbenp.prettier-vscode code --install-extension dbaeumer.vscode-eslint code --install-extension eamodio.vscode-gitlens code --install-extension humao.rest-client ``` **Expected result:** Tailwind class autocomplete, TypeScript error highlighting, and auto-formatting on save are all working in VS Code. ### 5. Sync changes back to Bolt.new via GitHub 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. ``` # In your local VS Code terminal: # Stage and commit your local changes git add -A git commit -m "feat: add image processing with sharp package" # Push to GitHub (syncs back to Bolt.new) git push origin main # If you created a feature branch, merge first: git checkout main git merge feature/image-processing git push origin main ``` **Expected result:** Your local changes are visible in the Bolt.new editor after pulling from GitHub, and the AI can reference your updated code for further assistance. ## Best practices - Export to VS Code as soon as your project reaches the 70% complete mark — the final 20-30% is usually faster and more reliable in a local editor - Always run 'npm run build' immediately after exporting to catch TypeScript errors and missing dependencies before you start local development - Use the GitHub sync method rather than ZIP export for any project you plan to iterate on — it preserves history and enables returning to Bolt for AI assistance - Create a .env.example file documenting all required environment variables so collaborators (or future you) can set up the project correctly - Install the Tailwind CSS IntelliSense VS Code extension immediately — Bolt generates Tailwind-heavy code and the autocomplete alone saves hours of development time - Keep native-module-dependent features in separate service files so they are easy to identify as 'local only' code that cannot be run back in Bolt's WebContainer - Use VS Code's built-in debugger with the Vite or Next.js debug config to step through Bolt-generated code rather than relying on console.log statements - Set up ESLint and Prettier using the configuration files Bolt generates — this ensures your local coding style stays consistent with what Bolt produces ## Use cases ### Installing native npm packages blocked by WebContainer Some npm packages like `sharp` for image processing, `bcrypt` for password hashing, and `canvas` for server-side rendering require native C/C++ compilation via `node-gyp`. These fail silently or throw errors in Bolt's WebContainer. By exporting to VS Code and running locally, you can install and use any package in the npm registry. Prompt example: ``` My app needs to resize uploaded images server-side. Export the project so I can install the 'sharp' package locally in VS Code, since native modules don't work in the WebContainer. ``` ### Debugging complex state and network issues When your Bolt app has a bug that the AI cannot resolve after two or three attempts, exporting to VS Code lets you use breakpoints, the Node.js debugger, and React DevTools to pinpoint the exact problem. VS Code's debugger attaches directly to the Vite dev server or Next.js server process. Prompt example: ``` I need to debug why my authentication flow is failing. Please export the project to GitHub so I can clone it and use VS Code's debugger to step through the login function. ``` ### Adding a TCP-based database driver for local development Once exported from Bolt, you can use standard PostgreSQL (`pg`), MySQL (`mysql2`), or MongoDB (`mongoose`) drivers that require TCP sockets — unavailable in the WebContainer. This is ideal for teams that already have a database server running locally or on a private network. Prompt example: ``` I want to connect my app to a local PostgreSQL database using the 'pg' driver. Export the project so I can set this up in VS Code — the WebContainer doesn't support TCP connections. ``` ## Troubleshooting ### npm install fails with 'node-gyp' or 'prebuild' errors after export Cause: Some packages in the Bolt project include native binary dependencies that require build tools. On Windows, this often means Visual Studio Build Tools are missing. On macOS, Xcode Command Line Tools may be needed. Solution: On macOS, run 'xcode-select --install' in the terminal. On Windows, run 'npm install --global windows-build-tools' as administrator. Alternatively, identify which package requires native compilation and replace it with a pure JavaScript alternative. ``` # macOS: install build tools xcode-select --install # Windows: install build tools (run as admin) npm install --global windows-build-tools # Or skip optional native dependencies: npm install --ignore-scripts ``` ### Environment variables are undefined — app shows 'undefined' for API keys Cause: The .env file is missing from the project root, or Vite variables are missing the required VITE_ prefix. Bolt's Secrets panel values are not exported to the ZIP for security reasons and must be recreated manually. Solution: Create a .env file in the project root (same level as package.json). For Vite projects, all client-side variables must start with VITE_. Restart the dev server after creating or editing .env — Vite does not hot-reload environment variable changes. ``` # Check for missing .env file ls -la | grep .env # Create .env with correct Vite prefix echo 'VITE_API_KEY=your_key_here' > .env # Restart dev server to pick up new variables # Ctrl+C to stop, then: npm run dev ``` ### Git push fails with 'remote origin already exists' or authentication errors Cause: When downloading as ZIP, there is no Git history. When Bolt pushes to GitHub, the remote is set up with Bolt's OAuth token, which does not work for your local Git client. Solution: Initialize a new Git repository in the extracted folder, or update the remote URL to use your own GitHub credentials. If using the GitHub CLI, 'gh auth login' establishes proper authentication. ``` # For a fresh ZIP export — initialize git: git init git add -A git commit -m "initial commit from Bolt.new export" git remote add origin https://github.com/yourusername/your-repo.git git push -u origin main # Or authenticate via GitHub CLI: gh auth login ``` ## Frequently asked questions ### Can I use VS Code extensions like GitHub Copilot with my Bolt.new-exported project? Yes, absolutely. Once you export your Bolt project and open it in VS Code, it is a completely standard JavaScript/TypeScript project. GitHub Copilot, Tabnine, Codeium, and any other AI coding assistant works normally. The exported code has no Bolt-specific runtime dependencies. ### Does exporting to VS Code break the Bolt.new AI assistant connection? No — exporting does not affect your Bolt project. The original project remains in Bolt.new unchanged. If you use the GitHub sync method, you can push local VS Code changes back to GitHub and pull them into Bolt, maintaining a two-way connection. The ZIP export method is a one-way snapshot. ### Why does my app work in Bolt.new but break after I export and run it locally? The most common cause is missing environment variables. Bolt's Secrets panel values are not exported for security reasons — you must recreate them in a local .env file. Also check that you ran 'npm install' after extracting the ZIP, as node_modules is never included in the export. ### Can I use native Node.js modules like 'sharp' or 'bcrypt' after exporting to VS Code? Yes. Native modules that require C/C++ compilation are blocked in Bolt's WebContainer but work perfectly in a local VS Code environment. Run 'npm install sharp' (or whichever package you need) after exporting, and it will install and run normally. You will need Node.js build tools installed on your machine. ### How do I keep my VS Code local copy in sync with changes made in Bolt.new? Connect both environments through GitHub. In Bolt, push changes to your GitHub repository. Locally in VS Code, run 'git pull origin main' to fetch the latest Bolt-generated code. This two-way sync works as long as you avoid editing the same files simultaneously in both environments, which would cause merge conflicts. --- Source: https://www.rapidevelopers.com/bolt-ai-integrations/visual-studio-code © RapidDev — https://www.rapidevelopers.com/bolt-ai-integrations/visual-studio-code