adobe/brackets

Analysis updated 2026-06-20

★ 33,061JavaScriptAudience · developerComplexity · 2/5Setup · moderate

Mindmap

mindmap
  root((Brackets))
    What it was
      Web code editor
      Built in HTML and JS
      Adobe project 2021
    Key Features
      Live Preview
      Quick Edit CSS
      Extension registry
    Tech Stack
      JavaScript core
      CodeMirror editor
      Native shell wrapper
    Status
      Discontinued 2021
      Archived on GitHub
      Migrate to VS Code
    Use Cases
      Historical study
      Fork as base
      Extension reference

mindmap root((Brackets)) What it was Web code editor Built in HTML and JS Adobe project 2021 Key Features Live Preview Quick Edit CSS Extension registry Tech Stack JavaScript core CodeMirror editor Native shell wrapper Status Discontinued 2021 Archived on GitHub Migrate to VS Code Use Cases Historical study Fork as base Extension reference

Click or tap to explore — scroll the page freely

What do people build with it?

USE CASE 1

Study how a desktop code editor can be built entirely in HTML, CSS, and JavaScript for educational purposes

USE CASE 2

Fork the codebase as a starting point for building a custom web-based code editor with live preview

USE CASE 3

Explore the extension API as a historical reference for how code editor plugin systems were designed

USE CASE 4

Review the Live Preview implementation to understand how editors pushed CSS changes to the browser without a reload

What is it built with?

JavaScriptHTMLCSSNode.jsCodeMirror

How does it compare?

	adobe/brackets	songquanpeng/one-api	gulpjs/gulp
Stars	33,061	32,987	32,975
Language	JavaScript	JavaScript	JavaScript
Setup difficulty	moderate	hard	easy
Complexity	2/5	3/5	2/5
Audience	developer	developer	developer

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

No longer maintained since 2021, some dependencies may be outdated or broken on current operating system versions.

In plain English

Brackets is an open-source code editor created by Adobe, specifically designed for web development with HTML, CSS, and JavaScript. Its notable characteristic is that it is itself built entirely in HTML, CSS, and JavaScript, so developers could read and modify the editor's own source code using the same technologies they were using to build websites. The problem it was trying to solve was that existing code editors felt disconnected from the browser, which is the ultimate environment where web code runs. Brackets introduced two ideas to address this: first, a "Live Preview" feature that connected directly to a browser while you typed, instantly pushing CSS changes to the page without a page reload, second, a "Quick Edit" feature that let you click on a CSS class in HTML and see the corresponding CSS rules in an inline panel right below that line, without switching files. You would have used Brackets when building websites and wanting a lightweight editor with tight integration between the HTML structure, the CSS styling, and live browser feedback. It had an extension registry where the community added additional features. It is worth noting that Adobe ended support for Brackets on September 1, 2021. The project is no longer actively maintained by Adobe. Users were officially directed to migrate to Visual Studio Code. The repository still exists on GitHub and can be forked, but it is effectively a historical artifact. Technically, Brackets ran as a desktop application via a thin native shell (in a separate repository called brackets-shell) that gave it access to the local filesystem, since running HTML/CSS/JS in a browser tab alone cannot read or write files. The text editor component was built on CodeMirror.

Copy-paste prompts

Prompt 1

How did Brackets implement Live Preview to push CSS changes to the browser instantly without a page reload, show me the relevant source code?

Prompt 2

I want to build a VS Code extension that mimics Brackets' Quick Edit inline CSS feature, how did Brackets implement it?

Prompt 3

Walk me through the Brackets extension API so I can understand how to build a plugin for a modern Electron-based editor

Prompt 4

How is Brackets structured as a desktop app, what does the brackets-shell native wrapper do and how does it communicate with the HTML/JS editor?

Prompt 5

I'm studying code editor architecture, explain how Brackets uses CodeMirror as its text editing component

Frequently asked questions

What is brackets?

An open-source code editor by Adobe built specifically for web development, featuring live browser preview and inline CSS editing, discontinued in 2021, with users directed to Visual Studio Code.

What language is brackets written in?

Mainly JavaScript. The stack also includes JavaScript, HTML, CSS.

How hard is brackets to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is brackets for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Scan in gitsafehub Deploy in gitdeployhub adobe on gitmyhub

Verify against the repo before relying on details.