Need to edit a web page and see how changes affect its appearance? Brackets is a code editor focused on HTML, CSS, and JavaScript, with inline editing and a browser-connected Live Preview.
Inline Editors show related code in place
Brackets lets you open a focused view of related code without leaving the file you are working in. For example, while editing HTML, you can bring up the CSS rules associated with an element’s class or ID. That keeps the markup and its styling close at hand as you adjust a page.
This approach is handy when a change involves several linked files: inspect the relevant rule, make the edit, and return to the surrounding HTML without hopping between tabs.
Live Preview updates a browser as you edit
Live Preview connects Brackets to a browser so you can see a web page while working on its source. Changes to HTML and CSS appear on screen as you make them, tying the rendered result to the code being edited.
The feature suits a front-end workflow where visual adjustments and source edits happen in quick succession. It is especially relevant for checking how a CSS change affects the page layout.
Extensions add web-development tools
Brackets supports extensions for tasks that come up during web work. Examples include Git integration, Emmet shortcuts for HTML and CSS, and Beautify for formatting JavaScript, HTML, and CSS.
- Markdown Preview displays Markdown documents in a live preview.
- Autoprefixer adds vendor prefixes to CSS.
- W3C Validation checks markup with a validator.
Preprocessor support fits into the editor
Brackets includes support for working with preprocessors, alongside its HTML, CSS, and JavaScript editing tools. This keeps preprocessor-related work within the same web-focused editing workflow. The available feature set can also be extended with community-built add-ons.
Pros
- Live Preview reflects HTML and CSS changes in a browser
- Inline Editors expose related code without switching file tabs
- Extensions include Git integration, Emmet, and CSS Autoprefixer
Cons
- Development has moved on to Phoenix Code, the project's next-generation editor
What languages is Brackets designed for?
Brackets focuses on HTML, CSS, and JavaScript, and also supports working with preprocessors.
What does Live Preview do?
It connects the editor to a browser and displays HTML and CSS changes as you make them.
Can Brackets add Git or formatting tools?
Yes. Extensions include Git integration and Beautify for JavaScript, HTML, and CSS.
