Brackets Blog

code the web

Brackets: The Open Source Code Editor for the Web

Brackets is a new open source project founded by Adobe to push tooling on the web forward. Based on the principle that the best developers to build tools for web developers are in fact web developers, Brackets is built in JavaScript, HTML and CSS. MIT-licensed and hosted on github, Brackets is a project that challenges the status quo in not just how it’s built, but also with its innovative ideas.

There are a lot of text editors out there, but not too many care exclusively about web developers. Brackets plays favorites and is optimized for the modern web. It’s for designers who are as comfortable writing HTML and CSS as they are in Illustrator and Photoshop. It’s also for JavaScript developers building complex apps targeting not only the browser, but everywhere the open web runs.

Because it’s built in JavaScript, HTML and CSS, if you use Brackets, you have the skills necessary to customize, extend and contribute to it. Easy to fork and with a flexible and open license, it truly is your editor. In fact, when you first open Brackets you’ll be looking right at the Brackets source code. On the team, we use Brackets to develop Brackets in this weird inception-style-yin-and-yang type of thing.

Another incredible benefit to developing with open web standards is Brackets has the potential to run nearly everywhere. While we’re focused on the desktop first, we hope to supplement that version with a version of Brackets that can run exclusively in your browser. We also have a few ideas about how Brackets might be able to turn your tablet into your development environment. Brackets could also be embedded in your existing web applications. With a little help, all these versions could be developed in parallel. The possibilities are wide open.

In addition to how it’s being built, Brackets has a few ideas that make it special:

The Brackets team isn’t down with floating panels, cluttered toolbars and other distractions. We want to keep it simple yet productive. We strongly believe it should just be you and your code and one of the way Brackets maintains its minimal design is through a new idea called Quick Edit.

Every web project consists of several interrelated HTML, CSS and JavaScript files that are normally spread across the top of your editor in the form of tabs. In your common editors, it’s your job to keep a mind map of how all these files interrelate. If you want to apply or tweak a style on an HTML element, you have to located the right stylesheet; scroll around or quick search for the class; edit; save; then return back to your original file. In Brackets you simply open a Quick Edit by hitting Cmd/Ctrl + E. Brackets rips open your current document and displays only the CSS classes that apply to that element inline. It’s something you have to see to believe.

 

We can also apply the same ideas to JavaScript development. Smash the Quick Edit key on a function call and Brackets opens an inline editor with the JavaScript function body ready for edit. Instead of managing documents, developers can dive in and out of their code with ease. All this is included in the current build (Sprint 10).

Of course, we aren’t just limited to using Quick Edit for coding functions. In the future, Quick Edit can also be used to display visual tools inline like a color picker, gradient designer or even just related documentation. Because Quick Edit isn’t a floating panel, it never obscures your code which makes it moar awesome. Want to try your hand at building an inline tool? There are already plenty of open source extensions to learn from.

Another core philosophy behind Brackets is that code should live in your editor but run in the browser.

Today we’ve all gotten used to doing the save-reload-copy-paste dance. In a generic text editor, you’re likely saving your code, switching to your favorite browser and hitting refresh. While your code is running you likely leverage in-browser tools to debug the application or tweak the design. You make several changes to get everything the way you want and then you have the epic chore of copying and pasting all those changes back to your editor. We call shenanigans.

Brackets opens a live connection to your local browser and brings some of those in-browser tools back into the editor where it makes sense. When Live File Preview is enabled your browser shows real-time changes to CSS classes and properties as you type. Because the code lives in your editor but runs in your browser there is no need to save-reload-copy-paste. w00t!

The current build of Brackets only supports Google Chrome for Live File Preview, but we hope to make this same connection to other browsers simultaneously with a little help from the browser makers. We prototyped support for the live editing of HTML and JavaScript and plan to include this ability in a future build. Just check out the public backlog to see what we’re working on next.

We need your help. There is a lot of work to do before Brackets is ready to be your favorite code editor. We want Brackets to be a truly open project, so we decided to develop Brackets in the open as soon as possible. So on May 1 we opened up our github repositories and started taking pull requests from the general community. We also posted our entire backlog of ideas and future features on Trello.

