6 ms·

Brackets – open-source code editor built with the web for the web

94 points by flipstewart 14y ago

snprbob86 14y ago
Demo?
- just2n 14y ago
  TFA: https://github.com/adobe/brackets/downloads https://github.com/adobe/brackets/downloads Has builds for OSX and Windows.
  - snprbob86 14y ago
    Skimmed the site and saw: "FOR THE WEB, BY THE WEB" "Brackets is built using HTML, CSS and JavaScript. If you can code in Brackets, you can code on Brackets." "WORKS WITH YOUR BROWSER" Spent 5 seconds skimming the page up and down for a "Try It" or "Get Started" link, but only found "Check It Out". After 3 seconds of reading, I re-interpreted "Check-Out" as in the source code sense. Re-scanned the page, no other obvious demo headings, so I closed the tab. Despite the page's high level of visual polish, it completely failed at explaining to me what the app was and how I should go about getting it.
    - dorian-graph 14y ago
      For me, this is how it happened—I looked at the screenshot and liked how it looked then read the About Brackets blurb to get a good idea. Finally, I found a Mac binary easy enough from the Check It Out part. Obviously, both these experiences are quite different and both would lead someone to make a certain conclusion about the website. Which is 'correct' then? Personally, I just hope some of the neat features (Inline CSS editing) appears in Sublime Text 2.
    - ryanstewart 14y ago
      Good feedback. We just fixed the page to say "Try it" instead of "Check it Out". =Ryan ryan@adobe.com
- flipstewart 14y ago
  http://html.adobe.com/edge/code/ http://html.adobe.com/edge/code/ This is Adobe's branded preview with their extensions, and just2n has supplied the Brackets builds.
desireco42 14y ago
interesting, that is all I can say. I see it is made with special focus on javascript, that is definitely welcome. Code looks really awesome.
dqminh 14y ago
anyone knows how does this perform compared to http://ace.ajax.org http://ace.ajax.org ?
- chr1 14y ago
  this uses codeMirror as a core editing component ace is faster and more code friendly than codeMirror. (multiSelect, indentGuides, folding) but codemirror is smaller and supports variable width and bidirectional fonts currently there is no comparable desktop project using ace but maybe there will be something soon http://www.indiegogo.com/happyedit http://www.indiegogo.com/happyedit
