Interface Overview

Tool	Shortcut	Description
Brush	`B`	Draw freehand with customizable brush size and shape
Bezier Pen	`P`	Draw bezier curves and vector shapes
Eraser	`E`	Remove characters (hold `Ctrl` while using Brush for quick access)
Fill	`F`	Fill connected areas with character/color
Gradient	`G`	Apply gradient fills
Rectangle	`R`	Draw rectangles and squares
Ellipse	`O`	Draw circles and ellipses
Text	`T`	Type text directly on canvas
ASCII Type	`Y`	Create stylized ASCII text
ASCII Box	`Q`	Draw boxes and tables with line characters

Selection Tools

Tool	Shortcut	Description
Select	`M`	Select rectangular area
Lasso	`L`	Freeform selection by drawing
Magic Wand	`W`	Select matching cells (by character, color, or background)

Utility Tools

Tool	Shortcut	Description
Eyedropper	`I`	Pick character and colors from canvas (hold `Alt` for quick access)
Flip H	(click)	Flip selection horizontally
Flip V	(click)	Flip selection vertically

Tool Options

Each tool has specific options that appear below the tool buttons:

Brush/Eraser Options:

Brush size (1-20, adjust with [ and ] keys)
Brush shape (circle, square, horizontal, vertical)
Affects toggles (character, text color, background color)

Shape Tool Options (Rectangle/Ellipse):

Filled vs. outline mode

Fill Tool Options:

Contiguous mode (fill only connected cells vs. all matching)
Match criteria (character, text color, background color)

Gradient Tool Options:

Contiguous mode
Match criteria for area selection

Magic Wand Options:

Contiguous mode
Match criteria (character, text color, background color)

Bezier Tool Options:

Character mode (Selection, Palette, or Autofill)
Color mode (Current Color or Palette)
Close shape toggle
Stroke width and taper controls (for open paths)

Center Canvas

Canvas Settings Bar

The settings bar above the canvas provides quick access to canvas configuration:

Canvas Size:

Mode Toggle - Switch between character count (char) and pixel dimensions (px)
Width × Height - Adjust canvas dimensions with +/- buttons or direct input
Character mode: 4-200 columns, 4-100 rows
Pixel mode: Automatically calculates character count based on typography settings

Display Controls:

Grid Toggle - Show/hide the alignment grid overlay
Background Color - Click the color swatch to open the color picker (supports transparent)
Typography - Opens typography settings panel

Typography Settings (via Type icon):

Text Size - Font size from 8px to 48px
Character Spacing - Horizontal spacing multiplier (0.5x to 2.0x)
Line Spacing - Vertical spacing multiplier (0.8x to 2.0x)
Font Family - Choose from bundled monospace fonts or system fonts
Reset to Default - Restore all typography settings

Zoom Controls:

Current zoom percentage display
Zoom in/out buttons

Zoom Controls

Action	Shortcut	Description
Zoom in	`+` or `=`	Increase zoom level
Zoom out	`-`	Decrease zoom level

Zoom range: 20% to 400%

Pan (Move Canvas)

Hold Space and drag to pan the canvas
Useful when zoomed in to navigate around your artwork

Canvas Overlays

Selection Outline

Marching ants animation shows selected area
Purple highlight for active selection

Onion Skin (animation mode)

Blue tint shows previous frames
Red tint shows next frames
Toggle with Shift+O
Adjust number of frames shown in timeline controls

Cursor Preview

Shows character and color that will be placed
Displays brush size for brush/eraser tools

Right Properties Panel

The right panel contains collapsible sections for appearance, palettes, effects, and generators.

Appearance Section

Shows your current drawing style at a glance:

Character Preview - Large preview showing active character with FG/BG colors applied. Click to open the full character picker.
Color Selector - FG/BG color swatches. Click to open the color picker overlay.
Color Readout - Displays current hex values for foreground and background.

Shortcuts:

X - Swap foreground and background colors

Character Palette Section

Manage character sets for quick access:

Palette Dropdown - Switch between preset palettes (Basic, Blocks, Lines, Symbols, etc.) or your custom palettes
Character Grid - Click to select, double-click to edit, drag to reorder
Controls - Move left/right, add current character, delete, import/export palettes

Shortcuts:

Cmd+[ / Ctrl+[ - Previous character in palette
Cmd+] / Ctrl+] - Next character in palette

Color Palette Section

Manage color swatches with Text and BG tabs:

Palette Dropdown - Switch between preset palettes (ANSI, Monokai, etc.) or custom palettes
Text Tab - Foreground color swatches (click to select, double-click to edit)
BG Tab - Background color swatches (includes transparent option)
Controls - Move colors, add current, delete, import/export

Shortcuts:

Shift+[ - Previous palette color
Shift+] - Next palette color

