Note
Draw, write, add images, and record voice memos in a private note saved locally in your browser.
Description
Create a visual note with handwriting, drawings, text, images, shapes, paper guides, and voice memos while keeping the working document in your browser.
Tool.io Note is a local-first canvas for material that does not fit neatly into a plain text box. It combines freehand drawing with movable text, images, geometric objects, paper backgrounds, handwriting guides, and recorded voice memos. The current version keeps one working note in the browser and restores it when the tool is opened again.
The editor is useful for quick sketches, annotated diagrams, handwritten study notes, sheet-music ideas, and mixed-media scratch work. It is not yet a synchronized notebook, collaborative whiteboard, or permanent archival system.
When to use the Note tool
Use the Note tool when position, handwriting, visual grouping, or a mixture of media carries meaning. Unlike a linear text document, the canvas lets an object be placed, selected, moved, resized, and rotated independently. This makes the editor suitable for spatial thinking and rapid capture, where arranging an idea may be as important as writing it.
- Sketching an idea with a mouse, touch pointer, or pressure-sensitive stylus
- Combining typed labels, imported images, arrows, shapes, and freehand marks
- Practicing handwriting over repeated background characters
- Working on lined, dotted, graph, diagonal, blank, or sheet-music paper
- Attaching a short spoken explanation as a locally stored voice memo
- Exporting a visual snapshot for use outside Tool.io
Choosing a canvas layout
- Pages
- Uses an A5-like page ratio and can add more vertically stacked pages. This is the most predictable choice for a document-like note.
- Vertical canvas
- Grows downward as objects approach the active edge, which suits long notes and timelines.
- Horizontal canvas
- Grows sideways for wide diagrams, storyboards, and relationship maps.
How the Note tool works
Choose Pen for ordinary handwriting, Brush for a softer line, Spray for a scattered texture, or Eraser to remove pixels. Select mode lets you move, resize, rotate, or delete individual drawings, text boxes, images, emoji, and geometric shapes without clearing the rest of the note.
Paper lines and background text are rendered separately beneath the editable objects. Background text can act as a repeated watermark or as a character-writing guide. Light and dark canvas modes are independent of the website theme, so the note surface can be selected for the task rather than inherited from the surrounding interface.
Changes are saved automatically in this browser after a short pause; Save now lets you save immediately before closing the page. The note remains tied to this browser profile and is not uploaded to a Tool.io account or synchronized to another device in the current version.1
Drawing and stylus input
The drawing tools use the selected color and width. If you use a compatible pen, enable Pressure-sensitive stylus to vary line width by pressing more or less firmly. Pressure support depends on the pen, device, operating system, and browser; a mouse normally draws at one fixed width.
Right-clicking on the canvas opens a radial quick palette near the pointer. Selected objects can be removed with Delete or Backspace or with their on-canvas close control. Undo and redo operate on editor snapshots from the current session.
Voice memos
Select Voice to start or stop a recording. Your browser will ask for microphone permission the first time. A saved memo can be played beside the note, downloaded as an audio file, or removed without changing the drawing. Audio-file format and recording quality depend on the browser and microphone.
Exporting a note
Choose PNG for a widely supported image that is easy to view or share. Choose SVG when drawings and text should stay sharp at different display sizes. Both exports include the selected paper and background text, but neither is an editable Tool.io backup: importing the file will not restore the original objects, voice memos, or undo history.
Storage, privacy, and recovery
Local storage avoids sending the note to a Tool.io synchronization service, but local does not mean indestructible or end-to-end encrypted. Anyone with access to the same unlocked browser profile may be able to access its site data. Browser privacy tools, profile deletion, storage clearing, device loss, quota pressure, or an unavailable origin can make locally stored material inaccessible.2
- Export important visual notes instead of treating the browser copy as the only backup.
- Download voice memos separately when their audio must be retained.
- Starting a new note replaces the current saved note after confirmation.
- PNG and SVG files preserve appearance, not the complete editable note state.
- The current version does not synchronize notes between browsers or devices.
Do not rely on this MVP as the sole record for irreplaceable, regulated, safety-critical, or highly sensitive information. Editable backup bundles, recovery history, encrypted account synchronization, and collaborative editing remain future work.
References
-
IndexedDB API — MDN Web Docs
-
Storage quotas and eviction criteria — MDN Web Docs