woah 14y ago
Man, I really wish I could use this, I code JS, HTML, and CSS all day, and would love to hack on my own editor, but don't have the time to learn lisp or c. No linux version :(
- flipstewart 14y ago
  You could always make the Linux version!
  - zanny 14y ago
    It probably runs under Wine, looking at the binaries it seems to be built against dx9 and gl ES, so it hopefully would default to gl ES if any problems come up.
    - aliem 14y ago
      the container application is based off CEF3 ( http://code.google.com/p/chromiumembedded/ http://code.google.com/p/chromiumembedded/ ) , here is the repository https://github.com/adobe/brackets-shell https://github.com/adobe/brackets-shell
    - antihero 14y ago
      Whilst Wine is a good stop gap, it makes things ugly as sin and clunky feeling and is is nowhere near as good as a native experience. Why would anyone switch to a program you have to run in Wine when there are already excellent editors out there that are native, such as Sublime Text 2?
- ytpete 14y ago
  A bunch of people are looking into getting it working on Linux: https://groups.google.com/forum/?fromgroups=#!topic/brackets-dev/29vOJ6tvl8A https://groups.google.com/forum/?fromgroups=#!topic/brackets...
just2n 14y ago
So I'm used to debugging in Chrome, so I instinctively open the browser's dev tools to find that this breaks the Live Preview. It feels somewhat like there's a quantum property here: things work like magic (the browser is apparently opening a static CSS file from file://), but as soon as you try to observe it, it starts behaving as expected (no live updates for you!). That seems a little bit odd.
- ytpete 14y ago
  Brackets core contributor here... The reason for this is the webkit remote debugging API is used both by Brackets' "live preview" as well as by the developer tools panel. The remote debugging API only allows one connection at a time, so one kicks the other off the connection. Here's the Chromium bug: http://code.google.com/p/chromium/issues/detail?id=129539 http://code.google.com/p/chromium/issues/detail?id=129539 And a related discussion thread: https://groups.google.com/forum/?fromgroups=#!topic/google-chrome-developer-tools/yILc8RYUz48 https://groups.google.com/forum/?fromgroups=#!topic/google-c...
deleted 14y ago
[deleted]
- flipstewart 14y ago
  How is it abandoned if the last build was released two weeks ago and the last commit was four hours ago?
eggsby 14y ago
Why would I want to use or contribute to this over something like http://codemirror.net/ http://codemirror.net/ or the various tools powered by codemirror? (light table, jsbin, etc) edit: I see that this is also powered by codemirror, the editor itself, so what does this offer on top of it? I can't even find a feature list on this page, and after signing up for the adobe ~cloud~ I haven't been able to make my way to a working demo of the application...
- grey-area 14y ago
  The docs are a bit confusing - given the target market they should change 'Check it out' to demo or something, but there are binaries you can download for Mac and Windows, you don't have to sign up for the Adobe Cloud thing at all. It's a desktop app, and here's what it looks like: https://github.com/adobe/brackets/wiki/Brackets-Screenshots https://github.com/adobe/brackets/wiki/Brackets-Screenshots A quick off-the-cuff comparison, not being familiar with all of these tools, I'm sure others will jump in and correct/clarify: CodeMirror - this is for embedding in pages only, and has no way of editing files etc, so you'd need to use a wrapper like: CodeMirrorUI - a wrapper using the API to add some editor-like functionality, but it's still not a standalone editor app. Light Table requires Java, and is focussed on Clojure (and JS?) right now, so although the ideas and interface have been borrowed from in Brackets, it's not really in the same space right now, and is likely to diverge as time passes. Jsbin - this is probably the closest in feel to the Adobe offering, though it runs in a browser, not as a local app. That rules it out for me. So this is more like TextMate based on CodeMirror - it could be used as a replacement for another editor like Dreamweaver, Coda, Textmate etc, and while the focus is on html/css/js, it'd be nice to see them expand that eventually to other domains. I suspect though they'll keep it tightly focussed on html, css and js. It's worth downloading the demos here to try it out: https://github.com/adobe/brackets/downloads https://github.com/adobe/brackets/downloads This looks like a really interesting new direction from Adobe, and an attempt to get back a bit of mindshare in a market where currently they are seen as a stodgy old dinosaur with products like Adobe® Dreamweaver®™. I'll certainly be keeping an eye on it as TextMate user currently, however I'd need support for other languages. Having had a little play with the download, I can say it's really not ready for primetime (only live edit of css is working right now, not even html edits), but what you can see looks really impressive, the UI is clean and works well, and if they have the language coverage of CodeMirror that would be really interesting (if not it'll still be useful, but could not replace TextMate for me for example). This might be worth a look in a few months when they have it all working properly.
deleted 14y ago
[deleted]
- chr1 14y ago
  they'll switch if the editor is good enough lots of people have switched to SublimeText 2 recently > will you release your editor's source code it is already open source
  - AngryParsley 14y ago
    Apologies. I don't know what I was saying.
dchichkov 14y ago
Whoever you are, if you develop an editor, please approach it as a hard real time system.
mesh 14y ago
fyi, you can see a video of an overview of Brackets here: http://www.youtube.com/watch?v=2Tk7AUaExBQ&feature=plcp http://www.youtube.com/watch?v=2Tk7AUaExBQ&feature=plcp
vanni 14y ago
Previous discussions: http://news.ycombinator.com/item?id=3917637 http://news.ycombinator.com/item?id=3917637 http://news.ycombinator.com/item?id=4159552 http://news.ycombinator.com/item?id=4159552
norswap 14y ago
I see no mention of how the editor will be customizable (keybinds, defining new commands) which is what this kind of online editor often lacks and is one of the cornerstone of the success of offline editors (emacs, vi, even SublimeText and TextMate).
- ytpete 14y ago
  Brackets is fully extensible -- here's a getting started guide for writing extensions: https://github.com/adobe/brackets/wiki/How-to-write-extensions https://github.com/adobe/brackets/wiki/How-to-write-extensio... The powerful thing about Brackets is that extensions (and the rest of Brackets in fact) are written in JavaScript, so basically every Brackets user has all the skills necessary to write an extension and customize their development environment. We don't have an easy way to customize key bindings yet, but it's on our backlog: https://trello.com/card/keyboard-shortcuts-stored-in-json-for-customization-5/4f90a6d98f77505d7940ce88/352 https://trello.com/card/keyboard-shortcuts-stored-in-json-fo... https://trello.com/card/keyboard-shortcut-customization-interface-8/4f90a6d98f77505d7940ce88/362 https://trello.com/card/keyboard-shortcut-customization-inte...
antihero 14y ago
I can't really see enough information about it on the site - what makes it so great? Perhaps making a screencast showing it doing some great things will help adoption. Other considerations - pretty much any front-end person that isn't a masochist is going to be using a preprocessor like SASS or LESS - how will the editor support this? (also consider CoffeeScript, for instance).
- tangue 14y ago
  From the source code I guess it's built with LESS, so the support is already there (Indeed the UI is built on top of Bootstrap)
- ytpete 14y ago
  Here's a somewhat older intro video: http://www.youtube.com/watch?v=rvo3Mv1Z4qU&feature=player_embedded http://www.youtube.com/watch?v=rvo3Mv1Z4qU&feature=playe...
tangue 14y ago
Tried it and liked it. The UI is pretty clear even if it's not ready for production. I think this is what a lot of us missed. As webdesign is moving away from wysiwyg we need a new breed of text editors (I love Emacs but it's not very efficient for CSS/HTML/JS development).