If you look through our issues in github, you might notice a tag labeled “starter bug“. These are smaller issues that the team thinks will make a good introduction to working with and contributing to the Brackets codebase. If you are feeling a bit bolder and want to take on a larger task, you will find a “starter feature” label in our backlog. These are smaller features that are great for new Brackets developers who are still learning the code. We think that everyone can and should contribute to open source projects, so we’re lowering as many barriers as possible.

Not all ideas makes sense to be added to the core codebase and for that reason, we’ve spent the past several sprints refining an extensibility API. Our growing community has already created several open source extensions ranging from inline MDN documentation (Pamela Fox) to JSHint and CSSLint integration (Ray Camden) to snippet support (John Rowny). We on the Brackets team are implementing several features like Quick Edit as extensions to keep the project modular.

As I mentioned above, we really need your help to make Brackets awesome. We hope that ideas like Quick Edit and Live File Preview help plant a seed for new ideas of your own. We invite you to start hacking away, join our developer mailing list and hang out with us on IRC (#brackets on freenode).

There is a lot to cover here with a single blog post, so expect to hear a lot more from us. In the meantime, you can browse the growing project documentation on our wiki, follow us on Twitter or watch videos from our first hackathon.

If you are at Google IO this Wednesday, be sure to stop by and meet the team. We will be in the Chrome Developer Sandbox.

http://github.com/adobe/brackets

Adam Lehman
Brackets Product Manager

51 Comments

  1. [...] you have the skills necessary to customize, extend and contribute to it.” Check out their introductory blog post, and see some of the features in [...]

  2. Nabeel says:

    is is amazing, It should have support for php and it’s features like zend studio and Brackets will be number #1 with no competition.
    Good work guys

    • Chris says:

      Check out Sublime Text 2. It already blows most other IDEs out of the water.

      • Santosh says:

        this is really cool stuff. But these days most of people are moving to sass compass haml jade coffee scripts for html css and javascript. I wish these kinda feature will be soon available in those language.

    • bill says:

      Sorry, but you are just asking for way too much bloat there. When you start adding support for auto-complete/multiple languages, etc you end up with junk like Ace Editor

  3. Kevin says:

    This project has massive potential to be the next default code editor for web development. Excellent work, guys!

  4. [...] Adobe Brackets: The Open Source Code Editor for the Web [...]

  5. Thomas says:

    I Don’t know if adobe has noticed, but the web is no longer created in Dreamweaver. People don’t keep monolithic HTML files around in their repos any more.

    We have partials, and the they are generally composed by application specific logic, so there is no way to effectively map HTML tag to CSS selector anymore.

    I’m interested to see that everyone has switched from writing their own blogging software to writing their own “Code Editors”, but ultimately integrated toolchains are going to win out over toyware like this.

    • notwebsafe says:

      Actually, we do have some prototypes for tracing between source HTML (including client-side templates) and rendered DOM nodes. We can also leverage the browser to give us a lot of information about what’s going on at runtime.

      Dealing with server-side templating is a little harder, but we have some ideas there as well. We’d like Brackets to be a good platform for experimenting with novel tooling ideas. If you have some, please participate! :)

  6. Sagar says:

    Sounds really awesome!
    Can’t wait for this editor to come out!

  7. Hemant says:

    Mind sharing how you created the video, which tool you used to make the video.

  8. Yes, yes, and yes. This is awesome. Please put up a donate button or even better start a Kickstarter project.

  9. Devin Walker says:

    I’m very impressed! The live editing is something I’ve been looking for for a long time. Hopefully PHP support is built-in or coming soon! Keep up the solid work.

  10. Kevin Smith says:

    If the QuickEdit feature would work on templates/partials. Features like autorefresh of the browser … you can already get that with tools like CodeKit or LiveReload. Looks like an interesting project, I will keep an eye on it.

    • Peter Flynn says:

      Although you’re right that those those features are quite similar, Brackets is trying to take it to the next level. You don’t have to save, it just updates continuously as you type. And the page doesn’t actually reload from scratch, so you don’t lose any state (navigation within page, etc.).

  11. yaqian says:

    Awesome work! I’m also curious about how the video is created.

  12. STEVEJOBS says:

    That in app file menu is a crime against UI design.

  13. This is fantastic. Going to see how to nudge stylus and coffeescript into this thing (if it hasn’t been worked out already)

  14. Edwin Yip says:

    Awesome! Honestly, if Brackets was available one year ago I might wouldn’t have started building LIVEditor (http://liveditor.com).

    LIVEditor was started because of the #2 reason you illustrated in the video – the gap between editing code and the inspecting it using Firebug or Chrome’s Dev. Tools…

  15. nico says:

    Very impressive! let’s try brackets now!

  16. [...] Adobe Announces Brackets: The Open Source Code Editor for the Web 1 Upvotes Discuss Flag Submitted 1 min ago Jonathon Colman Web Development blog.brackets.io Comments [...]

  17. Mark says:

    Cool stuff, love to see how this app evolves. BTW I would love to have access to FTP, because my new philosophy behind a nextgen code-editor is that code should never live on ‘my computer’ anymore.

  18. Jaems says:

    This is definitely cool. A portable editor would be nice, but I’d like to see more integration with an actual stack such as Rails/etc. This will be interesting to play with. Great work!

  19. Bart Lewis says:

    So full of win. Lot of great ideas. Really looking forward to getting some one on one time with Brackets.

  20. chris kluis says:

    Awesome! Personally I love this concept of single integrated (inline) solution for web design/development. The only thing that would be sweet to add is the browser into the solution.

    There is no reason on a 1900 monitor that you couldn’t have the menu on the right, the main code panel, and the browser. That would seem to be a very well composed workflow.

  21. Ape says:

    Very interesting approach. Didn’t expect to see a code-editor by Adobe for coders anymore. Although I’m used to code without unnecessary toolbars and wysiwyg-helpers for some time now and wouldn’t want to go back anymore, I still miss some basic comfort functions in my current editor of choice (Phpstorm), for example dreamweaver’s file-dialog or primitive drag&drop support for assets like images (and then auto-include the relative source-path to the document/asset…).

    While watching the video I had some thoughts about features I would like to see / that would make my live as a frontend-developer much easier, especially as Adobe stands behind this project/editor what could help to implement some of the features that relate to .psd-files or layout to html conversion.

    Meanwhile I switched from pure CSS to SASS (LESS would also be an option). If an editor like “Bracket”, specifically its inline editing possibilities of linked resources, would also support the usual suspects of CSS Preprocessors or bring something own with the same features (e.g. Variables, Mixins, …) including the compiler it would be very attractive. Working without preprocessors again, once you got used to it would feel like a big step backwards, considering comfort, multi-developer workflow and time.

    Another feature I wished ever since the browser-support for shadows and gradients became pretty solid was a easy/comfortable solution to extract the specific fx-properties of a photoshop-layer and convert it to the proper css-syntax (including vendor-prefixes). I know there are some basic web-tools out there and limitations (e.g. blend modes and some other stuff) but it would help a lot, if you wouldn’t have to convert every photoshop layer/shape-setting of a complex layout by hand (maybe a kind of file/source-connect menu and a drop-down for all layers with processable layer-settings?). If these extracted properties could be combined with a dialog-window where you can alter/do some basic tweaking it would be a real time-saver.

    Just my 2Cents

  22. [...] out Brackets, an alpha-ish open source code editor for the web from [...]

  23. [...] learn more about the Brackets check out this blog post. And you can also follow the latest developments on Twitter: [...]

  24. Haakon Løtveit says:

    How does this compare with GNU Emacs?

    Support for Ruby, Javascript, Python, PHP, Java, C, etc…
    HTML and CSS support is there, with autocompletion, templates, snippets and more. Instant validation of your webpage, and you can talk to the browser and have it show you the site.

    It can also give you REPLs for almost every language that have them, from Scheme to Haskell.

    So… If I already know Emacs, why would I want to switch?

  25. [...]   Brackets 是 Adobe 资助的开源项目,针对和面向 Web 开发者和 Web 设计师,基于 JavaScript、HTML 和 CSS,源代码托管在 Github 上,采用 MIT 许可证。 [...]

  26. [...] Brackets 是 Adobe 资助的开源项目,针对和面向 Web 开发者和 Web 设计师,基于 JavaScript、HTML 和 CSS,源代码托管在 Github 上,采用 MIT 许可证。 [...]

  27. erjantj says:

    About 3rd Idea.
    Why don’t to create a javascript plugin that will be automatically(hidden from user) included by Brackets into curent editing document (ex:index.html). It won’t be shown in editor. This javascript plugin will attach listeners for all DOM elements so that it will apply hightlight effect on hover event. Also you can add click event to DOM so that it will move cursor in editor to that DOM element.

  28. [...] Adobe publicou detalhes do Brackets, seu novo editor de código para desenvolvimento web que usa HTML, CSS e JavaScript. O [...]

  29. [...] grundlegenden Ideen von Brackets werden in einem Blog-Beitrag erläutert. Brackets ist in JavaScript, HTML und CSS geschrieben und läuft als eigenständige [...]

  30. This makes web development way easier… Thanks for sharing!

  31. Matt says:

    I dunno guys. I’ve got this hunch that Microsoft FrontPage is gonna make a comeback!

    ;-)

  32. ozten says:

    Why not contribute Quick Editor and other features to Cloud9 (http://cloud9ide.com/), SublimeText, or another existing Open Source project, instead of starting from scratch?

  33. [...] podaÅ‚o szczegółowe dane nt Brackets – nowego edytora kodu dla webmasterów. ZostaÅ‚ on zbudowany z wykorzystaniem HTML, CSS i [...]

  34. [...] Brackets: The Open Source Code Editor for the Web | Brackets Brackets is a new open source project founded by Adobe to push tooling on the web forward. Based on the principle that the best developers to build tools for web developers are in fact web developers,… [...]

  35. Alex says:

    You could use Function.prototype.call to get around “var self = this”:

    Whatever.prototype.method = function() {
    function inner() {
    this.x = 1;
    }

    inner.call(this);
    };

  36. [...] Are you technically weak but good at marketing? Neither is right for you.Powered by Yahoo! AnswersLaura asks…seo sites and software….?tell me some sites and software that mostally used by seo pr…ong> that mostally used by seo professionals.seoblogger answers:Google Insights, Google Trends and [...]

  37. [...] has published details of Brackets, its new code editor for web development using HTML, CSS and JavaScript. The editor has [...]

  38. [...] Adobe Brackets – אדובי הפתיעה, עם פיתוח של עורך קוד מבטיח במיוחד. העורך פותח ב-Javascript/HTML/CSS במיוחד עבור מפתחי ווב ומורכב משלושה רעיונות מרכזיים: [...]

  39. [...] Brackets Adobe firmasının açık kaynak kod dünyasına sunduÄŸu hafif bir web editör aracı. Åžu anda uygulama Mac ve Windows platformlarında çalışabiliyor ve yaklaşık 30Mb boyutunda. Brackets daha çok HTML , Css ve JavaScript üçlüsünü kullananlar için ideal. En önemli özelliklerinden birisi bir Html sayfası düzenliyorken bir form elemanının üzerine adanmış Css kodlarını, aynı pencerede düzenleyebiliyor oluÅŸunuz. Yapılması gereken ÅŸey form elemanının üzerine gelmek ve Ctrl+E tuÅŸu ile Quick Moda geçmek ve düzenlemelerinizi aynı pencerede yapmak. DiÄŸer bir önemli özellik ise çalıştığınız Html, Css ve JavaScript kodları üzerinde yapılan deÄŸiÅŸiklikler aynı anda web browser’a da senkronize ediliyor olması. Ayrıca sözdizimi renklendirmesi de bulunuyor. Bir de intellisense özelliÄŸi eklenirse bence Brackets tadından yenmez bir hal alır. AÅŸağıdaki tanıtım videosunu izlemenizi tavsiye ederim. [...]

  40. [...] Brackets – An open source code editor for the web [...]

  41. Mares says:

    I want to congratulate you for this awesome application. Light-weight, easy to use and very well design. Keep it up! :)

  42. Nikola says:

    Taught of adding a ‘Zen coding’ support or should i get to work? :3

  43. Ragers says:

    Hi, I think this is a great program. Only barrier at the moment I’m facing with this is that we use php. Will there be an option soon to compile and display php files on the fly?

  44. [...] http://blog.brackets.io/2012/06/25/brackets-open-source-code-editor/ By אריק 18:14 2 ביולי 2012 כללי לידיעתכם brackets עורך קוד No Comments « ראיון בלעדי עם מומחה וידאו של אדובי ×’'ייסון לוין [...]

  45. [...] Brackets: The Open Source Code Editor for the Web [...]

  46. amrabdelaziz says:

    i have bug
    Oops! I can’t find the brackets index.html file

    The “brackets” folder that contains the HTML/CSS/JS source code for Brackets might be missing. Here are some tips for troubleshooting:

    If you downloaded Brackets from GitHub, you might have clicked the “Download as ZIP” button, which doesn’t work. Instead, go to https://github.com/adobe/brackets/downloads and choose the newest ZIP file link under “Download Packages”.
    If you cloned the brackets-app repo from GitHub, make sure your submodules are updated by running
    git submodule update –init –recursive inside the brackets-app folder.
    Don’t move the Brackets.app file out of the bin/mac directory. (We’ll make this a real package eventually.)
    If all else fails, contact us at:
    Twitter: @brackets
    IRC: #brackets on freenode
    Developer mailing list: http://groups.google.com/group/brackets-dev
    Sorry about the inconvenience. We’re still really early in development and haven’t had time to build an installer.

  47. [...] Open-Source software Brackets is a neat way to edit HTML, CSS and [...]

  48. [...] Open-Source software Brackets is a neat way to edit HTML, CSS and Javascript files for a page. Everything you’re working on [...]

  49. [...] la entrada Brackets: The Open Source Code Editor for the Webnos explican el origen del proyecto y sus objetivos. En Building a Desktop-Quality App on Web [...]

  50. [...] Open-Source software Brackets is a neat way to edit HTML, CSS and Javascript files for a page. Everything you’re working on is [...]

  51. [...] like Mashable Seurat.js-A Raphaël Plugin for Creating Beautiful Pointillized Animations Brackets: The Open Source Code Editor for the Web Add Shortcut Links to the WP Toolbar How Much Does a Responsive Web Design [...]

  52. syncmaster says:

    Wow great idea and great job guys !
    a secure FTP access would be great… and to upload files like in dw with [ctrl + shift + u] or something like that :-)

    The 2nd idea is to have a proposal list for html tags and css properties

  53. Alice says:

    hi, i cant use it on mac’s OS:mountain lion
    brackets-sprint-16-MAC.dmg — Brackets Sprint 16 Build – MAC (11-8-2012)

  54. I really love the idea of Brackets. I know it’s new. For now missing features such as FTP, github integration and other cool features that I find in PHPStorm.

    Hope those will be there soon :)

    Thanks

  55. Nic Johnson says:

    It looks very impressive, but… Rails, Haml, SASS?

  56. Robert says:

    You have a nice code editor. My only concern is that on the Mac you’re using Chromium instead of Webkit. This means, especially since Google has decided to leave Webkit, that your code editor is not very good for developing Web apps for iOS (iPhones and iPad). You must be aware of the bugs in Chrome affect 3D transforms and that Chromium uses a completely different JavaScript engine from Safari on desktop and mobile. It would be nice to offer the users the option to choose to see their apps running on Safari on the Mac so we can be sure things are rendering and working properly.

    • Adam Lehman says:

      Robert,

      We’d love to bring Live Development to browsers beyond Chrome. We’re working with (urging) the other browser vendors to implement a remote debug protocol — how Brackets is able to communicate with the browser. This is currently implemented in Safari for iOS, but not OSX. Mozilla has recently talked about building a remote debug protocol as well and we’re looking forward to adding Firefox support. Microsoft has *hinted* about a similar API.

      -Adam

  57. Pam says:

    If you want to take much from this article
    then you have to apply such techniques to your won blog.

33 Trackbacks

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*


eight − 8 =

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>