Web-Based Code Editor: Mozilla Bespin

Feb

2009

Filed Under: online tools, web design | Add a Comment

I stumbled across a new project Mozilla Labs is working on called Bespin. Bespin is an online, in-the-cloud code editor that works within your browser.

Introducing Bespin from Dion Almaer on Vimeo.

In the Cloud(s)

You can access your files from anywhere you have a browser and an internet connection. All your files and projects are synced and automatically updated.

Extensible

Bespin and its interface can be extended and customized by use of plugins; similar to how Firefox and Thunderbird allow you to add functionality and options.

Customize Bespin With Themes

You can customize the appearance of Bespin using themes and JSON.

Look at the Bespin Themes documentation for example theme code.

A Look a Mozilla Bespin’s Interface

Bespin is pretty bare bones at the moment and consists of 2 main screens:

Dashboard
Currently acts as a file manager and contains your projects, as well as details about currently open files.
Code Editor
This is where you actually edit your files. Contains a simple menu bar, editing window and a command line.

Bespin Dashboard

You can view all of your files; sorted by project. At the bottom, you can view details about the projects you have open currently.

One interesting note—the file manager doesn’t use a file tree system for navigation, but rather panels that open horizontally as you progress through each folder. This is similar to Grooveshark’s interface, but, in my opinion, Bespin is much more user-friendly.

When panels are resized and filenames can’t be fully displayed, Bespin intelligently truncates the names by adding a … in the middle so you can still read the 1st and last bits of the filenames.

Bespin Code Editor Interface

Bespin’s code editor screen consists of:

A menu/nav bar that contains the name of the project and the file you’re working on, and a simple menu (Save, Undo, Redo, Cut, Copy, Paste, View in Browser and Change Font Size)
Main code editing screen
Command line

The main editor screen features:

Syntax highlighting
Line numbers
Non-obstructive scrollbars

Scrollbars

The scrollbars in Bespin’s code editor window stay out of your way until you need them.

When the scrollbars appear, they are mostly transparent; allowing you to still see the most amount of code possible. When you hover over a scrollbar, it becomes solid so you can see it better.

This is accomplished, according to the developers, using HTML 5’s new <canvas> tag, which is supported by most of the major browsers (except Internet Explorer, of course).

Bespin’s Command Line

You can access additional commands from the command line instead of going through several tiers of menus.

To use Bespin’s command line, you just start typing in the text field (just to the right of the small arrow) and it will filter down the available commands as you type.

Some example commands:
export [project] [archivetype]

Exports the current file to the project and archive type you specify (.zip or .tgz).
goto [linenumber]
Go to a certain line in your code.

import [project] [url]
Import the URL you enter as a project in Bespin.

help
Shows a list of all available commands.

These are just a few of the commands that come with Bespin. You can also extend Bespin by creating your own Bespin commands and using them from the command line.

Note: The command line is also available from the Dashboard; but contains other project-related commands.

Bespin’s command line may take a bit of getting use to, but if you’re already familiar with using command prompts/terminals, this helps.

For instance, you can use your up and down arrow keys to toggle recently typed commands and scroll through other commands.

A Good Start

Future collaboration feature in Bespin Mozilla Bespin is currently in an alpha stage, but it’s a good start.

One upcoming feature is Collaboration—allowing multiple developers view and edit code in real-time.

I look forward to seeing how Bespin progresses.

It seems pretty fast (even when editing large files) and has a very simple interface.

The fact that everything is on the cloud and you will have access to all your projects/files from wherever you are makes it great for those working across several computers.

Grab a free account and give it a whirl.