Thursday, February 12th, 2009

Bespin: A new Mozilla Labs experimental extensible code editor using Canvas

Category: Canvas, JavaScript, Mozilla, Showcase, Utility

<p>

Ben and I are excited to be releasing the first concept out of the Mozilla Developer Lab. As you know, we are big believers in the Open Web. Chris Wilson mentioned that many people are still building Web applications on top of browser technology from yester year. What if we built on more leading edge browser technology? As a challenge, we wanted to take on an interesting project that you would normally thing of as a desktop application, and see if it would fly on the Web.

Being developers, why not develop something that we know and use every day. Our code editor. There are great editors out there, and we are partial to many. From Vi and Emacs, to Textmate and IntelliJ IDEA.

We have all seen enhanced textarea and div code editors, and while some have done a great job with them, they often seem to fall down in performance with large files and have strange bugs that make them more of a toy than you would like.

How could we change this? What if we used Canvas? That question lead to our Bespin announcement at Mozilla Labs today. What would our dream editor be like?

Let’s get to the meat. To check out Bespin yourself, fire up a browser that supports Canvas, and the text rendering portion of Canvas. We have tested Bespin on Firefox 3+ and WebKit Nightly, which both support the feature. Link over to bespin.mozilla.com and signup.

Once logged in you will see a dashboard view of your projects, and a sample project will be sitting there waiting for you. Navigate into the project and open up one of the files via double click. You will be taken into the code editor itself. Tinker around. Try out the command line at the bottom (try the help command to see what is out there).

Even though this is a tech preview, where the goal was to share it with the community, we wanted to make the editor as solid as possible. It had to scale to a large number of lines and continue to remain very responsive.

Over in the dashboard, you will notice some interesting UI elements. Shrink the width of the file panes and the filenames will be truncated in the middle a la Mac OS X (e.g. Take a file “syntaxhighligher.js” that doesn’t have room and becomes “syntax…r.js” instead of a simpler “…ghligher.js”). The open sessions tabs at the bottom can be moved around and as more space is made available, they offer more information and change font size. This is all part of Thunderhead, a very early fun experiment to create a Canvas GUI toolkit. We will blog more about that later.

To see this in action, please check out this video of us showing the tool in action:

It has been a lot of fun building the tool. A lightbulb went off when you see the power of having a tool written in the platform that you write code in all day. You can easily extend and tweak it to your whim. Extensibility has been a core guideline for us. The command line gives us an easy way to add functionality (Ubiquity showed us the way here). Bespin commands look like Ubiquity commands, and we want to fully integrate them. We also made a big use out of custom events as a way to loosely couple code to functionality.

This means that you can write code that listens to editor events and does something new. On the other side of the coin, you can fire of events and the editor will consume them and do the right thing.

If you wanted to add some functionality whenever a new file is loaded into the editor, you would listen for an open success event. Here is an example of us doing just that in our command line object, to tell the user that something has been opened:

javascript
< view plain text >
  1. document.observe("bespin:editor:openfile:opensuccess", function(event) {
  2.     var file = event.memo.file;
  3.  
  4.     commandline.showInfo('Loaded file: ' + file.name, true);
  5. });

We have a lot to share about our experience building Bespin, and we will be posting a lot about them in the future. For now though, we want to hear from you. What do you think? What would you like to see? Have some cool concepts and features? Want to join us hacking on your tool? Have a project that you would like to embed the Bespin editor in? Let us know!

More resources

Looking forward to your thoughts and ideas.

Related Content:

Posted by Dion Almaer at 9:50 pm
47 Comments

++++-
4.6 rating from 83 votes

47 Comments »

Comments feed TrackBack URI

This looks really awesome! I was thinking of making an in-browser code editor a while ago, but nothing on this scale. Plus this is a lot slicker than anything I would have been able to code!

The only thing I’m disappointed about is that the demo isn’t up on the website yet :)

Comment by davidcalhoun — February 12, 2009

Hi David,

Thanks man. This is just a beginning, and we would love to have you contribute your ideas, coding, whatever you can give! :)

What do you mean when you say the demo isn’t up on the website? Were you not able to register at http://bespin.mozilla.com/ ?

Cheers,

Dion

Comment by Dion Almaer — February 12, 2009

Dion,
Oops, my bad. I was actually not reading the page carefully enough – I was reading the “Edit Now” section where you can import existing projects from a repository, where it said “coming soon”.

I registered using the section below it and I’m now using Bespin :)

Looks great so far!

-David

Comment by davidcalhoun — February 12, 2009

That’s insane. I guess now that you’ve gotten this, you can try implementing a whole HTML Renderer in CANVAS :P

Comment by antimatter15 — February 12, 2009

Awesome! Loving the idea to use the bleeding edge elements to solve an age-old problem! Do you need any more coders for this project?

Comment by oopstudios — February 12, 2009

