How to Integrate Bolt.new with Sublime Text

Bolt.new generates code in a browser-based WebContainer environment with no direct connection to local editors. To work on Bolt code in Sublime Text, you need to get the project files onto your local machine first. There are two methods: ZIP export and GitHub clone. ZIP export (faster for a one-time export): click the download icon in Bolt's toolbar to download the project as a ZIP archive. Extract it to a dedicated folder on your machine — something like ~/projects/bolt-exports/your-project-name/. This gives you all project files immediately. GitHub clone (better for ongoing sync): use Bolt's Git panel to push the project to GitHub if you have not already. Then clone the repository locally. This approach is preferred for active projects because you can pull Bolt updates and push local changes without downloading new ZIPs each time. Opening the project in Sublime Text: do NOT just open individual files — open the entire project folder. Use File > Open Folder (macOS/Linux) or Project > Add Folder to Project. Opening as a folder enables the sidebar file tree, project-wide search (Shift+Cmd+F on macOS), and Goto Anything (Cmd+P) — features that make navigating multi-file Bolt projects much more efficient. For a better multi-session experience, save the folder as a Sublime Text project: Project > Save Project As. Give it a name like 'my-bolt-app.sublime-project.' A .sublime-project file (JSON format) is created alongside the optional .sublime-workspace file which remembers open files and cursor positions. Add .sublime-workspace to your .gitignore (it contains local state that should not be committed), but the .sublime-project file can optionally be committed if your team uses Sublime Text. After opening the folder, run npm install in a terminal to install dependencies before editing — otherwise Sublime's package intelligence features will not find the TypeScript types.

1# Open project folder from terminal (macOS):
2subl ~/projects/bolt-exports/your-project-name
3# or on any platform:
4# drag the folder onto the Sublime Text icon in Dock/Taskbar
5
6# Install dependencies first:
7cd ~/projects/bolt-exports/your-project-name
8npm install
9
10# Add .sublime-workspace to .gitignore:
11echo '.sublime-workspace' >> .gitignore

Sublime Text's default installation understands JavaScript and basic syntax, but Bolt-generated projects use TypeScript, JSX, Tailwind CSS utility classes, and modern React patterns that benefit from dedicated package support. Package Control is Sublime Text's package manager — you install it once and use it for all subsequent package installations. To install Package Control (if not already installed): go to Tools > Install Package Control or visit packagecontrol.io and follow the installation instructions. Package Control adds itself to Sublime Text's command palette. Install packages via: Command Palette (Cmd+Shift+P on macOS, Ctrl+Shift+P on Windows/Linux) > type 'Install Package' > select 'Package Control: Install Package' > search for the package name. Recommended packages for Bolt TypeScript/React projects: - **TypeScript**: Adds TypeScript syntax highlighting, basic completion, and error indicators for .ts and .tsx files. This is the most important package for Bolt projects — without it, TypeScript files lack proper syntax highlighting. - **Babel**: Enhanced syntax highlighting for modern JavaScript including JSX. Works alongside the TypeScript package for .tsx files. - **SublimeLinter + SublimeLinter-eslint**: Inline ESLint error display using your project's .eslintrc configuration (which Bolt generates automatically). SublimeLinter is the framework; SublimeLinter-eslint is the ESLint-specific plugin. You also need ESLint installed in node_modules (it is, for Bolt projects). - **Tailwind CSS Autocomplete**: Search for 'Tailwind CSS' in Package Control — there are several options. Look for one with recent updates that supports Tailwind v3 or v4 class completion within JSX className attributes. - **GitGutter**: Shows Git diff indicators in the gutter (green lines for additions, red triangles for deletions, yellow for modifications). Helps you see what changed since the last commit when reviewing Bolt-generated code. - **Emmet**: Fast HTML/JSX expansion using abbreviations. Not essential for Bolt projects (you are usually editing generated code, not writing from scratch), but useful if you frequently add JSX structure manually.

1# Package Control installs packages through the Sublime Text GUI.
2# But you can also install packages via the command line using
3# Sublime Text's package manager programmatically:
4
5# Packages are stored in:
6# macOS: ~/Library/Application Support/Sublime Text/Packages/
7# Windows: %APPDATA%\Sublime Text\Packages\
8# Linux: ~/.config/sublime-text/Packages/
9
10# After installing packages, verify TypeScript syntax is working by:
11# 1. Opening any .tsx file from the Bolt project
12# 2. Checking the bottom-right corner shows 'TypeScript' or 'TypeScript JSX'
13# 3. Checking that import statements and type annotations have syntax highlighting

