NotaBoard

A whiteboard for notes, sketches and quick diagrams

Overview

NotaBoard is an infinite whiteboard for notes, sketches, and quick diagrams — in the style of Notability. You draw with a pen, drop shapes, text, and sticky notes, paste in images, and organize everything into named boards. It is part of the kimtos new-tab app suite.

Everything is fully on-device. There is no backend, no account, and no network: every board, stroke, and image lives in your browser's IndexedDB and never leaves the machine.

Highlights

• Drawing tools — pen, highlighter, and an object eraser.
• Shapes — line, arrow, rectangle, and ellipse, with optional fill and Shift to constrain (straight lines, perfect squares/circles).
• Text & sticky notes — click to place, type inline; notes come in five pastel colors.
• Images — insert from a file or paste straight from the clipboard.
• Selection — move, resize (corner handles), marquee-select many at once, duplicate, and re-order (bring to front / send to back).
• Boards — a sidebar of boards, each with a live thumbnail; rename, and batch-delete with one-tap undo.
• Canvas navigation — pan (hold Space or use the hand), zoom (⌘/Ctrl+scroll), fit-to-content, and a navigator minimap for jumping around large boards.
• Paper & theme — grid, dots, ruled, or plain paper, in a light or dark theme.
• Full screen — a distraction-free mode that fills the whole display.
• Export — save any board as a PNG.

Privacy model

NotaBoard writes only to local browser storage:

• Boards (title, scene, paper, theme, thumbnail) are records in IndexedDB.
• Inserted images are stored as binary blobs, keyed per board.
• Nothing is uploaded, and there are no analytics or third-party calls.

Because each board carries its own scene as plain serializable data, your work is portable — it travels with the browser profile and is included in the suite's local Export / Import backup.

Getting Started

Open NotaBoard from the dock. On first run it shows a welcome panel — click Create your first board to begin. After that, the most recent board opens automatically.

Boards

The left sidebar lists your boards, each with a thumbnail and last-edited time.

• New board — the ＋ button in the sidebar header.
• Open — click a board card.
• Rename — double-click a card and type a new name (you can also edit the title above the canvas).
• Delete several — click Select, tick the boards, then Delete (N). A toast lets you undo for a few seconds.

Every change autosaves a moment after you stop, and the board's thumbnail refreshes automatically.

The tool bar

NotaBoard uses a single slim tool bar. The left side holds the tools; the right side holds undo/redo, arrange/delete, zoom, page setup, full screen, and export.

Color and thickness are not shown inline. Instead, tap an active drawing tool a second time to open its style popover — exactly like Notability:

1. Click the pen to select it.
2. Click the pen again to open its popover.
3. Pick a color and a thickness.

Each drawing tool shows its current color as a small underline, so you can tell your pen, highlighter, and shapes apart at a glance.

Drawing and editing

• Pen / highlighter — drag to draw. The highlighter is translucent and thick.
• Shapes — drag to size. Hold Shift to constrain (straight line, square, circle). Rectangles and ellipses can be filled from their popover.
• Eraser — drag across elements to remove them.
• Text — pick the text tool, click the canvas, and type. Press ⌘/Ctrl+Enter or click away to commit; double-click later to edit.
• Sticky note — pick the note tool (choose a color from its popover), click to drop a note, and type.
• Image — click the image button to pick a file, or just paste an image onto the canvas.

Selecting and arranging

Switch to the Select tool (or press V):

• Click an element to select it; drag to move it.
• Drag a corner handle to resize a single selection.
• Drag on empty canvas to marquee-select several elements.
• Arrange with bring-to-front / send-to-back; delete with the trash button or the Delete key.

Navigating the canvas

• Pan — hold Space and drag, use the hand tool, or middle-drag.
• Zoom — ⌘/Ctrl+scroll, or the zoom controls. Click the % to reset to 100%; Fit frames all your content.
• Navigator — the minimap in the bottom-right shows the whole board with a viewport box; click or drag it to jump around. Toggle it in Page setup.

Page setup, full screen, and export

• Page setup (the sliders button) sets the paper style, the light/dark theme, and toggles the navigator.
• Full screen fills the entire display for focused work; press Esc or the button again to exit.
• Export saves the current board as a PNG.

Architecture

NotaBoard follows the suite convention: all data logic lives behind the local API layer, and the app itself is UI plus a self-contained canvas engine. The code lives in extension/src/apps/notaboard/.

Modules