94 points by flipstewart 14y ago

snprbob86 14y ago

Demo?

just2n 14y ago
TFA: https://github.com/adobe/brackets/downloads https://github.com/adobe/brackets/downloads Has builds for OSX and Windows.
- snprbob86 14y ago
  Skimmed the site and saw: "FOR THE WEB, BY THE WEB" "Brackets is built using HTML, CSS and JavaScript. If you can code in Brackets, you can code on Brackets." "WORKS WITH YOUR BROWSER" Spent 5 seconds skimming the page up and down for a "Try It" or "Get Started" link, but only found "Check It Out". After 3 seconds of reading, I re-interpreted "Check-Out" as in the source code sense. Re-scanned the page, no other obvious demo headings, so I closed the tab. Despite the page's high level of visual polish, it completely failed at explaining to me what the app was and how I should go about getting it.
  - dorian-graph 14y ago
    For me, this is how it happened—I looked at the screenshot and liked how it looked then read the About Brackets blurb to get a good idea. Finally, I found a Mac binary easy enough from the Check It Out part. Obviously, both these experiences are quite different and both would lead someone to make a certain conclusion about the website. Which is 'correct' then? Personally, I just hope some of the neat features (Inline CSS editing) appears in Sublime Text 2.
  - ryanstewart 14y ago
    Good feedback. We just fixed the page to say "Try it" instead of "Check it Out". =Ryan ryan@adobe.com
flipstewart 14y ago
http://html.adobe.com/edge/code/ http://html.adobe.com/edge/code/ This is Adobe's branded preview with their extensions, and just2n has supplied the Brackets builds.

desireco42 14y ago

interesting, that is all I can say. I see it is made with special focus on javascript, that is definitely welcome. Code looks really awesome.

dqminh 14y ago

anyone knows how does this perform compared to http://ace.ajax.org http://ace.ajax.org ?

