Sublime Blog

Anatomy of a Next Generation Text Editor

(This is an introduction to the user interface of Sublime Text, it’s the first in a series)

My background is in building tools for games. I’ve encountered some beautifully designed tools for artists, such as Modo, ArtRage and Silo. At the time I was using Vim in its 16 colour, 80 column glory, and the very colourful Visual Studio. It occurred to me: why couldn’t the humble text editor get some of this love?

I’ve tried to put some of this user interface craftsmanship into Sublime Text. There are three principles I felt would be required:

  • Unobtrusive, minimal chrome. The focus should be on the text, not fourteen different toolbars.
  • Don’t obscure the text with dialogs.
  • Use the pixels you’ve got. Full screen, multi monitor and editing files side by side should all be possible.

Below is a short tour showing how I’ve applied these rules in building Sublime Text. First, here’s the basic day-to-day level of chrome you are presented with:

There’s not much there, and it’s certainly not yelling at you.

Functionality like find and replace, that would generally be implemented via dialogs, is instead presented as a panel at the bottom of the screen.

The crown jewel, however, is how it works when you start to get serious. The full screen mode does away with a maximum amount of chrome, and works seamlessly with multiple monitor setups. Here you can see Sublime Text running on two monitors, full screen on each, with five files being edited side-by side.

Here’s a screenshot of the large monitor in the above photo, editing three files side by side in full screen. (Warning: 2560×1600 pixels ahead!)

Have I missed any principles? Have I adhered to the ones I set? I’d love your thoughts and feedback.

(Subscribe to the blog, so you don’t miss part two!)

Jon Skinner

