Brackets is an open-source project, and the code is written in JavaScript, HTML, CSS.

Brackets text editor is similar to the editors like Notepad++, Eclipse ,etc. If you guys are familier with the editors specified earlier, you can easily understand brackets in very less time.

Otherwise, go through our tutorial step by step to understand Brackets editor fully.

Once the Brackets installed successfully and opening the brackets for the first time, it has a default/gettting started page index.html as shown below.

The Brackets editor have below sections -

• Main Menu
• Left Sidebar/Working Files Section
• Editor - This is the section (highlighted with red color background) where actually developer can do coding and modifications to the existing code.
• Right Sidebar/Quick Access Section
• Status Bar/Bottom-line

Sections at the Main Menu -

Main menu is like any other editors that are having all main sections like File, Edit, Find, View, Navigate, etc.

The top-level main menu sections in the brackets are -

• File – Consists of the file-related operations.
• Edit – Consists of the editing options that are used to edit the file.
• Find – Consists of the find and replace options for the text.
• View – Consists of the options that control the view.
• Navigate – Consists of the options that to navigate from one place to another.
• Debug – Consists of the debugging tools.
• Help – Provides the manual help and the support for the tool.

Left Sidebar/Working Files Section -

This section is specific to the Brackets to display current working files at one place rather than showing in different tabs. This is very useful feature in Brackets.

Left sidebar have the below sections to manage the files -

• Working Files
• Configure Working Set/Sorting Files
• Split Editor
• Getting Started

Right Sidebar/Quick Access Section -

The right sidebar having shortcuts from the main menu to use them instantly without navigating to the main menu.

This section is more famous for Live Preview and Extension Manager shortcut buttons to access them directly.

Right sidebar having below options by default.

• Live Preview
• Extension Manager

Sections at the Status Bar/Bottom-line -

Status bar having the information about editor formatting (space/tabs), the language currently using (HTML, CSS, etc), currently using encoding (UTF-8) and insert/overwrite (INS/OVR) options.

The status bar has the below options -

• Space/Tabs – This space or tab menu helps to specify the formatting of the space or tabs. The number of the spaces and the tab spaces can be possible to edit.
• Type – Type means the type of the file that is working on. The types are HTML, JavaScript, CSS, PHP etc.
• Character Encoding – The encoding preference for the HTML is UTF-8.
• INS/OVR – The INS/OVR means that insert or overwrite. Here insert is used to insert the code, and then overwrite is used to overwrite the code. By default, the insert is in active mode.
• File status symbol – This file status symbol indicates whether the code is ok or not. If the code consists of any errors, the status shows it as a yellow symbol. When the user clicks on the yellow button, the errors will have appeared. If the code does not have any errors, the status symbol indicates the green color with the tick symbol.