chr1 14y ago
this uses codeMirror as a core editing component ace is faster and more code friendly than codeMirror. (multiSelect, indentGuides, folding) but codemirror is smaller and supports variable width and bidirectional fonts currently there is no comparable desktop project using ace but maybe there will be something soon http://www.indiegogo.com/happyedit http://www.indiegogo.com/happyedit

woah 14y ago

Man, I really wish I could use this, I code JS, HTML, and CSS all day, and would love to hack on my own editor, but don't have the time to learn lisp or c. No linux version :(

flipstewart 14y ago
You could always make the Linux version!
- zanny 14y ago
  It probably runs under Wine, looking at the binaries it seems to be built against dx9 and gl ES, so it hopefully would default to gl ES if any problems come up.
  - aliem 14y ago
    the container application is based off CEF3 ( http://code.google.com/p/chromiumembedded/ http://code.google.com/p/chromiumembedded/ ) , here is the repository https://github.com/adobe/brackets-shell https://github.com/adobe/brackets-shell
  - antihero 14y ago
    Whilst Wine is a good stop gap, it makes things ugly as sin and clunky feeling and is is nowhere near as good as a native experience. Why would anyone switch to a program you have to run in Wine when there are already excellent editors out there that are native, such as Sublime Text 2?
ytpete 14y ago
A bunch of people are looking into getting it working on Linux: https://groups.google.com/forum/?fromgroups=#!topic/brackets-dev/29vOJ6tvl8A https://groups.google.com/forum/?fromgroups=#!topic/brackets...

just2n 14y ago

So I'm used to debugging in Chrome, so I instinctively open the browser's dev tools to find that this breaks the Live Preview. It feels somewhat like there's a quantum property here: things work like magic (the browser is apparently opening a static CSS file from file://), but as soon as you try to observe it, it starts behaving as expected (no live updates for you!). That seems a little bit odd.

ytpete 14y ago
Brackets core contributor here... The reason for this is the webkit remote debugging API is used both by Brackets' "live preview" as well as by the developer tools panel. The remote debugging API only allows one connection at a time, so one kicks the other off the connection. Here's the Chromium bug: http://code.google.com/p/chromium/issues/detail?id=129539 http://code.google.com/p/chromium/issues/detail?id=129539 And a related discussion thread: https://groups.google.com/forum/?fromgroups=#!topic/google-chrome-developer-tools/yILc8RYUz48 https://groups.google.com/forum/?fromgroups=#!topic/google-c...

deleted 14y ago

[deleted]

flipstewart 14y ago
How is it abandoned if the last build was released two weeks ago and the last commit was four hours ago?

eggsby 14y ago

Why would I want to use or contribute to this over something like http://codemirror.net/ http://codemirror.net/ or the various tools powered by codemirror? (light table, jsbin, etc) edit: I see that this is also powered by codemirror, the editor itself, so what does this offer on top of it? I can't even find a feature list on this page, and after signing up for the adobe ~cloud~ I haven't been able to make my way to a working demo of the application...

grey-area 14y ago
The docs are a bit confusing - given the target market they should change 'Check it out' to demo or something, but there are binaries you can download for Mac and Windows, you don't have to sign up for the Adobe Cloud thing at all. It's a desktop app, and here's what it looks like: https://github.com/adobe/brackets/wiki/Brackets-Screenshots https://github.com/adobe/brackets/wiki/Brackets-Screenshots A quick off-the-cuff comparison, not being familiar with all of these tools, I'm sure others will jump in and correct/clarify: CodeMirror - this is for embedding in pages only, and has no way of editing files etc, so you'd need to use a wrapper like: CodeMirrorUI - a wrapper using the API to add some editor-like functionality, but it's still not a standalone editor app. Light Table requires Java, and is focussed on Clojure (and JS?) right now, so although the ideas and interface have been borrowed from in Brackets, it's not really in the same space right now, and is likely to diverge as time passes. Jsbin - this is probably the closest in feel to the Adobe offering, though it runs in a browser, not as a local app. That rules it out for me. So this is more like TextMate based on CodeMirror - it could be used as a replacement for another editor like Dreamweaver, Coda, Textmate etc, and while the focus is on html/css/js, it'd be nice to see them expand that eventually to other domains. I suspect though they'll keep it tightly focussed on html, css and js. It's worth downloading the demos here to try it out: https://github.com/adobe/brackets/downloads https://github.com/adobe/brackets/downloads This looks like a really interesting new direction from Adobe, and an attempt to get back a bit of mindshare in a market where currently they are seen as a stodgy old dinosaur with products like Adobe® Dreamweaver®™. I'll certainly be keeping an eye on it as TextMate user currently, however I'd need support for other languages. Having had a little play with the download, I can say it's really not ready for primetime (only live edit of css is working right now, not even html edits), but what you can see looks really impressive, the UI is clean and works well, and if they have the language coverage of CodeMirror that would be really interesting (if not it'll still be useful, but could not replace TextMate for me for example). This might be worth a look in a few months when they have it all working properly.

deleted 14y ago

[deleted]

chr1 14y ago
they'll switch if the editor is good enough lots of people have switched to SublimeText 2 recently > will you release your editor's source code it is already open source
- AngryParsley 14y ago
  Apologies. I don't know what I was saying.

dchichkov 14y ago

Whoever you are, if you develop an editor, please approach it as a hard real time system.

mesh 14y ago

fyi, you can see a video of an overview of Brackets here: http://www.youtube.com/watch?v=2Tk7AUaExBQ&feature=plcp http://www.youtube.com/watch?v=2Tk7AUaExBQ&feature=plcp

vanni 14y ago

Previous discussions: http://news.ycombinator.com/item?id=3917637 http://news.ycombinator.com/item?id=3917637 http://news.ycombinator.com/item?id=4159552 http://news.ycombinator.com/item?id=4159552

norswap 14y ago

I see no mention of how the editor will be customizable (keybinds, defining new commands) which is what this kind of online editor often lacks and is one of the cornerstone of the success of offline editors (emacs, vi, even SublimeText and TextMate).

ytpete 14y ago
Brackets is fully extensible -- here's a getting started guide for writing extensions: https://github.com/adobe/brackets/wiki/How-to-write-extensions https://github.com/adobe/brackets/wiki/How-to-write-extensio... The powerful thing about Brackets is that extensions (and the rest of Brackets in fact) are written in JavaScript, so basically every Brackets user has all the skills necessary to write an extension and customize their development environment. We don't have an easy way to customize key bindings yet, but it's on our backlog: https://trello.com/card/keyboard-shortcuts-stored-in-json-for-customization-5/4f90a6d98f77505d7940ce88/352 https://trello.com/card/keyboard-shortcuts-stored-in-json-fo... https://trello.com/card/keyboard-shortcut-customization-interface-8/4f90a6d98f77505d7940ce88/362 https://trello.com/card/keyboard-shortcut-customization-inte...

antihero 14y ago

I can't really see enough information about it on the site - what makes it so great? Perhaps making a screencast showing it doing some great things will help adoption. Other considerations - pretty much any front-end person that isn't a masochist is going to be using a preprocessor like SASS or LESS - how will the editor support this? (also consider CoffeeScript, for instance).

tangue 14y ago
From the source code I guess it's built with LESS, so the support is already there (Indeed the UI is built on top of Bootstrap)
ytpete 14y ago
Here's a somewhat older intro video: http://www.youtube.com/watch?v=rvo3Mv1Z4qU&feature=player_embedded http://www.youtube.com/watch?v=rvo3Mv1Z4qU&feature=playe...

tangue 14y ago

Tried it and liked it. The UI is pretty clear even if it's not ready for production. I think this is what a lot of us missed. As webdesign is moving away from wysiwyg we need a new breed of text editors (I love Emacs but it's not very efficient for CSS/HTML/JS development).