Brackets Sprint 15 Build

Article by: Adam Lehman

Brackets Sprint 15 Build

Download Sprint 15:

A lot has happened in the past few weeks and the Sprint 15 build shows it. Less than one month ago we released a new distribution of Brackets, Adobe Edge Code, tailored for the Creative Cloud member. It was quite a bit of work, so we decided to reward ourselves by taking a few days off of the backlog to work on personal projects and features. Then we traveled to London and held our very first hackathon where we picked up some new contributors.

HTML Live Reload

Up until now, Brackets has only supported Live Development for CSS. It was pretty straight forward to swap out CSS in the browser, but it’s a completely different problem to bring that type of live development to HTML. It’s likely that the DOM in your browser is just a derivative of the DOM in your editor, which means we can’t just swap out HTML for true live development. So, before the sprint began, the team got together around a whiteboard and started planning out Live HTML Development in Brackets. As you might expect, this is a pretty complex problem and not something we can solve in a single sprint. In the meantime, we didn’t want to prolong the “save-reload” dance, so we implemented a HTML Live Reload.

Brackets Live Reload
Save the file to automatically reload the browser.

If you are in Live Development mode and make a change to an HTML file, we show you a “dirty” mark on the status icon. This lets you know that they HTML file you are editing isn’t in sync with browser. When you save the file, we will automatically reload it in the browser for you. Sure, it’s not Live Development, but it’s handy. Hopefully it will help tide you over until we get the real thing sorted out.

Tabs v. Spaces

As developers, we agree on a lot, but one of the few things we don’t usually agree on is coding style and in particular whether to use spaces or tab characters when indenting code. Thankfully with Brackets, we don’t have to agree. You now have the ability to specify space or tab characters as well as the number of characters to be inserted when you indent. This preference is currently used across all the files you edit. In the future we’ll automatically detect the indentation type and remember if you change it per file.

How do you control this marvelous setting? Read on.

You’ve Got Status (bar)

We felt the natural place to display and configure code indentation was in a bottom status bar, something that has been missing from the Brackets UI. This meant we needed to design and implement a status bar before we could call the Tab v. Spaces feature “complete”. As luck would have it, moments after planning out the work, we got a pull request from Chema Balsas that included a new status bar! We got to meet up with Chema at our first hackathon in London where he tweaked it a bit and we immediately pulled it into master.

Brackets Status Bar
The shiny new status bar in Brackets.

In addition to setting indentation type, the status bar provides information about the document you are editing. You can instantly see the cursor position on the far left and on the right you find the total line number and file type. We also moved the JSLint icon to the status bar. When it’s red you’ve got problems. If you fix all the errors you’ll be awarded with a gold start. If JSLint is disabled the star is gray.

Features. Features. Features.

As mentioned above, we got to spend a few days working on whatever we wanted. As a result, there are several small features we wanted to get into Brackets sooner than later. After all, we use Brackets to develop Brackets so you can think of this list as our latest “must have” features.

User Experience


Code Editing

Files and Folders

Language Support

Community Contributions

We accepted more contributions in Sprint 15 than any other prior sprint. Some of the features have been mentioned above, but here is the full list. The community played a large part in shaping this build and it shows. Thanks to everyone who helped push tooling for the web further!

You can read all the nerdy details in the Release Notes.

UPDATED: Coming Up Next

In the next few sprints, we’ll be focusing on some bigger ideas. We’ll continue to make progress with Live Development for HTML by enabling url mapping, integrate a new visual color selector and spend some time helping contributors get their pull requests committed. Our new build should be ready sometime around November 7th.

Thanks for checking out Brackets and keep the contributions coming!

Leave a Reply

Your email address will not be published. Required fields are marked *