Wow! The idea that it’s built using the same environment I’m already comfortable in is exciting. Great work! Now if we can get Firebug to play nicely, we’ll be good to go.

Comment by el3ment — February 12, 2009

Impressive screen cast. Congrats. I can certainly see people abandoning HTML for the Canvas tag plus a GUI toolkit when building their rich web apps.

Comment by PeterMichaux — February 12, 2009

@antimatter15,

hahaha! It would be funny to implement WebKit to Canvas :)

Cheers,

Dion

Comment by Dion Almaer — February 13, 2009

@oopstudios,

Absofrigginlutely! Think about what you would like to do and we will help you as much as we can :)

Comment by Dion Almaer — February 13, 2009

@PeterMichael,

Thanks man. High praise coming from you. Still a long way to go. Looking forward to seeing what the community comes up with.

Comment by Dion Almaer — February 13, 2009

Wow! Totally incredible – very well done guys. I shall be a keen observer/user over the next months.

Comment by seb835 — February 13, 2009

The idea seems awesome!
However, I guess there are a number of localization issues to work out. For instance, I use a Swedish keyboard layout, and can’t even write curly braces…

Kind of making it hard to write JavaScript. :-)

Comment by robnyman — February 13, 2009

This is a very interesting project, but I have some concerns about building what are essentially basics (text fields) from scratch. Now, I realize this is a tech preview and it can be resolved, but (for example) the first thing I noticed that drove me nuts is that I’m using my normal Mac browser but it broke my Mac keybindings. I use opt + [key] (eg. backspace or arrow) so frequently when coding that to find it doesn’t work as expected is basically a deal breaker for me. This is the primary reason that no feature set will get me to switch from TextMate to Eclipse (for instance).

This is the kind of attention to detail that you’ll need to have when implementing a text field from scratch, that would otherwise not be necessary. And it’s always going to be hard to know if you miss something that’s obscure to you but important to some user.

For what it’s worth, I ran into this keybindings problem in AIR (which evidently also reinvents the text field wheel, even in browser components), and have posted an incomplete solution to Stack Overflow: http://stackoverflow.com/questions/205841/os-x-keybindings-in-air-app/205846#205846

Note, though, that this solution depends on what’s probably a Webkit-only API (Selection.modify(), which appears to tail Cocoa commands of the same nature), and it probably won’t work within the canvas context anyhow. But it may be a good reference point if you do plan to solve this particular issue.

Comment by eyelidlessness — February 13, 2009

Wow, did Ajaxian fix line breaks?
I
think

so.

Thanks guys.

Comment by eyelidlessness — February 13, 2009

Looks awsome at start. I’m only a bit annoyed by the lack of visual responses when you are loading a file.. A simple loading file please wait message would be helpfull, as there are almost no visual identifications that the you are loading the file.

And I love to use tab to indent my code, but it keeps focusing the command line :(

I think if you port this to an AIR application you will have a awesome program ;) Because you kick away some browser limitation. but than again, that would probably defeat the whole purpose of having an editor in the browser… But than again, air is webkit.. Bleh, ignore my brainfarts…

Looks a great project, can’t wait to see it evolve. But for now, ill stick to Dreamweaver (which sits on top of the webkit render engine)

Comment by V1 — February 13, 2009

@eyelidlessness: Rolling it from scratch is a trade-off. On the one hand, you lose the native-provided facilitates and whatever tweaks the user may have made to those. On the other, you gain complete freedom to control the user experience and can break out of traditional limitations. As the experiment runs its course, we’ll see if we made the wrong trade-off. :-)

@v1: lack of visual feedback. There’s a ton of work to be done, but we wanted to surface this sooner rather than later and do a lot of the development out in the open. Another trade-off. :-) Thanks for the feedback!

Comment by Ben Galbraith — February 13, 2009

V1,

Can you tell me which platform you are on? Tab for me does indeed do a tab…… so we are not capturing the right keycode for you.

If you could do me a favour and go to: http://unixpapa.com/js/testkey.html

and hit the tab key and give me what you get back? :)

E.g. I get back:

keydown keyCode=9 which=9 charCode=0
keyIdentifier=undefined keyLocation=undefined
shiftKey=false ctrlKey=false altKey=false metaKey=false
keypress keyCode=9 which=0 charCode=0
shiftKey=false ctrlKey=false altKey=false metaKey=false
keyup keyCode=9 which=9 charCode=0
keyIdentifier=undefined keyLocation=undefined
shiftKey=false ctrlKey=false altKey=false metaKey=false

Comment by Dion Almaer — February 13, 2009

This just looks great. Really great work so far.
The performance looks also great in the video.
Well, for me it justs _looks_ fast in the video.
I tried bespin on Ubuntu 8.10, FF 3.0.6 on a T61P Notebook. It is awfully slow – not usable. It even slows down the whole desktop and all other apps.

