In 2014, Adobe released Brackets — a free, open-source code editor built specifically for web designers and front-end developers. At the time, its headline feature was revolutionary: a real-time live preview in the browser that updated as you typed, without needing to save or refresh. Combined with a unique inline editor for CSS, Brackets offered a workflow that no other editor could match.
While Brackets never achieved the market share of VS Code or Sublime Text, it earned a devoted following among HTML and CSS developers — particularly designers transitioning into code. This article explores what made Brackets special, its unique features, and where it stands today.
The History of Adobe Brackets
Adobe developed Brackets as an open-source project, with the code hosted on GitHub. Like Atom and VS Code, it was built using web technologies — HTML, CSS, and JavaScript — through a framework called NW.js (formerly known as node-webkit). The project had a clear focus: it was designed specifically for HTML, CSS, and JavaScript, not as a general-purpose editor.
In 2021, Adobe announced that it would no longer actively develop Brackets and would archive the project. However, a community fork called Brackets Continued (now hosted at brackets.io) has kept the project alive with modern updates and continued maintenance.
Groundbreaking Features That Defined Brackets
Live Preview
Brackets' live preview was its killer feature. When you clicked the lightning bolt icon (or pressed Ctrl+Alt+P), Brackets opened your HTML file in Google Chrome and maintained a live connection between the editor and the browser. As you typed in the editor, the browser updated in real time — character by character — without a page refresh.
This wasn't just a "save and auto-refresh" feature. CSS changes appeared instantaneously without any page reload at all, preserving scroll position and any JavaScript state. For iterating on layout and styling, this was genuinely magical.
<!-- Example: Edit this CSS while Live Preview is active -->
<style>
.hero {
background: linear-gradient(135deg, #667eea, #764ba2);
/* Change colors here — browser updates instantly */
padding: 80px 40px;
text-align: center;
color: white;
}
.hero h1 {
font-size: 3rem;
/* Adjust font-size and watch the layout reflow live */
margin-bottom: 20px;
}
</style>Quick Edit (Inline Editor)
Quick Edit is the feature Brackets users remember most fondly. Place your cursor on a CSS class name in your HTML file and press Ctrl+E. Brackets opens an inline panel directly below that line, showing all the CSS rules for that selector from your stylesheet — right inside the HTML editor. You can edit the CSS in that inline panel and see changes reflected in the live preview simultaneously.
This eliminated constant switching between HTML and CSS files. You could read your HTML structure and edit the associated styles in context, without ever leaving the HTML file.
<!-- Place cursor on "hero" class name and press Ctrl+E -->
<div class="hero">
<h1>Welcome</h1>
<p>Subtitle text here</p>
</div>
<!-- Brackets opens an inline CSS editor showing: -->
.hero {
background: #4a90e2;
padding: 60px;
color: white;
}
<!-- Edit directly here, save, and live preview updates -->Quick Docs
Quick Docs (Ctrl+K) shows inline documentation for CSS properties. Hover over a CSS property in your stylesheet and press the shortcut to see a description, valid values, and browser compatibility information from MDN — all without leaving the editor. For developers still learning CSS properties and their valid values, this was an invaluable teaching tool.
Code Hints
Brackets ships with excellent built-in code hints for HTML and CSS. In HTML, it autocompletes tag names, attributes, and attribute values (including valid color names, event handlers, and ARIA roles). In CSS, it autocompletes property names and suggests valid values for each property, including vendor-prefixed variants.
<!-- HTML code hints example -->
<input type=" "
<!-- Brackets suggests: text, password, email, checkbox,
radio, submit, file, date, number, url, tel... -->
/* CSS code hints example */
.element {
display: /* suggests: block, flex, grid, inline, none... */
position: /* suggests: static, relative, absolute, fixed, sticky */
}Extract (from PSD)
Brackets had a unique integration with Adobe's Creative Cloud called Extract. You could open a PSD file from Photoshop inside Brackets and extract design information — colors, fonts, gradients, measurements — directly into your CSS as you worked. For designers who received PSD mockups and needed to convert them to code, this was a significant time-saver and one of the clearest examples of Adobe's design-to-code vision for the tool.
The Extension Ecosystem
Brackets had a built-in extension manager accessible via File → Extension Manager. Popular extensions for HTML/CSS development included:
- Emmet — abbreviation expansion for HTML and CSS
- Brackets Git — full Git integration with staging, commits, and push/pull
- Beautify — HTML, CSS, and JS formatting
- Color Highlighter — visual color swatches in CSS
- Brackets Icons — file type icons in the sidebar
- FTP-Sync — upload files directly to a server via FTP
- Interactive Linter — inline JSHint and CSSLint results
Brackets vs. Other Editors for HTML/CSS
Brackets vs. VS Code
VS Code has a dramatically larger extension ecosystem and broader language support. However, Brackets' built-in Quick Edit and live preview remain genuinely innovative — VS Code's live preview requires extensions (like Live Server) and doesn't offer the same inline CSS editing experience natively.
Brackets vs. Dreamweaver
Both are associated with Adobe, but they serve different audiences. Dreamweaver is a paid, full-featured IDE with visual WYSIWYG design capabilities. Brackets is a lightweight, code-first editor that's free and open source. Brackets was aimed at front-end developers who want the power of a code editor with design-friendly features, not the design-first approach of Dreamweaver.
Brackets vs. Sublime Text
Sublime Text is significantly faster (it's a native application, not web-tech-based). But Brackets' live preview and Quick Edit have no direct equivalent in Sublime Text. For pure HTML/CSS design work, Brackets offered a uniquely smooth feedback loop.
Configuring Brackets for HTML & CSS
Brackets stores settings in a JSON file. Access it via Debug → Open Preferences File:
{
"useTabChar": false,
"tabSize": 2,
"spaceUnits": 2,
"wordWrap": false,
"linting.enabled": true,
"language": {
"html": {
"spaceUnits": 2
},
"css": {
"spaceUnits": 2
}
},
"themes.theme": "brackets-dark-theme"
}Brackets in 2024: Is It Still Worth Using?
Adobe has officially archived the original Brackets project. However, Brackets Continued (the community fork) continues active development, addressing security vulnerabilities and adding compatibility with modern browsers for live preview.
For most professional developers, VS Code is the practical choice in 2024. But Brackets (or Brackets Continued) still has a legitimate use case: educators and beginners who benefit from the visual live preview and inline CSS editing, and designers who want to code their own designs without the overhead of a full IDE.
Brackets' live preview concept lives on in tools like browser-based editors. The Live HTML/CSS/JS Editor on htmlcsseditor.com offers a similar instant-feedback experience directly in your browser — type HTML and CSS and see results rendered live, with no installation required. For formatting HTML or CSS from existing Brackets projects, the HTML Formatter and CSS Formatter are quick online alternatives to Brackets' beautify extension.
The Lasting Impact of Brackets
Even if Brackets never dominated market share, its contributions to the editor landscape were significant:
- Popularized real-time live preview as a standard expectation for web editors
- Demonstrated that inline contextual editing (Quick Edit) could dramatically improve CSS workflows
- Showed that a code editor could bridge the gap between design tools and development tools
- Its open-source model inspired Adobe to think differently about developer tooling
The live preview revolution Brackets started is now table stakes for web development environments, from local dev servers to cloud-based IDEs — a lasting legacy for an editor that punched well above its weight.