Brackets – open-source code editor built with the web for the web(brackets.io)
brackets.io
Brackets – open-source code editor built with the web for the web
http://brackets.io
39 comments
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
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
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.
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
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.
Mentioned this below as well, but thanks for the feedback on "Check it Out". We just changed it to "Try it" which is a bit clearer.
your analysis of CodeMirror is very inaccurate http://codemirror.net/
Would be interested in knowing more detail on this thanks - I had a quick look at their website previously, and their quick summary (which seems to sum the rest up well) is:
CodeMirror is a JavaScript component that provides a code editor in the browser.
NB this does not mean editing files in a filesystem but editing code in a browser (which could then be saved to a db or files by a web app/desktop app). Obviously it's possible to write such an app (like brackets), based on codemirror.
I'd be really interested in a codemirror which did manipulate source code files directly (and was not limited to html,css and js), but got the impression from their website that they offer lots of in-browser editing, but not an app which lets you interact with a local file system and edit files.
Did I get that wrong? If so would love to know more (or any other corrections you'd care to add).
CodeMirror is a JavaScript component that provides a code editor in the browser.
NB this does not mean editing files in a filesystem but editing code in a browser (which could then be saved to a db or files by a web app/desktop app). Obviously it's possible to write such an app (like brackets), based on codemirror.
I'd be really interested in a codemirror which did manipulate source code files directly (and was not limited to html,css and js), but got the impression from their website that they offer lots of in-browser editing, but not an app which lets you interact with a local file system and edit files.
Did I get that wrong? If so would love to know more (or any other corrections you'd care to add).
Oh, I guess we differ on definition of "edit". You can edit the files and it's still really useful (http://play.golang.org is an example).
I mean, you're right in that it can't write to the FS, but that's a HTML limitation... you juts need a shim in webkit container to do this, or you could use filepicker.io or similar techniques.
I mean, you're right in that it can't write to the FS, but that's a HTML limitation... you juts need a shim in webkit container to do this, or you could use filepicker.io or similar techniques.
Funny you mention play.golang.org as that's exactly what I'd love to be running locally to edit go and ruby, and run it as I edit. Guess I'm old fashioned but prefer to edit locally.
As you say, in theory at least not too hard to wrap in WebKit, but I have a feeling it might be more work than it first appears, and am too busy right now to attempt it and was hoping someone else had. Maybe one day. Thanks for elaborating.
As you say, in theory at least not too hard to wrap in WebKit, but I have a feeling it might be more work than it first appears, and am too busy right now to attempt it and was hoping someone else had. Maybe one day. Thanks for elaborating.
One of my next projects is to use diff-path-merge to build cloud9 for Go. I want to be able to have collaborative editting combined with Go's fast compiles to have a multi-user cooperative coding environment.
But it will still use a "shim" of sorts. It will basically sync via d-p-m and websockets to a server that will do the saving/building/running and then return the output.
But it will still use a "shim" of sorts. It will basically sync via d-p-m and websockets to a server that will do the saving/building/running and then return the output.
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.
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
And a related discussion thread: https://groups.google.com/forum/?fromgroups=#!topic/google-c...
Here's the Chromium bug: http://code.google.com/p/chromium/issues/detail?id=129539
And a related discussion thread: https://groups.google.com/forum/?fromgroups=#!topic/google-c...
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).
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).
Here's a somewhat older intro video: http://www.youtube.com/watch?v=rvo3Mv1Z4qU&feature=playe...
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)
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 :(
No linux version :(
You could always make the Linux version!
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.
the container application is based off CEF3 ( http://code.google.com/p/chromiumembedded/ ) , here is the repository https://github.com/adobe/brackets-shell
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?
A bunch of people are looking into getting it working on Linux: https://groups.google.com/forum/?fromgroups=#!topic/brackets...
[deleted](1)
anyone knows how does this perform compared to http://ace.ajax.org ?
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
currently there is no comparable desktop project using ace but maybe there will be something soon http://www.indiegogo.com/happyedit
[deleted](1)
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).
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).
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).
Brackets is fully extensible -- here's a getting started guide for writing 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-fo... https://trello.com/card/keyboard-shortcut-customization-inte...
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-fo... https://trello.com/card/keyboard-shortcut-customization-inte...
Whoever you are, if you develop an editor, please approach it as a hard real time system.
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
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.
Demo?
http://html.adobe.com/edge/code/
This is Adobe's branded preview with their extensions, and just2n has supplied the Brackets builds.
This is Adobe's branded preview with their extensions, and just2n has supplied the Brackets builds.
TFA: https://github.com/adobe/brackets/downloads
Has builds for OSX and Windows.
Has builds for OSX and Windows.
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.
"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.
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.
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.
Good feedback. We just fixed the page to say "Try it" instead of "Check it Out".
=Ryan [email protected]
=Ryan [email protected]
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...