Brackets: The Open Source Code Editor for the Web

http://blog.brackets.io/2012/06/25/brackets-open-source-code-editor/

by omarrr • 14 years ago

222 62 14 years ago

blog.brackets.io

This looks pretty awesome, I was about to suggest you put it on kickstarter but then realized it's already backed by adobe which is pretty cool. Could you tell us how involved Adobe is in this project and what their goals are? Do you plan to make it usable directly from the browser using the file system API? Do you plan to support other languages such as ruby and python? Also you kind of sound like Abed from Community :)

bsimpson• 14 years ago

The only browser to implement the File System API right now is Chrome, and it obfuscates the actual files it saves on your hard drive. I don't know that we yet have a browser-based API that lets you arbitrarily access the user's disk.

charliesome• 14 years ago

> I don't know that we yet have a browser-based API that lets you arbitrarily access the user's disk.

I'd say that's a good thing.

localhost• 14 years ago

In principle, you should be able to trivially turn this into a WinRT app. This way you could write to temp file storage for your app and render out of that. You could keep the codebase isolated for the cross-platform browser bits and have WinRT integration code as a separate project.

Ygg22• 14 years ago

Yeah, Chrome only support is a bit limiting. I'd love to be able to do same with Firefox in the near future (1-2years). I do hope they implement that File API soon.

eddieplan9• 14 years ago

unless the files are in dropbox and you tunnel read/write access to them through dropbox API

kennywinker2• 14 years ago

"Hey, this is pretty cool!" ... "Wait... Adobe!?!" - The Internet

swdunlop• 14 years ago

I thought exactly the same thing.. I was totally on board and excited until I saw, duhnduhnduhnn... "github.com/adobe/brackets"

Then I fled. And a lot of other people probably will, too -- Adobe has a lot of things to make up for with the kind of people who could actually make a meaningful contribution.

pcl• 14 years ago

I'd say that launching an MIT-licensed project hosted in an environment that trivializes forking should go a long way to allay the fears of the majority of those kinds of people. On top of all of that, this is a line-of-business application for them -- it seems fair to assume that a web IDE is something in which Adobe will plan to maintain its investment.

mesh2• 14 years ago

-- Adobe has a lot of things to make up for with the kind of people who could actually make a meaningful contribution. --

Well, we have to start somewhere. We are actually doing a ton around HTML and Web:

http://html.adobe.com

(I work for Adobe)

wwweston• 14 years ago

> Adobe has a lot of things to make up for with the kind of people who could actually make a meaningful contribution.

Like what?

Personally, while I'm not happy with every move or product Adobe's ever made, I think by and large their contributions to the web have been a net positive.

Xylakant• 14 years ago

I had the same initial reaction, but then thought "It's actually quite cool that adobe supports a project that builds something cool and useful based on adopted standards." Adobe has always been a mixed bag, some good and useful ideas (they created the PDF document format) and some rather less good ideas. (Though actually flash was cool at the time it was created. Everybody loved flash). So why not brackets a chance to earn a reputation on it's own.

[Spare me the Adobe Updater though, please.]

james332• 14 years ago

Where have you been all my life? Oh right, it still doesn't fully exist yet, but I'm excited to contribute because being a purely JS dev I could see this saving me loads of time and frustration.

wetherbeei• 14 years ago

Looks useful for static pages, but a lot of the shiny features wouldn't work for any site designed using a template library (which is any dynamic site).

rorrr• 14 years ago

Spot on. Any sufficiently complex website won't benefit from this. How would your code editor know which CSS (or even beter, Sass) files apply to which pages? No way.

bazzargh• 14 years ago

I'm hoping sourcemaps come to the rescue. We already have this for JS, but the support isn't deep enough. We need support for sourcemaps for templates and css (and even sprites!).

There's some thought been given to multi-level sourcemaps, which are needed for template->js->minified->concatenated... type mappings - see https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiO...

Also there's something on the feature roadmap for firefox to cover css sourcemaps. Not much info, but its a start: https://wiki.mozilla.org/DevTools/Features/CSSSourceMap

If you tried to apply the same thinking to everything in the UI, you'd hit sprites soon enough. It'd be interesting to have enough info that given an (x,y) in an image we can say what the source files were. This is the kind of thing where the http header in that sourcemaps v3 proposal would apply.

james332• 14 years ago

Opening the app's codebase by default is brilliant, really lowers the barrier to entry for anyone on the fence about contributing.

stratos2• 14 years ago

looks cool, i suppose it could work for some stuff. but not for dyanamic octopus web code.

ilaksh3• 14 years ago

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

My thing is like that too, especially the inception thing, but its better for a lot of reasons because its more than just an editor and is designed to be easily extended with plugins/components.

https://github.com/ithkuil/cureblog

https://vimeo.com/43784316

Anyway so good try Adobe, but if Adobe really wants to do the right thing, support the open web, and build a really useful tool, they should scrap Brackets, fork my project, and start promoting that. LOL sorry dickish thing for me to say but true.

brntn• 14 years ago

Judging by the git repo, brackets has been in development significantly longer than your project. It also seems much more complete already.

And your project doesn't seem to be designed as an IDE, but rather a blogging engine with a strange focus on code editing. How exactly are the projects similar?

Stef_• 14 years ago

After looking at the video on Vimeo it reminds more of Dave Winer's OPML Editor (http://home.opml.org/)

ilaksh3• 14 years ago

