Groups of Text

To create a Group, click on a blank area of the Canvas. The Group will become active, meaning you can edit the text inside. As you hover over a Group, a "Ghost Caret" will help you see where the Caret will fall upon clicking.

To deactivate a Group, press esc or create a new Group. Deactivating an empty group removes it. 

Clicking within a Group will select it and position the Caret whether or not the Group was already Active. You can also select a Group by pressing and releasing ⌘ (Control on Windows) and the Group’s ID (which is shown left of the the Group).

To move a Group, you hold  (Control on Windows) while dragging. To move multiple Groups at a time, you hold shift while selecting additional Groups to move. Selected Groups are surrounded by marching ants.

To Zoom, hold alt and scroll or press the Zoom shortcuts ⌘ (Control on Windows) and + or ⌘ (Control on Windows) and –. To Pan, scroll or drag blank Canvas, or deactivate any active Groups before pressing the arrow keys (hold shift to pan faster).

Main HUD

Hold ⌘ (Control on Windows) to access the Main HUD, which shows Group IDs and canvas-related information.

The Main HUD also shows you Char's Clipboard (Char uses it's own). You can cut, copy and paste like normally, with the exception that Char pastes on the release of ⌘ (Control on Windows; rather than the press of V). Hold ⌘ (Control on Windows) and press V or shift-V to scroll through snippets to Glue–when you release Command, the snippet you have applied Glue to will be Pasted.

Data HUD

Hold Control to see Char’s Data HUD, which visualizes:

  • The time elapsed since your Document was created (if over 1 minute)
  • The number of Groups in your Document
  • A bar graph inside the Caret representing its position in the Group
  • A bar graph under each character representing the time elapsed since the previous Character was typed. Elapsed times over 1 second are fixed to a max height and filled in a darker color than the others.


Any Group or selection of text can be Evaluated (i.e., run as a JavaScript). To Evaluate scripts, press the Evaluate shortcut ⌘-enter (Control-enter on Windows). Char will then Evaluate the selected text, or, if no text is selected, Char will Evaluate the Active Group. Try Evaluating the following:

$.group("Hello, world!")

You should see a new Group emerge at the position of your Cursor. An example of chainable Commands within a function is provided below:

function spaceOut(s) {
$.group(s.split('').join(' '));


Char has four types of Commands: Canvas, In-Situ, Group, and Preferences.

Canvas Commands

$.speak(“text”) is one of Char’s built-in Commands, and it is also an example of a Canvas Command, since it is Evaluated on the Canvas (as opposed to a Group). Other Canvas Commands include $.grid() and $.particles(“.”), the latter of which will display a star field.

In-Situ Commands

While the $.speak(“text”) command expects some input (e.g., “text”), others commands don't. For example, you can control iTunes by Evaluating $.play() and $.pause().

Some “input-free” Commands, like $.play()$.pause(), and $.next(), can be Evaluated In Situ. In Situ Commands require fewer keystrokes. To Evaluate In Situ Commands, just type them after some whitespace and press ⌘-enter(Control-enter on Windows). For example, typing:

it is the next play

in a new Group before pressing ⌘-enter (Control-enter on Windows) will cause iTunes to play and Char to revert the Group back to:

it is the next

Pressing ⌘-enter (Control-enter on Windows) again will not cause iTunes to advance since a space separates the word “next” from the Caret. Here's every In-Situ Command: play, pause, next, previous, page, grid, beep, red, green, blue, white, black, gray, yellow, cyan, magenta.

Group Commands

Unlike Canvas Commands (of which In Situ Commands are a short-form subset), Group Commands are Evaluated on Groups. For example, to have Char speak the text within a Group (with ID 1), Evaluate $1.speak(). You should now hear Char speak the contents of Group 1. To reverse the text in Group 2, Evaluate $2.reverse():

Char provides a set of Group Commands that define the building blocks of text manipulation, enabling Char to serve as a text engine. These are the functions one would need to implement a basic text-editor, like:

$1.insert(0, "Hello, world!") // Insert "Hello, world!" into Group 1 at the 0th index
$1.remove(0, 13) // Remove 13 characters from Group 1 beginning at the 0th index

More Group Commands, like $1.getY() and $1.matches(“Colou?r”), for example, would be the start of a space-aware, text-search functionality.

Preference Commands

Char is highly customizable. You can use Preferences Commands to modify basic Canvas properties (e.g., setting the Canvas background color) as well as very specific properties (e.g., setting the duration of a zoom operation) or setting a custom behavior for handling alt left and alt right keyboard presses by submitting your own regular expression:

$.setAltLeftRegex(“bookmark”) // Alt & left will move caret to previous occurrence of "bookmark"