explaingit

adobe/brackets

★ 33,053JavaScriptAudience · developerComplexity · 3/5DormantLicenseSetup · easy

TLDR

A lightweight, open-source code editor built in HTML, CSS, and JavaScript for web development. It featured live browser preview and inline CSS editing, but Adobe ended support in 2021.

Mindmap

mindmap
  root((Brackets))
    What it does
      Live Preview
      Quick Edit CSS
      Web dev focus
    Key Features
      Built in web tech
      Desktop app
      Extension registry
    Tech Stack
      CodeMirror editor
      Native shell
      JavaScript runtime
    Use Cases
      HTML CSS editing
      Live browser sync
      Website building
    Status
      Ended 2021
      Historical project
      Community forks

Things people build with this

USE CASE 1

Build websites with instant CSS preview as you edit without reloading the browser.

USE CASE 2

Click a CSS class name in HTML and edit its rules inline without switching files.

USE CASE 3

Extend the editor with community plugins to add custom tools for your workflow.

USE CASE 4

Study how a modern code editor is built using only web technologies.

Tech stack

JavaScriptHTMLCSSCodeMirrorNode.js

Getting it running

Difficulty · easy Time to first run · 5min
MIT license, use freely for any purpose, including commercial use, as long as you keep the copyright notice.

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 do I set up Brackets from the GitHub repository and build it locally?
Prompt 2
Show me how to create a Brackets extension that adds a custom linter for my project.
Prompt 3
How does the Live Preview feature in Brackets connect to the browser and push CSS changes?
Prompt 4
I want to fork Brackets and add a feature for SCSS compilation, where should I start?
Prompt 5
What was the Quick Edit feature in Brackets and how did it work?
Open on GitHub → Explain another repo

Generated 2026-05-18 · Model: sonnet-4-6 · Verify against the repo before relying on details.