World Library  
Flag as Inappropriate
Email this Article

Brackets (text editor)

Article Id: WHEBN0036253055
Reproduction Date:

Title: Brackets (text editor)  
Author: World Heritage Encyclopedia
Language: English
Subject: HTML editors, Alleycode HTML Editor, Portable software, AOLpress, Site Studio
Collection: Adobe Software, Automated Wysiwyg Editors, Cross-Platform Free Software, Free Html Editors, Portable Software
Publisher: World Heritage Encyclopedia

Brackets (text editor)

Brackets logo
Developer(s) Adobe Systems
Initial release November 4, 2014 (2014-11-04)[1]
Stable release 1.0 (November 4, 2014 (2014-11-04)) [2]
Development status Active
Written in HTML, CSS and JavaScript
Operating system Mac, Windows and Linux
Size ~40 MB
Available in 31 languages[3]
Type Text editor
License MIT License
Website .iobrackets

Brackets is a free open-source editor written in HTML, CSS, and JavaScript with a primary focus on Web Development. It was created by Adobe Systems, licensed under the MIT License, and is currently maintained on GitHub. Brackets is available for cross-platform download on Mac, Windows, and Linux.

On November 4, 2014, Adobe announced the 1.0 release of Brackets. The update introduced new features such as custom shortcut key combinations and more accurate JavaScript hinting.[4]


  • Features 1
  • Quick Edit 2
  • Live Preview 3
    • Functionality 3.1
    • Live preview limitations 3.2
  • Theseus Integration 4
    • Functionality 4.1
  • Quick Docs 5
  • Extensions 6
  • See also 7
  • References 8
  • External links 9


Brackets provides several features[5] including:

Quick Edit

Quick edit enables inline editing of CSS, Color Property, and JavaScript elements for developers. This built-in feature can be applied to multiple functions or properties simultaneously and all updates are applied directly to the file associated with the changed elements.

  • HTML File
    • Applying quick edit to HTML elements will display all corresponding CSS properties in a box beneath the selected element. Users can choose to create new CSS rules directly within the editor and edit a tag's CSS properties inline without leaving the context of the HTML file.
  • JavaScript File
    • On JavaScript functions, quick edit performs the same procedure as with HTML elements but displays the selected function’s body within the drop down box. All updates to the function’s body will propagate and update directly within the corresponding JavaScript file.
  • Files containing Hex or RGB color properties
    • For color properties, quick edit will return an inline color picker for previewing and color adjustment functionality.

Live Preview

Using Live Preview, Brackets pushes code edits instantly to the browser to present an updated page without having to reload.
Two scenarios to Live Preview:

  • No Back End Logic:
    • Using Live Preview, Brackets will launch the chosen HTML file in Google Chrome by supplying static content from Brackets built-in server. This procedure does not require any back end logic to support viewing changes to the HTML file.
  • Back End Logic:
    • With back end logic, Brackets will direct Google Chrome to a provided project URL running on a separate server but will disable support for HTML-related features. As a result, the browser will not be able to update any HTML, PHP, etc. files in real time and element highlighting will also be disabled for these files. Only edits and element highlighting related to CSS files will be reflected in real time. All non-CSS file updates will be auto-reloaded instead. These limitations exist because providing live editing functionality for HTML files requires injecting annotations into the HTML code before the code is loaded into the browser. These injections are normally handled by Brackets built-in server but are non-existent when projects make use of separate personal servers.


  1. HTML & CSS real time updates (without reloading)
  2. Element Highlighting: Elements selected in HTML and CSS files are highlighted within the browser.

Live preview limitations

  • Currently only works with desktop Google Chrome as the target browser.
  • Opening developer tools in Google Chrome will close all live development connections.
  • All files to be viewed must be inside a currently open folder in Brackets.
  • Only one HTML file can be previewed at a time.
  • Real time updates are paused when syntactically invalid HTML is encountered. Brackets will resume pushing changes to the browser when the syntax is corrected.

Theseus Integration [9]

Theseus is an open-source JavaScript debugger for Brackets that enables developers to set break points, step through code, and inspect the value of variables in real time. Theseus can be used to debug any extension in Brackets and is easily installed using the built-in extension manager. Theseus also works in conjunction with Live Preview through a proxy server that records a function and its associated values every time the function is called.


  • Displays number of times a function is called next to the function’s definition.
  • Logs all arguments received, values returned, and exceptions thrown by a function call within Brackets.

Quick Docs [5]

Related to quick edit, quick docs is a feature used to display relevant documentation inline. In a CSS/LESS/SCSS file, quick docs will open inline documentation for any selected property. Quick Docs can also be applied to multiple properties simultaneously.

Extensions [5] [10]

Being built with HTML, CSS, and Javascript, developers can provide additional functionality to Brackets by creating extensions. These extensions can be found and installed using the built-in extension manager. Extensions can also be found online via Brackets Extension Registry.

See also


  1. ^ Stewart, Ryan. "Brackets 1.0 and Extract for Brackets (Preview) Now Available". Brackets Blog.  
  2. ^ Stewart, Ryan. "Brackets 1.0 and Extract for Brackets (Preview) Now Available". Brackets Blog.  
  3. ^ .md/README/nls/src/master/blob/brackets/adobe.comgithub
  4. ^ By Harrison Weber, VentureBeat. “Adobe launches its open source text editor Brackets out of beta, releases CSS extraction tool.” November 4, 2014. November 17, 2014.
  5. ^ a b c "How to Use Brackets", Adobe 
  6. ^ Text Editor Review – Adobe Brackets, January 22, 2014 
  7. ^ Deeper In the Brackets Editor, November 8, 2013 
  8. ^ "Brackets: Free Open Source Code Editor Built With HTML/CSS", Hongkiat 
  9. ^ "Theseus JavaScript Debugger for Chrome and NodeJS", Brackets Blog, August 28, 2013 
  10. ^ "A Review of the Brackets Editor", SitePoint, April 18, 2014 

External links

  • Official Brackets website
  • Brackets source on GitHub
  • List of Brackets extensions
  • Brackets YouTube Channel
  • Brackets Developer Forum
  • Russian VK Community
This article was sourced from Creative Commons Attribution-ShareAlike License; additional terms may apply. World Heritage Encyclopedia content is assembled from numerous content providers, Open Access Publishing, and in compliance with The Fair Access to Science and Technology Research Act (FASTR), Wikimedia Foundation, Inc., Public Library of Science, The Encyclopedia of Life, Open Book Publishers (OBP), PubMed, U.S. National Library of Medicine, National Center for Biotechnology Information, U.S. National Library of Medicine, National Institutes of Health (NIH), U.S. Department of Health & Human Services, and, which sources content from all federal, state, local, tribal, and territorial government publication portals (.gov, .mil, .edu). Funding for and content contributors is made possible from the U.S. Congress, E-Government Act of 2002.
Crowd sourced content that is contributed to World Heritage Encyclopedia is peer reviewed and edited by our editorial staff to ensure quality scholarly research articles.
By using this site, you agree to the Terms of Use and Privacy Policy. World Heritage Encyclopedia™ is a registered trademark of the World Public Library Association, a non-profit organization.

Copyright © World Library Foundation. All rights reserved. eBooks from Project Gutenberg are sponsored by the World Library Foundation,
a 501c(4) Member's Support Non-Profit Organization, and is NOT affiliated with any governmental agency or department.