30 Comments

  1. Screenshot missing :(

    Comment by Anonymous — December 28, 2007 @ 10:47 pm

  2. Can you edit the same file in multiple windows?

    Comment by Vince Batchelor — December 29, 2007 @ 12:15 am

  3. Vince: Sure can! You can turn on quad pane mode and edit the same file in four different places at once if you’re extra keen.

    Comment by Jon Skinner — December 29, 2007 @ 12:19 am

  4. Hi Jon,

    Feedback ? Lots of things actually. I am currently using three monitors and I think you can take my word when I say that the current editors take the life out of me.

    1. Instead of requesting for ‘use commonly known keyboard shortcuts’ , I’d rather say that if possible, please make shortcuts configurable. I think we all come from different backgrounds, and each has her / his own shortcut list.

    2. I think you must have already thought about this (and although not a principle), please please please avoid mouse usage as much as possible. Its a pain, literally and otherwise.

    3. I am unsure what you’re ambit for a text editor is, but I have always felt the need for a diff editor when I thought of a multi-pane editor. Things like Kdiff and TortoiseMerge only allow snapshot diff, a live conflict resolver would have been heaven. But then, if this is beyond your current target, I think it’s understandable.

    p.s.: The editor that’s taken my fancy since a while is Scite, 400+ kb on windows and available on linux, it gets me the small, clean editor environment that I need (besides being free). Sans multi-pane support though.

    All the best :)

    Comment by Robins — December 29, 2007 @ 1:25 am

  5. Hi, it seems that a lot of the elements you are trying to implement are also prevalent in Mac OSX; things like the search items appearing in coloured bubbles (see Safari’s inline search), or the black scrollbars in Apple’s pro-apps. Was this a conscious decision, or are you also looking into developing a Mac version? I think Core Animation can really help out in bringing some of the more esoteric interface designs into practice.

    Comment by ashmodai — December 29, 2007 @ 1:50 am

  6. Robins: The richness of the key binding system is one of the highlights. I’ll leave details for another post though.

    ashmodai: the coloured bubbles are in fact just the selection, I wasn’t happy with the standard blocky look you generally get.

    The UI polish of Mac OS X is definitely an inspiration, but I don’t have any immediate plans for a port. One platform at a time!

    Comment by Jon Skinner — December 29, 2007 @ 2:00 am

  7. where can I download and try this software ?

    Comment by matelot — December 29, 2007 @ 2:04 am

  8. matelot: there’s no version for public consumption yet, but when there is in the not too distant future, you’ll be able to download it here.

    Comment by Jon Skinner — December 29, 2007 @ 2:08 am

  9. Just wondering: why are you writing emacs? :-)

    Comment by pierre — December 29, 2007 @ 2:21 am

  10. Public consumption schmublic schonsumption. Dude. Don’t blog aon a non-existant product. Get version 1 out by tomorrow or I’ll lose interest. All that ‘coding like mad’ will be a big fat waste otherwise. I’ll check back tomorrow, but only because I’m nice.

    Comment by Willem — December 29, 2007 @ 2:53 am

  11. You seem to hint in your introduction that this editor takes the good qualities from vim. Unfortunately, you don’t seem to have implemented vim’s powerful command set.

    Comment by Karl — December 29, 2007 @ 3:15 am

  12. > Use the pixels you’ve got

    Agreed. Next question is, what for ?

    My wish is a one-pixel per character overview of the file I’m editing. A vertical 80 x 1000+ pane would be enough for a reasonable module file, and still allow two other editing panes in a modest monitor.

    Things you could do with it:
    - Show the code/text structure
    - Shade the regions open in other panes
    - Use the color coding applied in edit panes
    - Highlight all occurrences of a search string
    - Blink matching parenthesis/braces

    Free idea. I just hope it takes and is widely imitated ;-)

    Comment by A.B.Leal — December 29, 2007 @ 3:18 am

  13. How about textmate ( http://macromates.com/ )? Does every bullet point you mentioned :)

    Still, I think extensibility should be a requirement. Take tabbing for example: you have different models for tabbing for lisp, c, python, and make; ideally, I should be able to edit all of the above in the same editor!

    Comment by Duane Bailey — December 29, 2007 @ 3:54 am

  14. Yah.. umm.. you’re rewriting vim. Forest.. trees..

    Comment by Stephen Waits — December 29, 2007 @ 4:18 am

  15. Hay, what’s the make of the keyboard in “monitors_large.jpg”??

    Comment by STDOUBT — December 29, 2007 @ 4:26 am

  16. Uh… I’ve been doing exactly this in vim since, like, 15 years ago…

    Comment by Jack — December 29, 2007 @ 4:30 am

  17. @Robbins – check out Araxis Merge (full editing during the diff, other whizzy features).

    If Epsilon had multi-monitor support it would probably look a lot like what you’re working on; very minimal chrome, just the text.

    [I find line numbers and information like "what column you're on now" very distracting; 99% of the time you don't need that information, so why show it?]

    Comment by landon dyer — December 29, 2007 @ 4:50 am

  18. This is pretty, but all you’ve done is clone about 3% of Emacs. You might do better to just make a friendly distribution of NTEmacs with good default keybindings, menus, etc.

    Comment by Aristus — December 29, 2007 @ 5:27 am

  19. Uhm, dude, get yourself a real window manager, one that tiles, and then all of your apps can do this.

    dwm for example, or ion3, or wmII, or xmonad.

    Oh, your an OSX user, sorry, can you guys replace your window manager?

    Seriously tho, keep hacking, have fun.

    Comment by Kreig Bugzefsky — December 29, 2007 @ 11:40 am

  20. STDOUBT: It’s one of the new apple keyboards

    Comment by Jon Skinner — December 29, 2007 @ 11:57 am

  21. Kreig: Having the window manager take care of full screen windows is a great start, but by definition, it only works with what’s outside the window, not what’s inside.

    Comment by Jon Skinner — December 29, 2007 @ 12:19 pm

  22. Why are you reinventing emacs?

    Comment by zandercruise — December 29, 2007 @ 1:26 pm

  23. This looks quite interesting, Jon! I have a few questions, though:

    1) Will the program run on Linux?
    2) Will it be open source?
    3) Will there be any diff/source control support?

    Comment by Eric Stein — December 29, 2007 @ 7:15 pm

  24. @A.B.Leal and the zoomed-out preview idea: This is what we attempted in http://bigasterisk.com/skim (read-only viewer)

    It’s pretty nice to use, although that particular implementation is old and had some problems.

    Comment by drewp — December 29, 2007 @ 8:57 pm

  25. Eric: It’ll be Windows only for the first release, but other platforms will follow.

    A.B.Leal / drewp: If I didn’t know better, I’d think you already knew the topic of the next blog post ;)

    Comment by Jon Skinner — December 30, 2007 @ 12:59 pm

  26. Drew: thanks for Skim, working nicely for me under CentOS 4.1. Fine choice of weapons there (Python/Tk, also my favorite for the past few years).

    Jon: I’m glad to hear someone is overcoming the “maze of emacs text-buffers, all alike” mindset. Waiting for more news, and hoping it catches ;-)

    Suggested reddit-bait for your next blog post: “It’s 2008, why is your text editor designed for 1983 ?”

    Comment by A.B.Leal — January 4, 2008 @ 5:36 am

  27. [...] Nextgen text editor anatomy (are people still writing these things?) The full screen mode does away with a maximum amount of chrome, and works seamlessly with multiple monitor setups. Here you can see Sublime Text running on two monitors, full screen on each, with five files being edited side-by side. [...]

    Pingback by Sp3w — January 5, 2008 @ 1:40 am

  28. Hi Skinner!

    Your software is beautiful! I’m enjoying it much!

    I love minimal chromes. Minimalism with no utility loss, for sure.

    Actually I’m looking for a “TextMate for Windows”. But I find that your software have much potential.

    I’m missing some little things. But I’m really missing something like a Symbol-explorer, to go to function and classes (in the current file) quickly. E TextEditor got a beautiful one. (http://www.e-texteditor.com/wiki/index.php/Editing#Symbols)

    Hey Skinner, Ctrl+Del and Ctrl+Backspace is still not working?

    thanx!!!

    Comment by eric1235711 — February 20, 2008 @ 6:34 am

  29. I forgot to ask!

    are you going to start a forum or a issue tracking system for Sublime?

    thanks

    Comment by eric1235711 — February 20, 2008 @ 6:41 am

  30. Eric: Forums will be coming along with the next release, I’m looking forward to it!

    Comment by Jon Skinner — February 20, 2008 @ 4:27 pm

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.