Brackets (text editor)

Last updated
Brackets
Developer(s) Adobe
Initial release4 November 2014;9 years ago (2014-11-04) [1]
Stable release
2.1.3 [2]   OOjs UI icon edit-ltr-progressive.svg / 31 October 2022
Preview release
2.1.0-prerelease [3]   OOjs UI icon edit-ltr-progressive.svg / 9 May 2022
Repository
Written in JavaScript, HTML, CSS
Operating system macOS, Windows and Linux
Size ~75 MB
Available in38 languages [4]
Type Source code editor
License MIT
Website brackets.io

Brackets is a source code editor with a primary focus on web development. [5] Created by Adobe Inc., it is free and open-source software licensed under the MIT License, and is currently maintained on GitHub by open-source developers. It is written in JavaScript, HTML and CSS. Brackets is cross-platform, available for macOS, Windows, and most Linux distributions. The main purpose of Brackets is its live HTML, CSS and JavaScript editing functionality. [6]

Contents

On November 4, 2014, Adobe announced the first (1.0) release of Brackets. The update introduced new features such as custom shortcut key combinations and more accurate JavaScript hinting. Brackets has a major focus on development in JavaScript-enabled, CSS and HTML. With release of version 1.0, Adobe announced a feature that extracts design information from a PSD file for convenience of coding in CSS. [7] As of June 28, 2016, the feature is officially discontinued, due to low usage. [8] However, Extract is still available via Photoshop and Dreamweaver, both of which are part of their paid service, Adobe Creative Cloud. [9] In March 2021, Adobe announced it would end their support for Brackets on September 1, 2021.

The Brackets project was subsequently transferred to become a community-owned and driven project. The latest version release of Brackets is 2.2.1. [10]

History

Adobe first started development of a text editor for web development on Edge Code, which was discontinued as of November 2014. [11] This effort was later transformed into Adobe Brackets. With the release of Brackets 1.0, Adobe announced that the development of an open source application for web development was ready and was not an experimental project any more. Brackets contains contributions by more than 282 community contributors and has more than 400 requests for bug fixes and new features. Every version of Brackets had more than 100,000 downloads, and it was the 16th most popular project on GitHub as of January 16, 2015. [12]

The Brackets repository on GitHub (Bracket repository) currently has 152 branches, 110 releases and 17,700 commits as of 30 Aug 2018. The source code is freely available under the MIT license. A developer can alter features on Brackets and personalize it for one's own convenience by forking the software code. [13]

Adobe officially dropped support for Brackets on September 1, 2021 and recommended users migrate to Microsoft's Visual Studio Code. [14] The final official release was version 1.14.2, but a community fork continues to release newer versions. [15] [16] In addition to the community continuation fork, Brackets community contributors announced Phoenix on August 30, 2021. [17] Phoenix is a fork of Brackets targeting web browsers, as opposed to being a native application. [18]

Features

Brackets provides several features [19] 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 it 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

When one clicks the respective code snippet in CSS/HTML the web browser immediately shows the output relating to that code snippet in web browser. This feature is termed as Live Preview, this feature also pushes code edits instantly to the browser to present an updated webpage as the developers modify the code. Brackets contains a Node.js backend that predicts what the code does as the developer types the code.

Live preview of code change on browser Brackets live preview.gif
Live preview of code change on browser

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 it 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 they are non-existent when projects make use of separate personal servers.

Functionality

  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

Split view

This feature splits the main view into two parts. Users can split the view either vertically or horizontally according to their own convenience, thus allowing users to work on two files at same time. A developer can simultaneously work on two different files of two different types, two files of the same type, or even two different parts of the same file at the same time. Features such as Live Preview and Quick Edit work in both views.

Multiple file format support

Brackets supports codes from multiple file types from C++, C, VBScript to Java, JavaScript, HTML, Python, Perl and Ruby. The complete list comprises more than 38 file types. This gives the user flexibility to work on various files of a project simultaneously.

Brackets supports a feature called "PSD lens" that helps to smoothly extract each of pictures, logos and design styles from PSD file without opening Photoshop to check for them. By calling this feature a preview Adobe conveys that there is much work ahead before this feature can be perfected. This feature brought in positive reviews from developers, but many issues were reported during the initial stages of the feature release. The problem was later solved using an extension.

Theseus integration

Brackets integrates Theseus, an open-source JavaScript debugger that enables developers to set break points, step through code, and inspect the value of variables in real time. [22] 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.

Extensions

Being built with HTML, CSS, and JavaScript, developers can provide additional functionality to Brackets by creating extensions. [19] [23] 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

