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

http://brackets.io

by flipstewart • 14 years ago

94 34 14 years ago

brackets.io

snprbob862• 14 years ago

Demo?

just2n2• 14 years ago

TFA: https://github.com/adobe/brackets/downloads

Has builds for OSX and Windows.

snprbob862• 14 years 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.

flipstewart2• 14 years ago

http://html.adobe.com/edge/code/

This is Adobe's branded preview with their extensions, and just2n has supplied the Brackets builds.

desireco42• 14 years 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• 14 years ago

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

chr1• 14 years 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

woah• 14 years 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 :(

flipstewart2• 14 years ago

You could always make the Linux version!

zanny• 14 years 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.

ytpete4• 14 years ago

A bunch of people are looking into getting it working on Linux: https://groups.google.com/forum/?fromgroups=#!topic/brackets...

just2n2• 14 years 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.

ytpete4• 14 years 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

And a related discussion thread: https://groups.google.com/forum/?fromgroups=#!topic/google-c...

eggsby• 14 years ago

Why would I want to use or contribute to this over something like 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-area3• 14 years 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

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.

ryanstewart2• 14 years ago

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.

drivebyacct23• 14 years ago

your analysis of CodeMirror is very inaccurate http://codemirror.net/

dchichkov• 14 years ago

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

mesh• 14 years ago

fyi, you can see a video of an overview of Brackets here:

http://www.youtube.com/watch?v=2Tk7AUaExBQ&feature=plcp

vanni• 14 years ago

Previous discussions:

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

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

norswap• 14 years 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).

ytpete4• 14 years ago

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...

antihero2• 14 years 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).

tangue2• 14 years 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)

ytpete4• 14 years ago

Here's a somewhat older intro video: http://www.youtube.com/watch?v=rvo3Mv1Z4qU&feature=playe...

tangue2• 14 years 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).

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

Related Stories