Try Tuts+ Premium, Get Cash Back!
A Peek At Brackets
videos

A Peek At Brackets

on Dec 7th 2012 with 89 comments
Tutorial Details
  • Difficulty: N/A
  • Completion Time: 20 Minutes

Brackets is an interesting new editor on the scene that leverages HTML, CSS, and JavaScript to the max: it’s built with those very technologies! What this means is that, particularly for frontend developers, the sky’s the limit, when it comes to configuration and extensibility.

In this video, I’ll go over some of what I consider to be the most innovate features in this new editor, including live previews, CSS highlighting, and quick edits.


Choose 720p for best clarity, or Download the video.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • dave

    Brackets is looking pretty good. is there themes or different styles for it?

    • JeffWay
      Author

      Yeah – there is a themes extension available, with around a dozen choices.

      • Kevin Couto

        Can we develop our own themes?

      • Ian simmons

        Yes and it’s easy! :-) Just installed the extension from here. https://github.com/talmand/Brackets-Theme-Chooser

        Then open extensions/user/Brackets-Theme-Chooser-master.

        Here’s what I did to try it out.

        copied ambiance.css to mycustom.css and then had to do a search/replace ‘ambiance’ with ‘mycustom’ because the editor will use the file name for classes.

        Then in main.js found ‘var modal’ and added mycustom to the options which are for the drop down in the theme chooser.

        restart brackets and go to edit->theme chooser and you should see your new theme there.

        Also you can edit the css for testing in chrome dev tools. I had to restart brackets after playing with the theme.

        It’s just css classes and html elements which is what makes it so easy.

  • mattsah

    It’s an interesting idea. And I for one am in favor of the concept that more non-cloud applications could use the tools of the web for being developed. I’d like to try it but I cannot seem to find a Linux version on their download list. Also, no mention of it on the wiki page.

  • Mohit Seth

    Thats awesome. Worth giving a try.

  • http://www.facebook.com/moncaldeira Ramon Caldeira

    HEAD EXPLODER! =D

  • Ali Baba

    Lately Nettuts don’t have really good tutorial.

    • elijahmanor

      That is some good feedback, however I’m not sure how that applies to this particular post. I’m sure Jeffrey Way, the editor of this site, would appreciate if you could expand upon your impression of recent tutorials. What types of tutorials are you looking for, what do you find lacking, what would you do to make them better?

      As for this post Code Editors are very important to developers and Bracket is a interesting free open source app that Adobe has been making using Web Standards. Personally, I swap between editors looking for one that I find fits my needs, so I am excited to see a new product to keep my eye on.

      • http://twitter.com/chriscandy Christer R Austad

        Being a free resource for developers, Nettuts still are doing a great job. But as a reader of Nettuts since the beginning. I can see that some of the readers might feel that Nettuts don’t meet there expectations. It feels like the site in general have evolved with the knowledge of the staff. So if Ali Baba is a new developer. It could be a bit more difficult to grasp a lot of the concepts presented now than before.

        Sidenote: They should have a feature that made it possible to create a file if you import it in another file. i.e: You import style.css in your index.html. Place your marker inside the href attribute and press CMD+something and the file gets created in the specified path.

      • JeffWay
        Author

        Hey, Christer –

        It’s funny that you should mention that. I thought the same thing, when recording the video. It sure is a shame, when I’m importing this stylesheet, to then have to create the file after. Would be cool if Brackets would detect whether the file exists or not, and, if not, create the file, accordingly.

      • http://twitter.com/closdesign closdesign

        I am assuming someone can make an extension for that since it is not built in. Since it is Javascript based, probably could easily be done by someone with the skills.

    • http://www.facebook.com/AmbFarXcdTlnt Michael Hicks

      Post some better ones then Ali Baba.

    • Andrew

      Can’t agree more. Jeff and other guys are only working on courses I guess. Not sure everybody likes a course for everything.

  • Abdelwahab

    Open Source Software and no version for Linux Users !!

    • Rockstar04

      It is being made by Adobe after all, so what would you expect?

      • Ivo Culic

        That’s so true !

      • kris

        Is this not means that someone’s hardwork contribution will be sold As Mozilla sold their codebase to cloude9. Cloude9 is commorcial software.

      • Ivo Culic

        I meant about if it is open source it can be also for linux too, as we know no adobe products are available on linux distros. (But yet as we see it is made by Adobe, so even if it is open source they don’t care for linux probably at all)

      • kris

        not sure about this.

        I am not linux guys (I use win7) but I have seen some guys using adobe reader on their linux computer.

    • Kim Christensen

      I’m sure you feel, you have a point here, but…

      1: it does not say anywhere, that every single open source project has to cater to Linux users.
      2: it’s open source. If you want a Linux version – make one!

      • BounasserAbdelwahab

        1 – i dont want to spend my battery with you
        2 – i dont have enought skill to make a linux version, you probably do because you’re skilled in blah blah

      • andy

        Just because something’s open source doesn’t mean it HAS to run on linux. You seem to think linux is the central component to open source design

    • Jonathan Jenne

      They are working on a linux version, see here: https://groups.google.com/d/topic/brackets-dev/29vOJ6tvl8A/discussion

    • brickcap

      By the way it is being ported to linux.

  • http://www.facebook.com/rafammotta Rafael Motta

    Do you recommend to use this editor today, or you think we should wait to gain more maturity?

    • JeffWay
      Author

      Depends on your needs. If you’re sticking with relatively simple HTML and CSS, this will work perfectly – and might even be the best choice. But, for more intensive work, it’s still missing some key features. Luckily, the Brackets team is well aware of that, and are constantly doing new sprints. That’s why 2013 will be really exciting for the editor, I think.

      Though, I also hear that Jon is working on some cool stuff for a future update to Sublime.

      • http://www.facebook.com/rafammotta Rafael Motta

        Got it. It’s hard to drop the sublime after all the tips I learned from your tutorials :P

      • Jordan

        I like it, but Sublime has things that I simply could not part with. If Brackets can match some of that functionality that would be great. I like the Live reload, but do you see this packing enough in to stack up against Sublime?

      • JeffWay
        Author

        You won’t get any argument from me that Sublime is a fantastic editor. But Brackets is still very much in development. So, we’ll see. Multiple cursor support should would be nice.

      • Morlas

        Multiple cursor function is actually a feature that determines usability of a editor imho.

  • Jbeja

    Promising, but i will have to wait until the Linux version and a Vi like plugin like in sublime text 2 come out.

  • jtcg_ray

    Whats the app you use to move windows to a corner?

    • Saquib

      Its moom

      • http://twitter.com/closdesign closdesign

        I own a Mac and this should be a feature built into the OSX platform. It has been built into windows since Windows Vista. Don’t need a plugin for that.Odd.

      • JoeMoe

        I agree. In fact a lot of Linux distros have the best of both worlds when it comes to managing multiple windows. Not sure why Apple hasn’t adopted this feature yet.

  • http://www.facebook.com/jesus.bejarano.948 Jesus Bejarano

    Need the Linux version and a Vim like extension.

  • Swagato Bhatta

    Wow. I am using it from today

  • http://twitter.com/jeff_pz_cr Jeffrey Briceno

    Has interesting features, but keep using sublime text, however, as Jeff mentioned at the end, for small things like a front end layout with bootstrap or some other frameworkme is okay.

  • Ian Simmons

    Some really cool stuff. I especially like running the live preview for php and the inline edit popups for html and css. Surely there will be improvements on the console extension. I really love sublimetext2 but this one might pull me away next year.

    By the way, if you use div.container in your css then you can place the cursor on either the div or the class to get the edit popup. Guess it has to make the connection as to which div that way.

  • shivabeach

    Looks like a next gen IDE. I really like the live update and especially the ability to update the CSS file without leaving the php or HTML page. Good stuff, I think its worth experimenting with for Xmas

  • http://twitter.com/notwebsafe nj jaramillo

    Wow, great and very thorough (and up to date!) tutorial–thanks so much for putting this together.

    Couple of notes on things you noticed…

    Good catch on the issue with creating a new stylesheet not refreshing the live preview–I filed this in our bugbase as https://github.com/adobe/brackets/issues/2311.

    We definitely want to have a better workflow for creating new styles from HTML (similar to the quick edit workflow for existing styles)–right now you have to go back to the stylesheet to add styles (or use the hack you figured out of typing a style into another inline editor), neither of which is ideal.

    Regarding Quick Edit, right now it uses a simple heuristic to decide what rules to look for: if your cursor is in a “class” or “id” attribute, it looks for rules with selectors that match that attribute; if your cursor is in a tagname, it looks for rules with selectors that match that tag. As you noted, it’s not currently looking at the entire combination of tagname/classes/id for the tag–this is something we’ll definitely be improving over time.

    Finally, you’re right that opening developer tools in Chrome shuts off the live preview connection. Our live preview uses the remote debugging API in Chrome, and that API can only support one “client” at a time (where the built-in developer tools within the browser also count as a client). We’re working with the Chrome team to see how we could improve the experience here.

    Thanks again for the tutorial–would be great to see an updated version a few sprints from now after we’ve added some more stuff (and fixed more bugs)!

    nj (@notwebsafe)

    • http://twitter.com/notwebsafe nj jaramillo

      By the way, there’s one newer feature that you might want to show if you make another tutorial in the future–if you put the cursor on a color value (in hex, rgb, or hsl format) and hit Quick Edit (Cmd-E), you get an inline color editor that lets you edit the color using a hue/saturation/value/opacity interface.

      • JeffWay
        Author

        Oh nice – hadn’t yet discovered that.

    • JeffWay
      Author

      Thanks for the response, Narciso! And, yes, I’ll absolutely keep everyone updated here with each new sprint. :)

      • http://brocknunn.com Brock Nunn

        Jeff, have you found a place for brackets in your day to day workflow? This seems pretty exciting!

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        I’ll use it for front-end demos and tutorials, but that’s it for now.

  • jaspersam

    this is a rare treat as no one gives much about to the brackets but this also improves the design a lot

  • http://www.codeconquest.com/ Charles @ CodeConquest.com

    I attempted to use Brackets once but it seemed to be full of serious bugs, a lot of features just didn’t work. Has it improved now?

    • http://gabrielmanricks.com/ Gabriel

      Can’t say for sure, because I don’t know when you last used it. But I’ve been using it since version 13 and I remember it being almost unusable for PHP, and there were many crashes. It seems to be working great now. It’s quick to open and a lot less bulky than something like coda 2, so I use it when editing single files.

  • diavlo

    Does it mean that now Adobe fails Adobe Dreamweaver ?

  • theoldfellow

    Why bother? It’s made by Adobe :( and there is no Linux version :(

  • faical faical

    no linux :-(

    why they hate freedom ????

  • jnejunior

    Hello Jeffrey, great post, this editor is very nice, of course he still has to mature, but it’s amazing, will soon be at or above the Sublime!

    I have a request: could you develop as an extension of the Brackets for the Sublime, that (HoverPreview), would be very handy …

    Jeffrey earned.

    excuse spelling errors, but I am Brazilian and I’m using Google Translator.

  • http://twitter.com/chrisberthe Chris Berthe ☻

    This looks really useful. Although the part where you explain it can work with .php files as well (and in your case it does) it doesn’t seem to be working for WordPress installs. For instance, if you’re working off of a template-file.php, it’ll try and load that file after the base URL… which is understandable. I assume it would also be the case when building on top of a PHP framework when dealing with controllers and such. Is there a work around for this?

    • Mike Heath

      I’m loving this great new editor but what Chris says about WordPress applies to Codeigniter as well of course – so Jeffrey, many thanks for the video but how about a tip on previewing with frameworks?

  • Bogdan Georgescu

    Sublime Text 2 forever.

    • http://www.facebook.com/malachi.simonyan Malachi Simonyan

      hell yes!

  • http://www.facebook.com/twhipp Tyler Whipple

    Thanks for this walk through! I am trying to get into web development and I loved seeing the useful features in the browser and how one might use them

  • ArkMan

    Awesome editor Jeff thank you ! Can you recommend editor for JS ?

  • Fily

    Very nice, brackets looks promising. As always, good job Jeffery.

  • Seahorsepip

    Working on scss support :P
    If anyone wants to contribute with ideas feel free, using currently scssphp for scss->css conversion

  • Seahorsepip

    Seems it supports less css, was planning to start using less instead of scss already for quite some time, might gonna make the switch since it’s just a small modification of my files anyway ^^

  • Seahorsepip

    What about firefox support?

  • http://www.facebook.com/adardesign Eliazer Braun

    Hi Jeffery, Thanks for the very interesting peek. looks exciting.
    As usual, you keep us on top of the latest and greatest in web development!

    Btw did you try console.dir? you wouldn’t need that debugger helper

    Thanks!

  • http://www.graphicexpertsonline.com/clippingpath.html Medha

    Strange this post is totally irrelevant to the search query I entered on the internet but it was in first page.

  • Panjijey Panjey

    Can i use it on Mac OS X Leopard ?

  • Ricardo Brown

    i installed the snippets ctr+shift+s works to show the snippets but ctrl+alt+v to add snippets dosen’t work, any ideea?

  • victorzz

    Brackets save my time. thank you Jeff.

  • Ali Baba

    What I wanted to say in my original post is this it’s interesting post about new editor but this is more for small projects. I can’t see using it at my work, it’s too basic. I will give kodos to author for sharing it.

    Regarding tutorials on Netuts+ I can say that it will be more value to see tutorials on some frameworks CSS, PHP, .NET, etc. Tutorials for PDO and usage of PDO with or without frameworks. ORM and usage with or without frameworks. Best practices T-SQL, PHP , .NET etc. Responsive design tutorials. Even tutorials on best way setting up development environments in small, medium, large groups of developers. Best practices using SVN.

    Thanks

    Ali Baba

  • http://www.facebook.com/people/Bram-Dijkhuis/1197332618 Bram Dijkhuis

    This looks promising. I like the minimalistic interface (kinda like Sublime Text 2)…

    I especially find the quick edit option interesting, but I’m just wondering… I use less a lot and I like to keep my css organized by importing different less files into 1 and then compile that file into a single style.css. Would quick edit work with this set up?

  • http://www.codedevelopr.com/ Jason Davis

    Thanks for sharing, to be honest I thought the idea of another HTML, CSS, JavaScript based editor was really stupid…that is until I took the time to look at it and see that it has the C++ wrapper that allows it to function as a native Windows or Mac application. I can see how this could actually be even better for Web Development than Sublimetext which which I am in love with already but this is pretty awesome!

  • Nimsrules

    Looks promising, yet Sublime Text 2 = ~fTw~

  • Swasb

    Another good visual authoring tool based on HTML 5, CSS 3 and Dojo is Maqetta.

  • Mike Erickson

    Wow, that is some amazing work for a experimental build. Can’t wait to see how this project evolves (and pushes native apps such as Coda2 or Espresso) to play catch up.

  • http://www.facebook.com/people/Bram-Dijkhuis/1197332618 Bram Dijkhuis

    Is there a way to use the Quick Edit function when your working with several .less-files which get compiled into one main css file?

  • TheRogueSkolar

    Open source and no support for ‘nix—fk outta here! But it’s made by Adobe so that figures smh. Oh well ST2 + Compass App + Live Reload = FTW!

  • http://about.me/lauhakari Lauhakari [mikko]

    Seems like every *unix fanboy seems to think “open source” means “unix software”, it does NOT. So stop bitching *hahah*
    And the reason they have not made *nix a priority, well maybe the figures below might explain…

    Operating System statistics from Net Applications, Dec 2012
    Windows  91.58%
    Mac OS X  7.05%
    Linux  1.19%
    Other  0.18%

    • Krisjanis Berzins

      is that stats for general public or developers?

  • lkk

    there should be a better way

  • mcnute

    Hey Jeff, what tool are you using to make your screen split like aero snap tool in windows 7 on your mac?

  • Petras

    Could anyone tell me how to delete “Getting Started” in left panel? Or change it to my default html and css files for start?

  • http://twitter.com/jefftschwartz Jeff Schwartz

    Well there are lots of good tools coming down the pike for 2013: WebStorm 6; ST3; Brackets, etc. It’s an exciting time to be a Web developer, even for old farts like me lol.

  • LoremIpsum666

    I have participated this week in a video-conference given by Raymond Camden, an Adobe senior author about Brackets and I assure you that for web development, it far exceeds Sublime Text. Many “essential” extensions are already available for this tool (Emmet, JSHint, Caniuse ….) to the following link:
    https://github.com/adobe/brackets/wiki/Brackets-Extensions
    but it remains to me faster and lighter than Sublime Text2. And there is only previews versions, waiting to see what the final version will bring! :)

  • Omar Elrafie

    does it have ftp?

  • lifegiver36

    I have been using this editor for about a month straight now and its becoming my favorite. My favorite editor is sublime text, which is an awesome editor, but this one is gaining on it. It has some very good plugins, not as many as sublime text but I am sure that will change over time. Also, adding new plugins is extremely simple, just paste them in the plugins folder and you are done. Just like sublime text it has a very simple and nice design to it. It has that cool auto update feature and many built in features that work great. The best thing though is that it starts up very fast, which still amazes me. Its a free editor so there is no reason for anyone not to try it and give it chance. There is also a theme plugin which will make it look similar to sublime text if you prefer that instead of the default light theme it comes with.