Unlike VS Code, Sublime Text does not have a built-in terminal. Running the Bolt project's development server (npm run dev) requires either a separate terminal window or Sublime Text's build system feature — which can run shell commands and show output in a panel at the bottom of the editor. Sublime Text build systems are defined in JSON files with a .sublime-build extension, stored in the Packages/User/ directory or inside the project's .sublime-project file. A build system for a Bolt Vite project runs npm run dev and shows the output in Sublime's console panel. However, the build system panel in Sublime Text is not a full interactive terminal — it shows output but does not support input well. It works for running builds (npm run build) but may feel limited compared to a full terminal for an interactive dev server. Many Sublime Text users prefer running the dev server in a dedicated terminal window (iTerm2, Windows Terminal) alongside Sublime, keeping the two windows side by side. For running npm run build (one-time, not interactive): add this as a Sublime build system and trigger it with Cmd+B. The output appears in the console panel (Ctrl+`) and shows compilation errors from TypeScript and Vite. This is useful as a quick build check before committing. The .boltignore file pattern (similar to .gitignore) can reduce token usage by up to 70% when you eventually bring the edited project back to Bolt. If you do heavy local editing in Sublime, the Bolt AI will need to understand your changes — keeping the project modular with clear component boundaries helps Bolt's context window focus on the relevant parts.

1// Build system for Bolt Vite project:
2// Save as: Packages/User/BoltVite.sublime-build
3// Or add inside .sublime-project under "build_systems":
4{
5  "name": "Bolt - Vite Dev Server",
6  "cmd": ["npm", "run", "dev"],
7  "working_dir": "$project_path",
8  "shell": false,
9  "variants": [
10    {
11      "name": "Build",
12      "cmd": ["npm", "run", "build"]
13    },
14    {
15      "name": "Type Check",
16      "cmd": ["npx", "tsc", "--noEmit"]
17    }
18  ]
19}

Sublime Text's most distinctive features become very useful when working with Bolt-generated code that contains repetitive patterns — component props, Tailwind class arrays, JSON data arrays. Learning these features significantly speeds up editing sessions. Goto Anything (Cmd+P on macOS, Ctrl+P on Windows): instant fuzzy file search by filename or path. Type 'dashboard' to jump to any file with 'dashboard' in its name. Type '@' after entering a filename to search symbols (function names, class names) within that file. This is how you navigate quickly between the 20-50 component files that a typical Bolt project generates. Multiple selections (the most powerful Sublime feature for Bolt code): select any text, then press Cmd+D to add the next occurrence of the same text to the selection, or Cmd+G to select all occurrences in the file. All selected instances edit simultaneously. This is perfect for renaming a prop that appears 15 times in a component, updating repeated Tailwind class patterns, or fixing the same error in multiple similar components without search-and-replace. Column selection (Option+drag on macOS, Alt+drag on Windows): drag vertically to select a column of text across multiple lines. Useful for editing JSON arrays that Bolt sometimes generates, or for adding/removing the same prefix to multiple lines simultaneously. Command palette (Cmd+Shift+P): access any Sublime command or installed package feature. Type 'Sort Lines' to alphabetize imports, 'Reindent' to fix code formatting, or 'Set Syntax' to correct misidentified file types. For syncing back to Bolt: once you are satisfied with local Sublime edits, use the terminal to git add, commit, and push to GitHub. Then pull the changes in Bolt's Git panel. The Bolt AI will incorporate your local edits into its context for subsequent prompts.

1// Common Sublime Text keyboard shortcuts for Bolt code editing:
2// Cmd+P (macOS) / Ctrl+P (Windows)  - Goto Anything: jump to any file
3// Cmd+D  - Select next occurrence of current word
4// Cmd+G (macOS) / Alt+F3 (Windows)  - Select all occurrences of current word
5// Cmd+Shift+F  - Project-wide search (searches all files)
6// Cmd+R  - Goto Symbol: jump to function/class in current file
7// Cmd+Shift+P  - Command palette
8// Option+drag (macOS) / Alt+drag (Windows)  - Column selection
9// Ctrl+`  - Show/hide console panel (for build output)
10// Cmd+/ - Toggle line comment (JavaScript // or JSX {/* */})

Changes made in Sublime Text create a local version of the Bolt project that diverges from what Bolt's WebContainer environment knows about. To bring these changes back into Bolt for further AI-assisted development, GitHub is the intermediary — the same pattern used for VS Code, Atom, and all other local editor integrations. If your project is connected to GitHub (via Bolt's Git panel), the workflow is: make edits in Sublime, open a terminal and run git commands to commit and push, then pull the changes in Bolt. Bolt's AI assistant will see your Sublime-made edits in subsequent prompts. Sublime Text does not have built-in Git UI (unlike VS Code). Your options for Git operations alongside Sublime are: 1. Terminal: the simplest approach — open a terminal alongside Sublime and use standard git commands. This is the most common workflow for Sublime Text users. 2. GitGutter (already recommended above): shows diff indicators in the gutter, but does not provide commit or push UI. 3. Sublime Merge: JetBrains-style Git client from the same company that makes Sublime Text. Integrates tightly with Sublime Text and provides a visual Git interface. Download separately from sublimemerge.com. 4. GitHub Desktop: a cross-platform Git GUI that works alongside any editor. Shows staged changes, provides commit UI, and handles push/pull without terminal commands. The most important practice: before making substantial local edits in Sublime, push the current Bolt state to GitHub first. This creates a clean rollback point in case your local edits introduce regressions. After editing in Sublime, commit with a descriptive message explaining what you changed and why — this helps the Bolt AI understand the edit context when you pull back and continue AI-assisted development.

1# After editing in Sublime Text, commit and push to GitHub:
2cd ~/projects/bolt-exports/your-project-name
3
4# Review what changed:
5git diff --stat
6
7# Stage changed files:
8git add src/components/YourComponent.tsx src/styles/custom.css
9
10# Commit with a descriptive message:
11git commit -m "refactor: simplify NavBar component and update Tailwind classes"
12
13# Push to GitHub:
14git push origin main
15
16# Then in Bolt's Git panel: click Pull to sync these changes into Bolt