Integrate Sublime Text with Lovable by connecting your project to GitHub, cloning the repository locally, and opening it in Sublime Text. Sublime's speed makes it ideal for quick targeted edits to Lovable-generated TypeScript and React files. Install the LSP and LSP-typescript packages for type checking, then push your changes back via Git for automatic Lovable sync.
Why Sublime Text is a strong choice for editing Lovable projects
Sublime Text has been a developer favourite for over a decade because of one thing: speed. It opens instantly, handles large files without lag, and its multiple cursor editing lets you rename variables, update imports, and restructure components faster than most IDEs. Unlike Atom (which was archived in 2022), Sublime Text is actively maintained with regular releases. For developers who want a lightweight alternative to VS Code for targeted edits to Lovable-generated code, Sublime Text is an excellent option.
Lovable generates standard Vite, React, and TypeScript projects. Every file in your Lovable project — components, Edge Functions, configuration files — is plain TypeScript or TSX, which Sublime handles natively with the right packages installed. The workflow is straightforward: connect Lovable to GitHub, clone locally, open in Sublime, edit, commit, and push. Lovable's two-way sync applies your changes to the live preview automatically.
Sublime Text's LSP (Language Server Protocol) ecosystem brings TypeScript IntelliSense, go-to-definition, and error highlighting that rivals VS Code's built-in support. The key packages are LSP, LSP-typescript, and LSP-eslint. Once configured, Sublime Text becomes a capable environment for editing complex React components and Edge Function code generated by Lovable.
Integration method
Sublime Text connects to Lovable through the GitHub repository workflow. Connect your Lovable project to GitHub, clone the repository locally, open it in Sublime Text, make edits, and push changes back via Git. Lovable's two-way GitHub sync picks up your changes automatically. Sublime Text's advantage over heavier IDEs is startup speed and editing performance on large component files.
Prerequisites
- Sublime Text 4 installed from sublimetext.com — the latest stable release
- Package Control installed in Sublime Text (Tools → Install Package Control)
- A Lovable project connected to GitHub (Settings → Connectors → GitHub in Lovable)
- Git installed on your local machine
- Node.js 22 installed locally if you plan to run the project with npm run dev
Step-by-step guide
Connect your Lovable project to GitHub
Connect your Lovable project to GitHub
Open your Lovable project and click the GitHub icon in the top-right corner of the editor. If this is your first time connecting GitHub to Lovable, you will be redirected to GitHub's OAuth authorization page — authorize the Lovable GitHub App with access to the organization or personal account where you want the repository created. After authorizing, return to Lovable, click the GitHub icon again, and select 'Connect project'. Choose a repository name, select your organization, and confirm. Lovable creates the repository and sets up real-time two-way sync on the main branch. Every change you make in Lovable's AI chat pushes to this repository automatically, and every push you make to the repository from your local machine syncs back to Lovable's preview. The only critical rule is: never rename, move, or delete this repository after connecting it — the sync link is tied to the repository's identity and breaks permanently if the repository is moved or renamed. Once connected, you should see your project files at github.com/{your-org}/{your-repo}.
Pro tip: Connect GitHub before you start making local edits — this ensures you always have a single source of truth and can pull the latest AI-generated changes before working locally.
Expected result: The GitHub icon in Lovable shows a green connected indicator, and your project repository is visible on GitHub with the full project source code.
Clone the repository and open in Sublime Text
Clone the repository and open in Sublime Text
On the GitHub repository page, click the green 'Code' button and copy the HTTPS clone URL. Open your terminal and navigate to the folder where you keep projects, then run git clone {url} to create a local copy. Once cloning is complete, open Sublime Text. Go to File → Open Folder (on macOS: File → Open...) and select the cloned repository directory. Sublime Text will open the directory as a project, displaying the file tree in the left sidebar. You will see the standard Lovable project layout: src/components/ contains the React component files, src/pages/ holds the page-level components, supabase/functions/ contains Edge Functions, and the root contains configuration files. Sublime Text may prompt you to install the recommended packages for TypeScript files — accept these if prompted, or proceed to the next step to install them manually. The .tsx and .ts files should display with basic syntax highlighting immediately. For full TypeScript support with error checking and autocompletion, the LSP packages in the next step are essential.
Pro tip: In Sublime Text, use Project → Save Project As to save a .sublime-project file in the repository root. This lets you quickly reopen the Lovable project with all file tree state preserved.
Expected result: The Lovable project directory is open in Sublime Text with the file tree visible and TypeScript/TSX files showing basic syntax highlighting.
Install LSP and TypeScript support packages
Install LSP and TypeScript support packages
For proper TypeScript and React code intelligence in Sublime Text, install the LSP ecosystem via Package Control. Open Sublime's Command Palette with Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux), type 'Package Control: Install Package', and press Enter. Search for 'LSP' and install it — this is the Language Server Protocol client that enables IntelliSense for any language. Once LSP is installed, open the Package Palette again and install 'LSP-typescript', which connects Sublime Text to the TypeScript language server. This package provides type checking, go-to-definition (F12), hover documentation, and autocomplete for all .ts and .tsx files in your project. Also install 'LSP-eslint' if you want linting errors to appear inline. Finally, install 'Babel' or 'TypeScript Syntax' for JSX syntax highlighting — without this, React component JSX will display as plain text. After installing each package, restart Sublime Text. When you open a TypeScript file for the first time after installation, LSP-typescript will prompt you to install the TypeScript language server via npm — allow this to proceed. You will see a small spinner in the status bar while it downloads. Once the language server is ready, TypeScript errors appear as red underlines and hover tooltips show type information.
Pro tip: If LSP-typescript shows 'No TypeScript found in workspace' on first open, run npm install in the project root from your terminal to install the TypeScript dependency — LSP-typescript uses the project's local TypeScript version.
Expected result: TypeScript files show IntelliSense tooltips, go-to-definition works with F12, and type errors appear as inline red underlines.
Make edits and push changes back to Lovable
Make edits and push changes back to Lovable
Edit files in Sublime Text as usual. Sublime's multiple cursor editing is particularly useful for Lovable projects: hold Cmd (macOS) or Ctrl (Windows/Linux) and click to place multiple cursors simultaneously, which lets you rename a prop, add the same import to multiple files, or adjust Tailwind classes on several similar elements at once. Sublime's Find in Files (Cmd+Shift+F) searches across the entire project, making it easy to find all usages of a component before renaming it. When your edits are complete, use Sublime's Git integration (if you have the Sublime Merge companion app) or your terminal to commit and push. In your terminal, navigate to the project directory, run git add {changed files}, then git commit -m "your message", then git push origin main. Within seconds, Lovable's preview updates with your changes — the GitHub icon in Lovable will briefly animate to indicate it detected and applied the push. Pull the latest changes with git pull origin main before each editing session to ensure you are working with the latest AI-generated code.
Pro tip: Sublime Merge (sublimemerge.com) is a companion Git GUI from the same developers that integrates tightly with Sublime Text — it provides a visual diff and commit interface without needing the terminal.
Expected result: Committed changes pushed to the main branch appear in Lovable's preview within a few seconds, and the project source in Lovable matches your local edits.
Common use cases
Quickly rename components and update imports across files
Lovable's AI sometimes generates generic component names like 'Section1' or 'Card2'. Use Sublime Text's Find in Files (Shift+Cmd+F) and multiple cursors to rename components across your entire project instantly. This kind of mass rename is faster in Sublime than in a heavier IDE because Sublime opens and searches files without indexing delays.
Copy this prompt to try it in Lovable
Edit Tailwind class lists for precise visual tweaks
When Lovable's generated Tailwind classes are almost right but not exact, open the component file in Sublime Text and use its multi-cursor editing to adjust padding, color, or spacing values across multiple similar elements simultaneously. Sublime's Goto Anything (Cmd+P) makes jumping between component files fast without a full project tree.
Copy this prompt to try it in Lovable
Review and refine Edge Function TypeScript code
After Lovable generates an Edge Function, open the supabase/functions/ directory in Sublime to review the TypeScript code, check error handling logic, and add any business-specific validation that the AI prompt did not capture. Sublime's syntax highlighting for TypeScript makes the Deno import patterns and async/await structures readable at a glance.
Copy this prompt to try it in Lovable
Troubleshooting
LSP-typescript shows no autocomplete or 'server not ready' in the status bar
Cause: The TypeScript language server has not been installed, or the project's node_modules are missing so LSP-typescript cannot find the local TypeScript installation.
Solution: Run npm install in the project root directory from your terminal. Then restart Sublime Text and reopen the project. LSP-typescript will detect the installed TypeScript in node_modules and initialize the language server. You should see 'TS' appear in the status bar when it is ready.
JSX in .tsx files shows as plain text without syntax highlighting
Cause: The Babel or TypeScript Syntax package is not installed, or Sublime Text is not recognizing .tsx files as TypeScript JSX.
Solution: Install the 'Babel' package via Package Control for JSX highlighting. To ensure .tsx files are associated correctly, open a .tsx file, click the language indicator in the bottom-right of the Sublime status bar, and select 'TypeScript JSX' from the list. Select 'Open all with current extension as TypeScript JSX' to make this permanent.
Pushing from Sublime/terminal does not update Lovable's preview
Cause: You pushed to a branch other than main, the GitHub sync connection in Lovable was disrupted, or there was a merge conflict on the repository.
Solution: Verify you are on the main branch with git branch in your terminal. Check the GitHub icon in Lovable — if it shows a warning or disconnected state, click it and reconnect the project. Review the repository on GitHub to confirm the push landed on main with no conflict markers.
Best practices
- Always run git pull origin main before opening files in Sublime Text to ensure you have the latest Lovable AI-generated code.
- Use Sublime Text's Project feature (Project → Save Project As) to save a .sublime-project file for each Lovable repository so you can reopen with the full sidebar state intact.
- Install LSP + LSP-typescript before doing significant editing — without TypeScript IntelliSense, you will miss type errors that will cause Lovable's build to fail.
- Use Sublime's multiple cursor editing (Cmd+click) for bulk renaming and Tailwind class adjustments — this is Sublime's strongest advantage over single-cursor editors.
- Commit changes frequently and keep commits small and focused so that if a local edit breaks Lovable's preview, you can identify exactly which change caused the issue.
- Do not edit Supabase migration files (supabase/migrations/) in Sublime without understanding the Supabase migration system — incorrect schema changes can break your database.
- Use Find in Files (Cmd+Shift+F) to search across the full project before renaming a component, ensuring you update all import references.
- For the best TypeScript experience, Sublime Text 4 Build 4180 or later is recommended as it includes improved LSP stability compared to earlier builds.
Alternatives
VS Code offers deeper TypeScript integration and a larger extension ecosystem, making it the better choice when you need full IDE features like debugging and refactoring.
Atom was archived in December 2022 and no longer receives updates, making Sublime Text the actively maintained choice for a similar lightweight editing experience.
IntelliJ IDEA provides enterprise-grade TypeScript and React tooling with full refactoring and debugging, at the cost of significantly heavier resource usage compared to Sublime Text.
Frequently asked questions
Is Sublime Text free to use with Lovable?
Sublime Text is free to evaluate indefinitely — you can use it without purchasing a license, though it will occasionally prompt you to buy. A personal license costs $99 one-time. For professional use, purchasing a license is recommended as it supports continued development and removes the purchase prompts.
How does Sublime Text compare to Atom for Lovable projects?
Sublime Text is the better choice in 2026. Atom was archived by GitHub in December 2022 and no longer receives security patches or package updates. Sublime Text is actively maintained with regular releases, has a fully functional package ecosystem, and offers better performance. If you prefer an open-source Atom-like editor, consider Pulsar (pulsar-edit.dev) as the community-maintained Atom fork.
Can I run my Lovable project locally from Sublime Text?
Not directly from Sublime Text — you need to run npm run dev in a terminal. Sublime Text does not have a built-in terminal or task runner like VS Code's integrated terminal. Open a separate terminal window, navigate to your project directory, and run npm install followed by npm run dev to start the local development server. You can then access the local preview at localhost:5173 while editing in Sublime.
Will Lovable's AI overwrite my Sublime Text edits?
If you push local Sublime edits to GitHub's main branch and then ask Lovable's AI to modify the same files, there may be a merge conflict. Pull the latest changes from GitHub before making local edits, and coordinate your local editing sessions with your Lovable AI chat sessions to avoid editing the same files simultaneously.
Does Sublime Text support the Tailwind CSS class autocompletion that VS Code has?
Yes, through the LSP-tailwindcss package. Install it via Package Control just like LSP-typescript. It provides class name autocomplete and hover documentation for Tailwind classes in your JSX files, which is useful when editing Lovable's Tailwind-heavy component code.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation