On Wednesday, 7/24 I had the chance to sit in on a great talk by Adam Lehman (@adrocknaphobia), Sr. Product Manager at Adobe Systems Inc at OSCON 2013. The talk was named "Brackets: An Open Source Code Editor For The Web", and it covered an introduction to the code editing software, as well as an overview on the benefits of being an open source editor.

UPDATE 9/26/2013: I've been using the Brackets editor in my own work flow since the end of July and it's been a blast to work with. They've kept releasing new versions every few weeks bringing more features and stability.

I've had the latest Brackets Sprint 31 Build for almost a week now, and finally they added live HTML editing!

As someone who edits HTML on a daily basis, words can not express how excited I am about this!

Before HTML live editing

  • Create HTML file in Brackets
  • Open HTML file in Live Preview
  • Make change to file in Brackets
  • Save HTML file in Brackets
  • Reload browser to see changes

HTML live editing

  • Open Brackets Live Preview
  • Make changes to file and see it live!
brackets live html edit

If you edit websites, and need an awesome free HTML editor, I'd strongly recommend downloading Brackets!

Some of Adam's key points right off the bat on why Brackets was a bit different than most code editors out there:

  • Light weight text editor rather than big IDE, middle ground, simplicty but powerful
  • Community driven to be different
  • Optimized for web design and developers
  • A sandbox where the web can experiment with new ideas in web tooling

Below is a video I found of Adam's talk from another venue, but with very similar content to the one he gave at OSCON:

Quick Edit

For web designers tools shouldn't get in your way of writing beautiful code. The current workflow for most code editors requires you opening up an HTML file along with a CSS stylesheet, and going back and forth adjusting your edits in both to end up with the final product. In a lot of cases you'll also have some JavaScript thrown into the mix in yet another separate file.

The design and workflow in Brackets tries to let you stay all in one place as much as possible, without the need for continually switching to your included files to adjust settings.

Ctrl - E - Inline editor

As you can see from the screenshot below, I was typing up this article in Brackets. You should notice two things that I've highlighted and drawn arrows for. In the main code editor window with Brackets opening the file index.htm, I'm on line 12, and that paragraph element has a class of intro assigned to it. Instead of having to pull open my style.css file seperately and then hunt down the corresponding CSS class, I simply hit Ctrl-E to open the Inline Editor.

I did the same thing at line 14 of my main index.htm file. Now I can easily see that the <p> paragraph tags are getting a margin: 10px; applied to them from line 9 of my style.css file, and the class intro is setting margin: 25px;

I can adjust these CSS values on the fly and see the changes instantly when using the Live Preview feature of Brackets (currently only supported with the Google Chrome browser). Then when I've made my inline edits to my liking, when I hit save it goes and updates the actual style.css file for me.

quick edit in Brackets code editor

Ctrl - K - Quick Docs

Another cool feature of Brackets is the ability to highlight CSS rules and then hitting Ctrl-K to open up the Quick Docs powered by docs.WebPlatform.org. You can see in the screenshot I took I was checking out the documentation for the margin rule.

quick edit in Brackets code editor

Brackets technology

The stack that Brackets is built upon is all open source web technologies:

The future of Brackets

Brackets is currently released in what are called Sprints, these are basically concentrated periods of development on typically a 2 and a half week cycle. So there are always new features and improvements being added to Brackets.

One goal of Brackets is that by the end of 2013 version 1.0 will be released to the public, and that full HTML live editing should be supported by then as well as being embeddable into common CMS web applications. Just a few days ago a preview version of Brackets on Linux just became available which shows Adobe's dedication to this project.

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

0 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!