Effects Section

Apply visual transformations to your selection:

Dithering - Add texture patterns
Color Adjustments - Modify brightness, contrast, saturation
Character Remapping - Replace characters based on rules

Generators Section

Create procedural content:

Digital Rain - Matrix-style falling characters
Noise Patterns - Random character distributions
Gradients - Character-based gradient fills

Bottom Timeline

Playback Controls

The timeline appears at the bottom for animation projects:

Timeline Interface

Button	Shortcut	Function
⏮️ First	`Shift+<`	Jump to first frame
◀️ Previous	`,` (comma)	Previous frame
▶️ Play/Pause	`Space`	Play/pause animation
▶️ Next	`.` (period)	Next frame
⏭️ Last	`Shift+>`	Jump to last frame
🔄 Loop	(click)	Toggle looping playback

Frame Management

Action	Shortcut	Description
Add frame	`Cmd+N` / `Ctrl+N`	Add new frame after current
Duplicate frame	`Cmd+D` / `Ctrl+D`	Duplicate current frame(s)
Delete frame	`Cmd+Delete` / `Ctrl+Backspace`	Delete current frame(s)

Frame List:

Thumbnails of all frames
Current frame highlighted with purple border
Click to switch frames
Drag to reorder frames
Multi-select with Cmd/Ctrl+click or Shift+click

Onion Skinning

Toggle with Shift+O. Shows ghost images of previous (blue) and next (red) frames to help create smooth animations.

Controls:

Number inputs for frames before/after (0-10)
Center button toggles onion skin on/off

FPS Control

Slider to adjust animation speed from 1 to 60 FPS. The current FPS value is displayed on the slider.

Keyboard Shortcuts Quick Reference

Info

Access the complete keyboard shortcuts reference from the hamburger menu → Keyboard Shortcuts.

Tool Selection

Shortcut	Tool
`B`	Brush
`E`	Eraser
`F`	Fill
`G`	Gradient Fill
`M`	Rectangle Select
`L`	Lasso Select
`W`	Magic Wand
`I`	Eyedropper
`R`	Rectangle
`O`	Ellipse
`T`	Text
`Y`	ASCII Type
`Q`	ASCII Box
`P`	Bezier Pen

Canvas Actions

Shortcut	Action
`Cmd+A` / `Ctrl+A`	Select All
`Cmd+C` / `Ctrl+C`	Copy Selection
`Cmd+V` / `Ctrl+V`	Paste Selection
`Cmd+Z` / `Ctrl+Z`	Undo
`Cmd+Shift+Z` / `Ctrl+Shift+Z`	Redo
`Delete` / `Backspace`	Delete selected cells
`Esc`	Clear selection

Color & Brush

Shortcut	Action
`X`	Swap foreground/background colors
`[`	Decrease brush size
`]`	Increase brush size
`Alt` (hold)	Temporary eyedropper
`Ctrl` (hold with Brush)	Temporary eraser

View & Zoom

Shortcut	Action
`+` or `=`	Zoom in
`-`	Zoom out
`Space` (hold) + drag	Pan canvas

Animation

Shortcut	Action
`,` (comma)	Previous frame
`.` (period)	Next frame
`Shift+<`	First frame
`Shift+>`	Last frame
`Space`	Play/Pause animation
`Cmd+N` / `Ctrl+N`	Add new frame
`Cmd+D` / `Ctrl+D`	Duplicate frame
`Cmd+Delete` / `Ctrl+Backspace`	Delete frame
`Shift+O`	Toggle onion skinning

File Operations

Shortcut	Action
`Cmd+S` / `Ctrl+S`	Save to cloud
`Cmd+Shift+S` / `Ctrl+Shift+S`	Save As...
`Cmd+O` / `Ctrl+O`	Open from cloud

Customizing Your Workspace

Theme Selection

Click the sun/moon icon in the top-right to switch between:

Light Mode - Bright, high-contrast interface
Dark Mode - Easy on the eyes, default theme

Your preference is saved automatically.

Project Settings

Access via hamburger menu → Project Settings:

Canvas size - Width and height in cells
Background color - Default canvas background
Grid visibility - Show/hide the grid overlay

Tips for Efficient Workflow

Pro Tips

Learn the essential shortcuts - B for brush, E for eraser, Space for play/pause, and [/] for brush size will speed you up significantly.
Use modifier keys - Hold Alt for quick eyedropper, hold Ctrl with brush for quick eraser.
Zoom for precision - Press + multiple times to zoom in for pixel-perfect editing.
Save custom palettes - If you use the same colors or characters often, save them as a palette.
Use onion skinning - Press Shift+O when animating to see previous/next frames as guides.
Multi-select frames - Cmd/Ctrl+click to select multiple frames for batch operations like duplicate or delete.