Best regards.

Comment by ThomasF — February 13, 2009

I guess my old overbyte Editor could be considered obsolete now (ok, I did not spend a second on it after the first beta launch) …
I feel like that ad where a couple of PlayStation were laughing in front of good old Pong game.
Good stuff guys, if you need to “recruit” some coder, here I am.

Comment by WebReflection — February 13, 2009

@Dion I’m using WebKit nightly, Mac. Build: r40813, Reproducible after reboot, ill update Webkit to the latest version in few min, im 2 versions behind. But i doubt it would make a difference ;)

keydown keyCode=9 which=9 charCode=0
keyIdentifier=U+0009 keyLocation=0
shiftKey=false ctrlKey=false altKey=false metaKey=false

@Ben, I know it was just something that annoyed me when i started it up.

Comment by V1 — February 13, 2009

Same issue in the latest version. Want me to file a “offical” bug report?

Comment by V1 — February 13, 2009

something related to v1′s tab issue:

I’m using firefox 3.0.6, and tabbing seems to work, however its not exactly expected behaviour from an editor. Tab seems to be equivalent to 2 space characters here, even though the tag in the sample file is indented 4 spaces, which would relate to one tab in any other editor. Also, shift tab does nothing, but I’d expect it to go back a tab / un-tab. Even notepad apps like notepad2 and notepad++ do this.

Also, I realise intellisense is too big a job for a demo like this, but simple tab closing would be nice as a stopgap.

Good work so far anyway, looking forward to seeing more.

Comment by roryok — February 13, 2009

that second sentence should read ‘…even though the H1 tag in the sample file…

I guess my html got lost in there…

Comment by roryok — February 13, 2009

Bummer that you can’t paste in FF. Time for the Gecko team to implement the dataTransfer object on the paste event? :)

Comment by Spocke — February 13, 2009

wow! great work Dion!

Comment by azer — February 13, 2009

It doesn’t accept my preferred email address: whatever+bespin@gmail.com :(

Comment by igitur — February 13, 2009

Great tool ona technical point of view but I don’t understand why you seem so sure that the browser is such a good place for a code editor.

Ok, it’s great to be able to edit code on a browser when you are not on your regular development station but I’m not sure this is the regular case. Most of the time, I’m working on a single workstation and I’m quite sure most of the developpers are in the same situation.

Personnaly, I would have prefer that all this time had been consumed to improve Firebug, build some extended design toolkits, create backend tools to improve frontend performances (like Yahoo does with YUICompressor or SmushIt for example) or even try to develop some new tools I can’t imagine right now. But, like I’ve already said : great job on a technical point of view !!

Comment by Remi — February 13, 2009

I agree with Remi. Interesting idea but I don’t find it useful for how I develop. I’m usually ssh’d into a server using vi.. where I save my changes, alt-tab to browser and refresh to see my changes. I don’t see a benefit to having a web-based editor for normal development. But I would be interested in hearing how others plan on using this.

Comment by kb0 — February 13, 2009

This is really amazing! I’m gonna check this baby out right now!

Comment by iliad — February 13, 2009

Wow, now if IE would get with the times an implement Canvas, we would have a real revolution on our hands.

Amazing work, I’m so glad you guys aren’t shackled by the confines of the google borg anymore.

Comment by dgavey — February 13, 2009

>>Wow, now if IE would get with the times an implement Canvas, we would have a real revolution on our hands.

They’ve said no for IE8. Perhaps IE9. Or IE10. Or IE11. They really don’t seem interested.

Perhaps they expect you to have two versions of your website. A normal one and a Silverlight one.

Comment by Nosredna — February 13, 2009

Are there any plans to make this open source? I mean you can’t exactly keep the source closed seeing as how it’s a JS app, but I think you know what I mean :)

If so, it would be great to be able to install this on multiple servers to get real web-based editing on projects (as opposed to having this all on your site).

Or… Any plans to create a file read/write/browse API that this can hook into? So I can browse files on my server securely?

And please let me know if you need any help. I was the lead UX developer on zembly.com for the past year and we did something fairly similar, albeit using the browser’s WYSIWYG modes and all the associated headaches coming with that.

Comment by cwolves — February 13, 2009

Great work so far! I just tried it out and really like this idea.
.
Feature requests: it would be cool to have a horizontal list of files for the current project in the top bar, instead of having to go back to the dashboard to switch between documents. … Also, word wrap would be a welcome addition.

Comment by WillPeavy — February 13, 2009

@ThomasF: Sorry, we didn’t spend enough time testing it on Linux before launch. It generally works really fast on OS X and Windows.

Comment by Ben Galbraith — February 13, 2009

@WebReflection: We’d love for you to start submitting patches! :-)

@roryok: Thanks for the feedback, we definitely need to do better with tab handling.

