Interface & Workspace

Novaboard's interface is designed for efficient pixel art workflows. This guide covers panels, the command palette, themes, and customization options.

Novaboard full interface showing all panels
The complete Novaboard interface with all panels visible

Command Palette

The command palette provides quick access to all commands without using menus. Open it with:

ShortcutModeDescription
Ctrl+P Quick OpenSearch and switch between open files
Ctrl+Shift+P CommandsSearch and execute any command

You can also open it without remembering a shortcut:

  • Search & commands pill - The pill at the end of the menu row, labelled "Search & commands" with its shortcut, opens Quick Open. The file grid has the same button in its header
  • View → Command Palette - The View menu has a Command Palette item that opens the palette in commands mode

Features

  • Fuzzy search - Type partial words to find commands
  • Recent commands - Recently used commands appear first
  • Instructions - Drawing instructions accept parameters (e.g., line 0 0 10 10), with Tab completing the syntax
  • Cross-workspace file search - Quick Open finds files across every workspace, not just the active one
  • Frame jump syntax - Type filename N to open a specific frame of another file
  • Keyboard navigation - Ctrl + J / K or Ctrl + P move through results, Escape closes, and Up / Down on an empty query browse previous searches
  • Back to files - The ✕ button clears the query, and Backspace on an empty query in commands mode returns to Quick Open

Go To Navigation

Quick Open results mix four types of navigation targets in a single list:

  • Files - Switch to any file across any workspace
  • Go to Frame - Type a frame number to jump directly to it
  • Go to Layer - Navigate to a layer by name
  • Go to Tag - Jump to an animation tag's first frame

Type without the > prefix to search across all navigation targets.

Tip: Type > in Quick Open mode to switch to command mode.
Command palette in Quick Open mode
Quick Open mode (Ctrl+P)
Command palette in Commands mode
Commands mode (Ctrl+Shift+P)

Drawing Instructions

The command palette also accepts a small instruction language for scripted edits, each with argument completion via Tab: move x y, pixel x y, line x1 y1 x2 y2, draw x y (line from the cursor), rect / rectFill x y w h, roundedRect / roundedRectFill x y w h r, circle / circleFill x y r, ellipse / ellipseFill x y w h, fill x y, setColor #rrggbb and setBrushSize n.

Docking System

Novaboard uses a fully customizable docking system. Panels can be dragged, dropped, floated, and arranged into any layout you need.

  • Drag-and-drop panels — Drag any panel by its tab to reposition it within the dock layout
  • Floating panels — Detach panels to float freely over the canvas
  • Multi-panel floating containers — Floating and popout containers hold a full dock subtree, so multiple panels can be tabbed, split, and resized inside one window
  • Popout windows — Right-click a panel tab and choose Pop Out to New Window to move it into a separate browser window. Use a second monitor or keep reference panels visible while working. Send to Window and Send Back to Main Dock move tabs between windows
  • Drag tabs between windows — Drag a panel tab straight into a popout (or back), with a live drop preview. Dropping a panel outside the window opens it in its own floating window at the drop position. Popout windows use their tab bar as the header; drag it to move the window
  • Session restore — On reload, a toast offers to restore previous-session popouts; dismissing returns each panel to its last saved position in the main dock
  • Dock zones — Visual drop zones appear when dragging panels for precise placement
  • Workspace presets — Save and load custom panel arrangements, including popouts
  • Resizable docks — Drag dock edges to resize; panels can be made very compact. Floating windows resize from any edge or corner
  • Panel header buttons — Every panel group's tab bar ends in a cog and a minimize button. The cog opens that panel's settings (only the Preview and Color Picker panels have any; it is greyed out otherwise), and minimize folds the group down to a strip of icons. Double-clicking a tab does the same fold; clicking an icon in the strip opens the panel as a flyout you can resize
  • Zen Mode — Hide all panels at once for distraction-free editing (Window menu)
  • Reset Layout — View → Reset Layout puts every panel back where it started. Layouts are saved per screen-width bucket, so a laptop and an external monitor keep their own arrangements
Floating and popout windows are a desktop capability. On tablet chrome the panels stay docked.
Canvas with every panel hidden — Zen Mode
Zen Mode hides every panel so only the canvas remains.

Editor Tabs & Split View