Related Research Articles

This is a comparison of both historical and current web browsers based on developer, engine, platform(s), releases, license, and cost.

Mozilla Firefox has features which distinguish it from other web browsers, such as Google Chrome, Safari, and Microsoft Edge.

Netscape Plugin Application Programming Interface (NPAPI) is a deprecated application programming interface (API) for web browser plugins, initially developed for Netscape Navigator 2.0 in 1995 and subsequently adopted by other browsers.

<span class="mw-page-title-main">Aptana</span> Text editor

Aptana, Inc. is a company that makes web application development tools for use with a variety of programming languages. Aptana's main products include Aptana Studio, Aptana Cloud and Aptana Jaxer.

<span class="mw-page-title-main">YUI Library</span>

The Yahoo! User Interface Library (YUI) is a discontinued open-source JavaScript library for building richly interactive web applications using techniques such as Ajax, DHTML, and DOM scripting. YUI includes several cores CSS resources. It is available under a BSD License. Development on YUI began in 2005 and Yahoo! properties such as My Yahoo! and the Yahoo! front page began using YUI in the summer of that year. YUI was released for public use in February 2006. It was actively developed by a core team of Yahoo! engineers.

<span class="mw-page-title-main">Adobe AIR</span> Cross-platform runtime system for building rich web applications

Adobe AIR is a cross-platform runtime system currently developed by Harman International, in collaboration with Adobe Inc., for building desktop applications and mobile applications, programmed using Adobe Animate, ActionScript, and optionally Apache Flex. It was originally released in 2008. The runtime supports installable applications on Windows, macOS, and mobile operating systems, including Android, iOS, and BlackBerry Tablet OS.

<span class="mw-page-title-main">HyperEdit</span> Mac OS X application for editing HTML

Tumult Whisk is an application for Apple's Mac OS X developed by Jonathan Deutsch.

A browser toolbar is a toolbar that resides within a browser's window. All major web browsers provide support to browser toolbar development as a way to extend the browser's GUI and functionality. Browser toolbars are considered to be a particular kind of browser extensions that present a toolbar. Browser toolbars are specific to each browser, which means that a toolbar working on a browser does not work on another one. All browser toolbars must be installed in the corresponding browser before they can be used and require updates when new versions are released.

<span class="mw-page-title-main">Firebug (software)</span> Web development add-on for Firefox

Firebug is a discontinued free and open-source web browser extension for Mozilla Firefox that facilitated the live debugging, editing, and monitoring of any website's CSS, HTML, DOM, XHR, and JavaScript.

iMacros Browser-based application for macro recording, editing and playback

iMacros is a browser-based application for macro recording, editing and playback for web automation and testing. It is provided as a standalone application and extension for Mozilla Firefox, Google Chrome, and Internet Explorer web browsers. Developed by iOpus/Ipswitch, It adds record and replay functionality similar to that found in web testing and form filler software. The macros can be combined and controlled via JavaScript. Demo macros and JavaScript code examples are included with the software. Running strictly JavaScript-based macros was removed in later versions of iMacros browser extensions. However, users can use alternative browser like Pale Moon, based on older versions of Mozilla Firefox to use JavaScript files for web-based automated testing with Moon Tester Tool.

<span class="mw-page-title-main">Web development tools</span> Software used to test the UI of a website or web application

Web development tools allow web developers to test, modify and debug their websites. They are different from website builders and integrated development environments (IDEs) in that they do not assist in the direct creation of a webpage, rather they are tools used for testing the user interface of a website or web application.

<span class="mw-page-title-main">Google Chrome</span> Web browser developed by Google

Google Chrome is a web browser developed by Google. It was first released in 2008 for Microsoft Windows, built with free software components from Apple WebKit and Mozilla Firefox. Versions were later released for Linux, macOS, iOS, and also for Android, where it is the default browser. The browser is also the main component of ChromeOS, where it serves as the platform for web applications.

Modern HTML5 has feature-parity with the now-obsolete Adobe Flash. Both include features for playing audio and video within web pages. Flash was specifically built to integrate vector graphics and light games in a web page, features that HTML5 also supports.

Dart is a programming language designed by Lars Bak and Kasper Lund and developed by Google. It can be used to develop web and mobile apps as well as server and desktop applications.

Content Security Policy (CSP) is a computer security standard introduced to prevent cross-site scripting (XSS), clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context. It is a Candidate Recommendation of the W3C working group on Web Application Security, widely supported by modern web browsers. CSP provides a standard method for website owners to declare approved origins of content that browsers should be allowed to load on that website—covered types are JavaScript, CSS, HTML frames, web workers, fonts, images, embeddable objects such as Java applets, ActiveX, audio and video files, and other HTML5 features.