Brackets probably has been in development longer and is more complete in a way. But the point is that although it goes a little bit in the right direction, it doesn't go far enough.

The code editor is a component that adds a button to the left hand side, which then opens up a window with CodeMirrors built in for editing the HTML/CSS/Browser side CoffeeScript/ Node.js on server side/external css/js files/package.json for the selected component. Then when you hit save it sends all of those files to the server, compiles CoffeeScript, runs npm if necessary. If there are errors it pops them up in a message box. If there are no errors it restarts the server and reloads the page. So it is an IDE.

Another similarity is the idea of keeping together different aspects of a component such as the HTML and CSS. I take it farther by including the other parts I mentioned above.

Blogging is just the most common type of application so I need to make sure it works for that for starters.

kennywinker2• 14 years ago

These are two different things. Might as well get mad at them for not building it on Eclipse.

Karunamon• 14 years ago

Very cool app. I've been looking for a web-compatible code editor/pseudo-IDE for a long time. This one looks like it may actually go places.

comex• 14 years ago

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

What, not a single mention of Light Table?

Groxx3• 14 years ago

What, not a single mention of Code Bubbles?

Groxx3• 14 years ago

What, not a single mention of Smalltalk?

overcyn• 14 years ago

The kinetic typography is too jumpy. Its hard to follow and becomes distracting.

risratorn• 14 years ago

The just listen, it's paraphrasing the guy word for word so I stopped reading after a couple of seconds and focussed on the actualy live screencast parts :)

lucian1900• 14 years ago

Extremely annoying. I just stopped watching.

acoyfellow• 14 years ago

This is what happens when developers design.

mesh2• 14 years ago

Jump in to the 50 second mark to skip all of that.

DeepDuh• 14 years ago

Looks great, game changing in fact. It seems to be quite inline with Brent Victor's vision (http://vimeo.com/36579366). One thing I'd like to see stolen from his demo: Once you have direct visual feedback on what you're doing, it makes a lot of sense to have widgets for your style definitions, e.g. scales with handlebars and color pickers popping up when the cursor is over values with corresponding type. It's a great thing that this project is both funded and open source. Quite unexpected from Adobe tbh.

utku_karatas2• 14 years ago

I suppose we'll be seeing more Codemirror based editors wrapped in Webkit in the future. Well at least one more I'm sure, because I've been implementing one too. You couldn't believe how fast one can actually churn a cross platform mediocrish editor given all the great quality tooling (QTWebkit, Bootstrap, Codemirror).

meeech• 14 years ago

+! for them having 'starter bugs'. searched to see its not new, but first i've seen it.

arunoda• 14 years ago

This is amazing - The best HTML5 editor I've ever seen - I just forked this and surely gonna send pull requests. Kudos for adobe and the team :)

pyrogyn• 14 years ago

There is also Eclipse Orion to look at for an open source web-based code editor. It's in beta, still, but it has definite promise.

pjmlp• 14 years ago

blah, another web IDE thingy.

giulivo• 14 years ago

I just wanted to give this a try, but the "single" part not written in HTML, CSS and Javascript (the native shell it runs from) has not been ported to Linux yet.

munchor• 14 years ago

Yeah, when I saw "Built with HTML ...", I thought "Cool, it's cross-platform".

Well, maybe not really, since I can't use it on Linux...

jasonsanjose3• 14 years ago

There's 2 ways we can get to a Brackets running on Linux. The first option is to add a linux target to the new CEF3 based brackets-shell app. We still need the shell app to get native file system access. We've also experimented with running nodejs on the client side and getting file access over WebSockets. Brackets is then hosted on a nodejs HTTP server and run inside of Chrome instead of CEF3. This solution works, but we haven't pushed this much further than a prototype yet.

yock• 14 years ago

Item 44 on their backlog. Doesn't appear to be a super high priority yet either, which makes me sad.

https://trello.com/board/brackets/4f90a6d98f77505d7940ce88

Vitaly• 14 years ago

a js scriptable modern editor is a project I wanted to build myself, if only I already had nuff time and money ;) no someone did it for me - how cool is that!

Now we only need to figure out one thing - way to make it properly support vim bindings ;)

jamesflorentino• 14 years ago

Looks good but this wouldn't fit into the modern-day front-end developer workflow. I'm talking about companies who use pre-processors like SASS, LESS, Stylus, CoffeeScript, Jade, HAML, etc.

As for live code-editing feature, you can already do a lot of these stuff in Chrome's developer tool.

Note: I'm a Vim user. Which I personally think is still the best text/code editor in the world.

edwinyzh• 14 years ago

Great!

Quote from The Brackets blog post "There are a lot of text editors out there, but not too many care exclusively about web developers" -- This is exactly why I'm building LIVEditor (http://liveditor.com)

webjunkie• 14 years ago

If you find the CSS live preview stuff cool, check out http://cssrefresh.frebsite.nl/ It's awesome. Even with complicated, nested templates and CSS stuff.

Ygg22• 14 years ago

I've tried Brackets on Windows but changing HTML doesn't reflect on the page. Have they implemented that yet or is it for CSS only?

jasonsanjose3• 14 years ago

Yes, CSS only for now. HTML is coming. Here's the story on our backlog https://trello.com/c/ZAlXxZue

cnp2• 14 years ago

This is a great effort, but it really seems like a ripoff of SublimeText, design-wise.

cnp2• 14 years ago

I do have to say, though, that after seeing the video I'm pretty sold

Brackets: The Open Source Code Editor for the Web

Related Stories