Home » Brackets.io | What is Brackets.io

Brackets.io | What is Brackets.io

by Online Tutorials Library

What is Brackets.io?

Brackets is a modern, light weighted, and powerful source code text editor. It is mainly used for the web development. We can download it form the official website http://brackets.io/. In this section, we will discuss about bracket sources code text editor, its features, and versions.

The Brackets.io is a free and open source software which is developed by Adobe Systems which is one of the most famous company in the world and it is licenced under the MIT License, and is currently maintained by Adobe and other open source developers that are present on GitHub. It is written in JavaScript, HTML, and CSS. It is cross-platform, usable for distributions like macOS, Windows, and most Linux. Brackets’ main purpose is its live editing feature for HTML, CSS and JavaScript.

The first (1.0) update of Brackets was announced by Adobe on November 4, 2014. There were several new features that were added to the latest version of the Bracket.io that includes custom shortcut key combination and many more. Adobe announced a feature with the release of version 1.0 that extracts design details from a PSD file for the convenience of CSS coding.

The function has been officially discontinued as of June 28, 2016, due to low use. However, with the help of Photoshop and Dreamweaver software, Extract is still available, and both of this software are part of Adobe Creative Cloud and their paid service and licencing. The new edition of the Brackets programme is 1.14.2.


Adobe initially began the development of an Edge Code text editor for web development, which was discontinued in November 2014. Later on, this initiative was translated into Adobe Brackets. Then after sometimes Adobe declared a very important notice and it was done with the release of Brackets 1.0 version, that the development of an open source framework for web development was ready and now it was no longer an experimental project only as they started it in the form of an experiment only.

Brackets comprises contributions from more than 282 contributors to the project and has more than 400 bug fixes and new functionality requests. Each version of the Brackets was downloaded more than 100,000 times, and it was noted on the January 16 2015, the bracket.io was the most downloaded project form the GitHub.

As of Aug 30, 2018, the Brackets repository on GitHub now has 152 branches, 110 updates and 17,700 commits. Under the MIT licence, the source code is freely available. By forking the software code, a developer can modify features on Brackets and customise them for one’s own convenience.

Features of Brackets

Brackets gives us a plenty of features that we can take advantage of which includes:

  • The Quick Edit feature of Brackets
  • The Quick Docs feature of Brackets
  • The Live Preview feature of Brackets
  • The JSLint feature of Brackets
  • The LESS support feature of Brackets
  • The Open source feature of Brackets
  • The Extensibility feature of Brackets

The Quick edit Feature of Brackets

It allows us to do the Fast Edit which is an inline editing for developers of CSS, Color Property, and JavaScript components of the programming. This built-in functionality can be applied concurrently to several functions or resources, and all modifications are applied directly to the file associated with the elements being updated.

HTML file

This built-in functionality can be applied concurrently to several functions or resources, and all modifications are applied directly to the file associated with the elements being updated.

JavaScript file

Fast edit performs the same procedure for JavaScript functions as for HTML components, but shows the body of the selected feature inside the drop-down box. All updates to the body of the feature will be propagated and updated directly inside the JavaScript file concerned. Files containing hex or RGB color properties.

For color assets, fast edit returns an inline colour picker for the functionality of preview and colour change.

Live Preview

This function is referred to as Live Preview, this feature often automatically moves code edits to the browser to show an updated webpage as the code is changed by the developers. Brackets include a backend of Node.js that predicts what the code is doing when the code is typed by the developer. There are two scenarios to the live preview:

  • No back-end logic: Using Live Preview, by providing static content from the Brackets built-in server, Brackets can launch the chosen HTML file on Google Chrome.
  • Back end logic: Brackets can guide Google Chrome to a specified project URL running on a separate server with back-end logic, but it will disable HTML-related feature support. As a result, any HTML, PHP, etc. files will not be able to be updated in real time by the browser and element highlighting will be disabled for these files as well.

These injections are typically managed by the built-in Brackets server, but when projects use separate personal servers, they are non-existent.

Limitations of the Live preview

  • It only runs of the Google Chrome browser.
  • If we open a developer tool in the Chrome, it disconnects all the live connections.
  • In Parentheses, all files to be accessed must be within the currently open folder.
  • It is possible to preview only one HTML file at a time.
  • The updated that are Real-time are paused when HTML is found to be syntactically invalid. The Brackets will resume pushing changes to the browser only after when the syntax is corrected.

Split View

The split view in the Brackets, splits the brackets window into the two parts. Users can divide the view according to their own choice, either vertically or horizontally. It allows users to work on two files at the same time.

Multiple File Format Support

The multiple file format support provides the user with the versatility to work concurrently on multiple project files.

Brackets supports a PSD lens feature that helps to seamlessly remove each of the photographs, logos and design styles from the PSD file without opening Photoshop to search for them.


  • Show the number of times a function is named next to the definition of the function.
  • Logs all obtained arguments, returned values, and thrown exceptions inside Brackets by a function call.


Developers can provide Brackets with additional features by developing extensions that are designed with HTML, CSS, and JavaScript. It is also possible to find extensions online via the Brackets Extension Registry.

It is built-in functionality that can be applied concurrently to several functions or resources, and all modifications are applied directly to the file associated with the elements being updated. In short, we can say that brackets.io is a light weight but efficient modern text editor.

Brackets, sponsored by an involved and enthusiastic community, is an open-source project. It is rendered by other web developers. Instead of jumping between file tabs, Brackets helps us to open a window with the code that is most important to us.

You may also like