<span class="mw-page-title-main">Chromium Embedded Framework</span> Free and open-source software framework

The Chromium Embedded Framework (CEF) is an open-source software framework for embedding a Chromium web browser within another application. This enables developers to add web browsing functionality to their application, as well as the ability to use HTML, CSS, and JavaScript to create the application's user interface.

Adobe Edge is a discontinued suite of web development tools that Adobe Inc. started developing in 2011. The tools enhances the capabilities of other Adobe apps, such as Dreamweaver. The first app in the suite was the eponymous Adobe Edge, released in August 2011 as a multimedia authoring tool designed to succeed the Flash platform. In September 2012, Adobe renamed the app Edge Animate, and announced Edge Reflow, Edge Code, and Edge Inspect. Also packaged with the suite are Edge Web Fonts, the PhoneGap app, and an Adobe Typekit subscription. In October 2015, Adobe announced an end to the development of the Edge family. By the end of September 2019, all Adobe Edge products were removed from the Creative Cloud offering.

Google Chrome Experiments Online showroom of web browser based experiments

Google Chrome Experiments is an online showroom of web browser based experiments, interactive programs, and artistic projects. Launched on March 1, 2009, Google Chrome Experiments is an official Google website that was originally meant to test the limits of JavaScript and the Google Chrome browser's performance and abilities. As the project progressed, it took the role of showcasing and experimenting latest open-source web-based technologies, such as JavaScript, HTML5, WebGL, Canvas, SVG, CSS, and some others. All the projects on Chrome experiments are user submitted and are made using open source technologies. As of February 24, 2015, there were 1,000 different Chrome projects posted on the website.

ContentTools is an open-source WYSIWYG editor for HTML content written in JavaScript/CoffeeScript by Anthony Blackshaw of Getme Limited.

References

  1. ↑ Stewart, Ryan. "Brackets 1.0 and Extract for Brackets (Preview) Now Available". Brackets Blog. Adobe. Archived from the original on 8 February 2015. Retrieved 15 November 2014.
  2. ↑ "Release 2.1.3". 31 October 2022. Retrieved 6 November 2022.
  3. ↑ "2.1.1 Pre-Release". 9 May 2022. Retrieved 20 September 2022.
  4. ↑ github.com/adobe/brackets/blob/master/src/nls/README.md
  5. ↑ "Adobe Brackets Code Editor". Technewss. Archived from the original on 2014-12-13. Retrieved 12 December 2014.
  6. ↑ "A modern, open source code editor that understands web design". Brackets. Retrieved 2021-04-23.
  7. ↑ 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.
  8. ↑ "Update about Extract for Brackets (Preview)". Archived from the original on October 5, 2016.
  9. ↑ "Update about Extract for Creative Cloud Assets Online Service and Brackets".
  10. ↑ "Release 2.2.1", brackets: An open source code editor for the web, written in JavaScript, HTML and CSS, Brackets.io community, 2023-03-22, retrieved 2023-09-24
  11. ↑ Adobe Edge Code CC
  12. ↑ LaFontaine, David (2015-01-16). "Adobe Dips Its Toes into the Open-Source Software Waters with Brackets 1.0". Layers.
  13. ↑ Adobe Brackets – open source editor for web designers, 5 November 2014
  14. ↑ adobe/brackets, Adobe, Inc., 2023-02-02, retrieved 2023-02-02
  15. ↑ "Releases · adobe/brackets". GitHub. Retrieved 2023-02-02.
  16. ↑ brackets-cont/brackets, brackets.io, 2023-02-01, retrieved 2023-02-02
  17. ↑ Project Phoenix: Brackets next generations., August 30, 2021, retrieved 2023-12-09
  18. ↑ phcode-dev/phoenix: Phoenix is a modern open-source IDE for the web, built for the browser. , retrieved 2023-12-09
  19. 1 2 "How to Use Brackets", Adobe
  20. ↑ Text Editor Review – Adobe Brackets, January 22, 2014, archived from the original on 2015-03-29, retrieved 2015-03-27
  21. ↑ "Brackets: Free Open Source Code Editor Built With HTML/CSS", Hongkiat, 16 April 2013
  22. ↑ "Theseus JavaScript Debugger for Chrome and NodeJS", Brackets Blog, August 28, 2013
  23. ↑ "A Review of the Brackets Editor", SitePoint, April 18, 2014
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.