File	Role
index.ts	The app descriptor and UI — boards sidebar, the slim tool bar, the style/page popovers, image insert, autosave, and full-screen control.
engine.ts	The canvas engine — a retained-mode scene, rendering, pointer gestures, undo/redo, the in-place text editor, the minimap, and PNG/thumbnail export.
geometry.ts	Pure, DOM-free scene primitives — element bounds and rigid transforms (translate/scale), plus hit-test maths.
notaboard.local.ts	The data layer — board CRUD over IndexedDB, registered on the local API router.

Data flow

The UI never touches storage directly: it calls getApi / jsonApi (the suite's local router), which dispatches to notaboard.local.ts. Inserted image blobs are written through the shared data store. The canvas engine is pure UI state — it tells the UI when something changed via an onChange callback, and the UI debounces a save.

The scene model

A board's drawing is a flat, serializable array of elements. Array order is z-order (later elements paint on top). There are two geometry families:

• Point-based — stroke (pen/highlighter), line, arrow. They carry a points: [{x, y}] list.
• Box-based — rect, ellipse, text, note, image. They carry x, y, w, h.

The classDiagram above is a quick reference. Because every element is plain data with no DOM or image references, a board can be cloned, diffed, undone, and saved as one JSON blob.

Rendering

The engine draws the whole scene to a single <canvas> once per animation frame, under a pan/zoom transform, in world coordinates:

screen = world * scale + offset

Drawing is dirty-flagged: mutations call requestRender(), which coalesces work into one requestAnimationFrame. Inserted images are cached as HTMLImageElement objects keyed by blob key and resolved lazily.

geometry.ts keeps the engine honest: bounds, translate, and scale are pure functions over the element data, identical whether they run for hit-testing, selection handles, the minimap, or export.

History, editor, and export

• Undo / redo snapshots the element array before each committed gesture (capped depth), so any change is reversible.
• The text/note editor is a real <textarea> overlaid on the canvas at the element's screen position; on commit it writes back into the scene.
• Export & thumbnails reuse the same draw routines against an off-screen canvas, so a PNG (or the sidebar thumbnail) is pixel-faithful to the board.

Persistence

Each board is one IndexedDB record:

{ id, title, elements[], paper, theme, thumb (dataURL), created, updated }

Saves are debounced (~700 ms) and also write a fresh thumbnail. Deleting a board removes its record and purges its image blobs. Reopening the app restores the most recently edited board and renders it straight from storage.

Reference

A quick reference for tools, keyboard shortcuts, and settings.

Tools

Tool	Shortcut	What it does
Select	V	Select, move, resize, and marquee-select elements.
Pen	P	Freehand drawing.
Highlighter	H	Translucent, thick freehand.
Eraser	E	Drag across elements to remove them.
Line	L	Straight line.
Arrow	A	Line with an arrowhead.
Rectangle	R	Rectangle, optionally filled.
Ellipse	O	Ellipse, optionally filled.
Text	T	Click to place a text box and type.
Sticky note	N	Drop a colored sticky note and type.
Image	—	Insert from a file, or paste from the clipboard.

Tap an active pen, highlighter, shape, text, or note tool a second time to open its color/thickness popover.

Keyboard shortcuts

Keys	Action
V P H E L A R O T N	Pick a tool
⌘/Ctrl + Z	Undo
⌘/Ctrl + Shift + Z	Redo
⌘/Ctrl + A	Select all
⌘/Ctrl + D	Duplicate selection
Delete / Backspace	Delete selection
Shift (while drawing a shape)	Constrain — straight line, square, circle
Space + drag	Pan the canvas
⌘/Ctrl + scroll	Zoom in / out
Esc	Close a popover, finish editing, or exit full screen

Page setup

Opened from the sliders button on the tool bar.

Setting	Options
Paper	Grid, Dots, Lines, Plain
Theme	Light, Dark
Navigator	Shown, Hidden

Paper and theme are saved per board.

Tool-bar actions

Control	Action
Undo / Redo	Step backward / forward through history
Bring to front / Send to back	Re-order the selection
Delete	Remove the selection
Zoom out / % / Zoom in	Zoom; click the % to reset to 100%
Fit	Frame all content in view
Page setup	Paper, theme, navigator
Full screen	Fill the display; Esc or click again to exit
Export	Save the board as a PNG

Data & storage

Item	Where it lives
Boards (scene, paper, theme, thumbnail)	IndexedDB records
Inserted images	IndexedDB blobs, keyed per board
Backup	Included in the suite's local Export / Import

Deleting a board also deletes its images. Nothing is ever uploaded.