@Spocke: To be honest, this caught us a bit flat-footed. We were running the app with elevated privileges for most of the cycle (which enabled us to use XUL clipboard APIs) and close to launch we realized getting copy/paste to work out of a privileged environment wouldn’t make it in time for the initial launch. We’ll get it fixed.

@igitur: Sorry about that.

@Remi and @kb0: Bespin definitely isn’t for everyone, and we definitely have more tools coming than just Bespin. But, we’re also pretty jazzed about what Bespin makes possible. Stay tuned and let us know if we ever move your needle.

@dgavey and @Nosredna: We have some ideas for how to get it working in IE–hopefully we’re able to try some of them out soon. :-)

@pcolton: Thanks very much Paul, very much looking forward to collaborating with you guys on this.

@cwolves: http://hg.mozilla.org/labs/bespin, my friend

@WillPeavy: Completely agree on both counts.

Comment by Ben Galbraith — February 13, 2009

Nice work, gents. I gotta say, though, the look reminds me a little bit of obsessing.org…. ;-)

Comment by theaub — February 13, 2009

Interesting idea, but still nowhere close to something like notepad++

Comment by velkymx — February 13, 2009

Seems like an extremely superfluous use of . Theres a number of html forms text editors out there, and any one of them would’ve made a far better choice than building your own graphics stack. CodeMirror, CodePress, EditArea….

I’m on the dev repository/channel of Chrome and it runs really slow and looks sin awful. I’ll try webkit nightly and Opera next. Still, I’d prefer a solution such as CodeMirror which will run on almost anything.

Comment by rektide — February 13, 2009

/We have all seen enhanced textarea and div code editors, and while some have done a great job with them, they often seem to fall down in performance with large files and have strange bugs that make them more of a toy than you would like./

so i guess my editor : http://mdk2002.dyndns.org/MDKEditor/Editor is just a x-browser toy ;-)

the only reason why its not perfect, is because we who work on it have jobs and stuff to do…

when it comes to editing large files, youll still need to carefully implement the parser and runtimes in order to make it fast… that goes fo any editor out there – even native editors…

Bespin looks awesome btw…

Comment by Montago — February 14, 2009

OMG Dion and Ben, this is truly a *really* great thing, this just blew my feet away :)))
.
Congratulations guys :)))
.
This is gonna *change* things … ;)

Comment by ThomasHansen — February 14, 2009

wow scrollbars! wow no lags while editing! wow no trees!

now seriously – I don’t see anything exciting about this the only benefit so far I can find according to the preview is ability to work with files from any computer but really, how often you change workspaces? and multiuser editing – there are plenty of editors or IDEs with such feature and well even on that tech-preview it seems to be a bit laggy while scrolling file even the only feature so far is syntax-highlting it’s really very poor on that stage and if they add more features it will sure decrease performance more to say it will always be slower than ‘normal’ editor/IDE.. what’s more – it uses canvas and for me it’s like reinventing the wheel

so.. of course this project is on early stage but I don’t think many ppl will choose it as their main editor for many reasons

Comment by nazum — February 14, 2009

Detect and reject Opera for no apparent reason (Opera do support canvas)…

Comment by ywg — February 15, 2009

It’s slow for me.
I’m working on a similar widget, no canvas :P (my biggest problem now is Internet Explorer…), but it provides code completion and a couple of interesting plugins.
I’d like to help (in my spare time), if you need a developer.

Comment by nicrizzo — February 15, 2009

Dion,

This is awesome!!! I am so surprised how fast it is as I was skeptical at first until I tried it. This is an auspicious sign of many good things to come, no wonder Microsoft was scared and refused to implement the canvas. I always had looked forward to the day when widgets can break out from the technical limits of the browser without using Flash or Silverlight… and this day has truly come. This is just awesome!

Sam

ps ‘tab’ key and ‘shift-tab’ at the moment does not indent or unindent a ‘block’ of selected text. I know this is not a Unix standard but we had this in Windows editors for so many years now, and KDE editors had just started implementing this feature.

Comment by samtoocan — February 15, 2009

needs mouseover effects… so I know the buttons work

also… how do I open my own files or start a project? is that working in this demo yet?

Comment by blueskiwi — February 15, 2009

Use the command line on the bottom.

@ywg, afik it’s not supported because Opera doesn’t have the text rendering for CANVAS

Comment by antimatter15 — February 15, 2009

Nifty, but I’m confused about “running” a project. When I click the [View in Browser] icon for any Sample project file, I get “Saved file: undefined”.

In the video around 11:25 you talk about turning a collaboration icon blue, but I think it’s cut off and invisible in the screen capture.

Ctrl-Z works, but not Ctrl-Y/X/C/V, nor the Firefox Edit menu; I filed bug 480252.

Comment by skierpage — February 26, 2009

Leave a comment

You must be logged in to post a comment.