The editor is a panel like any other, and every open file is a tab in its tab bar. Opening a file that is already open switches to its tab instead of opening it twice. Right-click a tab for Split View, Pop Out to New Window (desktop), and Close; View → Split View does the same for the active tab.

  • Side by side — Drag a tab to the edge of the editor area to open a second group, up to four on desktop and two on iPad
  • Two views of one file — Split View opens the same file again, marked (2) in the tab. Each view keeps its own zoom, pan, view rotation and tile mode
  • Back to the grid — File → Back to Workspace closes the active tab and returns to the file grid

Panels

Toggle panels to customize your workspace. Each panel can be shown or hidden:

PanelShortcutPurpose
Navbar Shift+F1 Top menu bar
Toolbar Shift+F2 The tool buttons
Layers Shift+F3 Layer management
Preview Shift+F4 Animation preview, fitted to the panel
Palette Shift+F5 Color palette and swatches
Timeline Shift+F6 Animation frames and timing
Status Bar Shift+F7 Bottom status bar with zoom and position
Color PickerStandalone dockable color picker panel
Slices Shift+F9 Manage export slice regions
Tags Shift+F10 Manage animation tags and ranges
LibraryBrowse files, slices, and bundled system clips to place as clip layers
EffectsEdit non-destructive layer effects on the selected layer or group
Zen Mode ` Hide all panels at once for distraction-free editing

In addition to the dockable panels above, Novaboard also has ephemeral dialogs that float over the canvas but are not tracked in panel visibility: Outline, Brightness/Contrast, Posterize, OKLCH, HSL, Curves, Anti-Aliasing, Auto-Shade, Replace Color, and Reference. These open when invoked from menus or filters and close when dismissed.

Panel Settings

Two panels put something behind the cog in their tab bar. Preview keeps its view mode, background, tile layout and voxel options there. Color Picker keeps which of the four picker modes are offered, the color space the wheel is mapped in, the harmony overlay, the discrete hue wheel and its step count, the wheel's starting angle, the normal map's Y direction, and whether the value and alpha sliders sit beside the picker or under it. It is the same set as the Color Picker section of User Preferences, driven by the same settings, so a change in one place shows up in the other. Colors covers what each mode does.

Panel Sizes

Drag panel edges to resize. Sizes are remembered between sessions. The timeline, preview, and palette panels have adjustable heights.

Menu Bar

While a file is open, the menu bar runs File, Edit, Image, Layer, Select, Filter, Animation, View, Window and Help, with the tool options row underneath it. The file grid has its own shorter File, Edit and Help menus. Menus lists what is in each one, including the Display chrome modes, Reset Layout, Full Screen, and the workspace import and export items.

Narrow screens: below 768px the menu bar folds into a hamburger button on the tool options row, exposing the same menus. Tablets keep both rows.

Preview Panel

The preview panel fits your artwork to the panel and lets you zoom in from there, so you can check how your sprite will look in-game.

Features

  • Independent zoom - 0.25x to 20x, separate from main canvas
  • Fit to panel - Click the zoom percentage to fit, double-click it to type a value
  • Pan support - Drag to pan around zoomed images
  • Animation playback - A play/stop button, the frame counter and the elapsed time. Playback follows the timeline's mode (once, loop or ping-pong)
  • Settings - The panel's own options (view mode, background, tile layout and the voxel settings) live behind the cog in its tab bar
Shift+Space - Play/stop animation in preview

Status Bar

The status bar runs along the bottom of the editor and shows live information about the active file.

From the left: canvas size, a badge with the file's color mode (RGBA, Indexed or Grayscale), the active tool, the X/Y pixel coordinates under the cursor, the frame counter (once the file has more than one frame; click it to step forward, right-click to step back), the color under the cursor, and the zoom.

  • Editable zoom - The zoom readout is a number field. Type a value and press Enter or click away to commit it; press Escape to cancel and keep the previous zoom
  • History - The right side carries undo and redo around a counter reading "v 14 / 32": where you are in this file's history, and how many versions it holds. Click it to open the History panel, where every version is a row you can click to go back to it
  • Theme and full screen - The last two buttons swap the light/dark slot and toggle full screen

Theme

Novaboard keeps two themes at once: one for light, one for dark. Pick which theme fills each one in Edit → User Preferences under Appearance, then switch between them with the sun/moon button, which sits in the status bar while editing and in the navbar of the file grid.

  • System - Follows your OS dark/light mode setting
  • Dark - Always shows your dark theme
  • Light - Always shows your light theme

Light and Dark ship as the stock themes, plus Dracula, which you can put in either slot. Any theme can fill any slot, so if you prefer two dark themes the sun/moon button just swaps between them.

UI Mode

Novaboard ships with two built-in UI modes that you can switch between at any time. The first time you open the app, a landing overlay greets you; its call to action opens the New File dialog on the Starters tab so a ready-made project is one click away.

  • Simple - A compact mode that hides the timeline panel along with the advanced tools and features (effects tools, text, gradient, blend modes, layer effects, onion skin, tile mode, guides and the advanced export formats). Good for quick sketches and first-time users.
  • Advanced - The full dock layout with every panel, tool, and feature available.

Switch modes at any time via Window → Layouts → Simple Mode / Advanced Mode, or from the Layouts section of the floating View button that appears when both the navbar and the status bar are hidden. The choice is saved across sessions.

Feature Flags

Two experimental features sit behind toggles in Edit → User Preferences under Experimental Features:

  • Brush Dynamics - Pressure sensitivity, velocity mapping, and stroke stabilization for the brush tool. On by default
  • Stylus tilt & rotation - Map stylus tilt, azimuth, and twist to brush size and rotation. Off by default

Flags persist per browser. Features behind a flag are still under active iteration, so expect rough edges.

Keyboard Shortcuts

Novaboard has over 220 keyboard shortcuts that can be customized to match your workflow.

Viewing Shortcuts

Press Shift+? to open the keyboard shortcut editor, or visit the Shortcuts page.

Customizing Shortcuts

The same editor is where you rebind things. Open it from Edit → Keyboard Shortcuts, Help → Keyboard Shortcuts, the Keyboard Shortcuts section of User Preferences, or the command palette. There you can:

  • Add multiple key bindings per action
  • Remove existing bindings
  • See conflicts between shortcuts
  • Reset to defaults
  • Search filter - Find shortcuts by name or description; the search field auto-focuses when the editor opens
  • Mouse button support - Bind middle and right mouse buttons to actions
  • Scroll-wheel binding - Bind scroll-wheel up/down (with optional modifiers) to any action
  • Conflict resolution dialog - When a new binding clashes with an existing one, a dialog lets you reassign or clear the conflicting shortcut inline
  • Multi-stroke chords - Record a sequence such as Ctrl+K Ctrl+S. Once the first stroke is down, a hint at the bottom of the screen shows the chord waiting to be finished
  • Keymap preset - A Novaboard / Aseprite switch at the top of the editor. Tool letters already match Aseprite, so the Aseprite preset only remaps the zoom row (1-6 for 100%-3200%, matching Aseprite's own layout) and hands Full Size Preview's 1 key over to it

Pan and Rotate Keys

Canvas navigation uses ordinary tool shortcuts, rebindable like any other:

  • Pan - Hold Spaceor Middle Click and drag to pan the canvas
  • Rotate - Hold R and drag to rotate the view

Shortcut Categories

The editor groups shortcuts into nine categories: Tools (tool selection), File, Edit, View (zoom and panel toggles), Selection, Layer, Palette, Animation and Canvas.

Workspaces

Organize your projects into separate workspaces. Each workspace has its own collection of files and independent camera/canvas state.

  • Create workspaces - Click the "+" button in the workspace selector
  • Switch workspaces - Select from the workspace selector dropdown
  • Rename - Click the pencil icon next to a workspace name
  • Delete - Click the trash icon on a workspace row and confirm in the dialog. Deleting a workspace cascades to all its files and their whole history. You cannot delete the active workspace or the last remaining one
  • Independent state - Each workspace preserves its own camera (pan, zoom, and flip). Dock layout, popout windows, and panel visibility are global and shared across every workspace

The workspace selector sits in the header of the file grid, the screen you land on when no file is open. Existing files are automatically migrated to a default workspace.

Deleting Files

Right-click a file in the grid and choose Delete File. Deletion cascades to every version, every branch and the file's history record in one transaction, so there are no orphaned records left behind.

Wheel Menu

A radial quick-access menu for your most-used commands. Open it by pressing For Mouse Backor Mouse Forward or clicking the mouse back/forward buttons.

  • Up to 10 slots - Assign any command to each slot
  • Center modes - Choose between a custom command button, recent colors, or mini palette
  • Keyboard navigation - Arrow keys to cycle, Enter to activate

Customize it in the Wheel Menu Editor (Edit → Wheel Menu…): assign a command to each slot, add or remove slots, pick the center mode, or reset to defaults.

Grid & Checkerboard

The pixel grid and transparency checkerboard can be customized:

  • Grid - Shows at zoom levels above a threshold (default 4x)
  • Checkerboard - Background pattern showing transparency

Both live in the View menu: the grid options (including the isometric grid and snapping) sit in the Grid submenu with Grid Settings…, and the checkerboard has its own settings item. See Grid Settings for detailed options.

Number Input Tips

Number inputs throughout Novaboard support several convenient features:

Math Expressions

Type math expressions directly into any number field and press Enter to evaluate: 32*2 → 64, 100/4+10 → 35, (16+8)*2 → 48. Addition, subtraction, multiplication, division and parentheses are supported.

Scroll and Drag to Adjust

Hover any number input and scroll to step the value, or click and drag left/right to scrub it. Hold Shift for larger steps. A whole scrub records a single undo entry, so dragging a value like layer opacity can be undone in one step rather than one per pixel of movement.

Editable Sliders

Sliders throughout Novaboard are editable by default: type a value directly into the field next to any slider instead of dragging it. The same drag-to-scrub and hover-scroll behavior applies to the slider's number field.

User Preferences

Access user preferences via Edit → User Preferences to customize your workspace:

A search box at the top of the dialog filters settings as you type. Non-matching settings and sections hide in place; the matching toggles, dropdowns, and sliders stay where they are so you can use them directly. Searching a section title reveals every setting under it.

The dialog is organised into sections you can jump between from the list on the left:

  • Language - Choose from 14 supported languages
  • Appearance - Follow the system or pin light/dark, and choose which theme fills each slot
  • Default New File Settings - Canvas width and height, palette, template, FPS, and whether onion skin starts on
  • Grid & Checkerboard - Defaults for both, with the option to override whatever each file carries
  • Editor Behavior - Live preview, smart fill on cut/delete, layer navigation, pixel grid defaults, and inverting the Ctrl+scroll brush sizing direction (Aseprite-style, off by default). Show All Frame Numbers is here too: the timeline ruler numbers every fifth frame out of the box, and turning it on numbers all of them
  • Stylus - Draw with finger, pen long-press for the wheel menu, and a pen offset calibration
  • Color Picker - Which picker modes appear, slider layouts, color space, harmony, and the wheel's behaviour
  • Cursor - Crosshair type and colors, brush and fill previews, selection line style, and the stroke-selection thickness (1–10) and directions
  • Experimental Features - The two flags below
  • Keyboard Shortcuts - Opens the shortcut editor
  • Reset everything - Puts every preference back to its default

Settings are saved and persist across sessions.

Auto-Save & Reliability

Novaboard automatically saves your work to browser storage (IndexedDB). This provides protection against accidental browser closure but has limitations:

  • Data is browser-specific (not synced across devices)
  • Clearing browser data removes saved work
  • Storage limits vary by browser

What Novaboard Does to Protect Your Work

  • Persistent storage request — After your first successful save, Novaboard asks the browser for persistent storage so your files are not evicted when disk space gets tight. Your browser may show a one-time permission prompt
  • Save failure toasts — If a save fails (quota exceeded, database locked, or corruption), you get a toast with retry and export actions instead of silently losing the write
  • Error boundary — If a panel or the canvas throws an unexpected error, you see an in-place error view with a recover action instead of a blank editor
  • Update prompt — When a new Novaboard version is available, you get a prompt before it takes over the tab, so in-memory changes are not disrupted silently
  • Cross-app paste — Images copied from other apps (Photoshop, Aseprite, etc.) paste straight into the canvas
Always export important work! Use File → Export… to save an Aseprite or Novaboard file to your computer for reliable backup. After the first export, Repeat Last Export ( Ctrl+Alt+E ) does it again with the same settings.