Marker + Picasso. Zero dependencies. Zero excuses.

Markasso is a fast, minimal, keyboard-first whiteboard engine that runs entirely in the browser.

Built with vanilla TypeScript and the Canvas 2D API—no framework dependencies. Just you, a canvas, and JavaScript doing exactly what it was invented to do.

While Excalidraw excels at freehand sketching and Draw.io offers comprehensive diagramming, Markasso occupies a different niche: smaller, faster, and requiring no sign-in, cookies, or workspace creation.

Markasso was born from a simple frustration: wanting to sketch a quick diagram shouldn't require:

1. Waiting for a heavy application to load
2. Dismissing cookie consent banners
3. Creating an account for "free" features
4. Risking lost work due to forgotten exports

Markasso is the alternative. Open, draw, export, done.

npm install

npm run dev # Start dev server at http://localhost:5173

npm run build # Type-check and bundle → dist/ npm run typecheck # TypeScript validation npm test # Run Vitest unit tests

No .env files. No API keys. No containerization required.

Markasso follows a Redux-style unidirectional data flow—no mutable state, no event spaghetti, no surprises.

User event │ ▼ Tool (onMouseDown / onMouseMove / onMouseUp) │ dispatches Command ▼ History.dispatch(command) │ calls ▼ reducer(Scene, Command) → Scene ← pure function, no side effects │ notifies ▼ Subscribers (toolbar, properties panel, canvas view) │ ▼ render(ctx, scene, canvas) ← called every requestAnimationFrame 

• All coordinates in CSS pixels. The canvas buffer is clientWidth × devicePixelRatio for sharpness (#141414 background), but all viewport offsetX/Y, element positions, and mouse events live in CSS pixel space. The renderer applies DPR via ctx.setTransform(zoom*dpr, ...).
• Immutable scene. Every Scene object is never mutated. The reducer returns a new reference or the same reference if nothing changed (enabling cheap equality checks).
• Ephemeral commands (pan, zoom, set-viewport, select, tool change) are excluded from the undo stack.
• APPLY_STYLE is the single undoable command that updates both appState defaults and all currently selected elements in one atomic operation.

src/ ├── core/ │ ├── scene.ts # Scene interface + factory │ ├── viewport.ts # Pan/zoom math (screenToWorld, worldToScreen) │ └── app_state.ts # AppState (activeTool, colors, grid, …) ├── elements/ │ └── element.ts # Discriminated union for all element types ├── commands/ │ └── commands.ts # Full Command discriminated union ├── engine/ │ ├── reducer.ts # Pure (Scene, Command) → Scene │ └── history.ts # Undo/redo stack + pub/sub ├── io/ │ ├── markasso.ts # .markasso save / load (exportMarkasso, importMarkasso) │ └── session.ts # localStorage auto-save / restore + quota warning toast ├── rendering/ │ ├── renderer.ts # rAF render loop entry point │ ├── draw_element.ts # Per-type draw dispatch (with rotation + shape labels) │ ├── draw_grid.ts # Dot / line / mm graph-paper grids │ ├── draw_selection.ts # Selection box, resize/rotation/endpoint handles + hit testing │ └── export.ts # exportPNG / exportSVG (bounding-box auto-fit) ├── tools/ │ ├── tool.ts # Tool interface │ ├── select_tool.ts # Hit test, marquee, drag-move, resize │ ├── rectangle_tool.ts │ ├── ellipse_tool.ts │ ├── line_tool.ts │ ├── arrow_tool.ts │ ├── pen_tool.ts # Freehand with Catmull-Rom smoothing │ └── text_tool.ts # Invisible overlay textarea + in-place editing └── ui/ ├── canvas_view.ts # DOM event hub → world coords → tool ├── toolbar.ts # Floating islands: tools · undo/zoom · import · export · settings ├── properties_panel.ts # Floating panel, anchored next to the context panel ├── context_panel.ts # Left-side action panel (layer order, style, import image) ├── image_import.ts # File picker, drag-and-drop, paste — images + .markasso ├── settings.ts # Hamburger panel: grid, accent color, version ├── eraser_tool.ts # Eraser: hit-test + delete on drag, sword-slash trail effect └── shortcuts.ts # Global keyboard map (letters + numeric 1–7, 0 for eraser) 

• Theme — Added theme light, dark and system on settings menu

• Brand logo — Markasso logo icon added to the welcome screen, thanks to https://github.com/lc-d.

• Multi-language i18n — UI fully localised in 8 languages: Italiano, English, Español, Français, Deutsch, Português, 中文, 日本語; language persists in localStorage and is selectable from the hamburger menu

• Tool panel auto-open — selecting a drawing tool on desktop automatically opens the properties panel showing relevant options for that tool; hand, select and eraser leave it closed
• Context-aware panel sections — each tool shows only its relevant controls: rectangle shows fill + borders; line/arrow hide fill; freehand hides style + roughness; text shows its own section
• Layer order in tool panel — layer reorder buttons (front/back/forward/backward) are now visible in the tool panel, not only when using the Select tool
• Text tool: code mode — toggle between Text and Code mode in the panel; code mode creates auto-sized monospace blocks with dark background, Tab indentation, Shift+Enter to commit
• Text tool: alignment — left / center / right alignment buttons in the text panel; alignment is stored per-element and applied in the renderer
• Text tool: auto-size on click — single click no longer creates a fixed 240 px box; the textarea expands with the text and the element dimensions match the content width exactly
• Cursor polish — text tool cursor is always crosshair; switches to text cursor while a textarea is open for editing
• Welcome screen fix — dismissed overlay was blocking all mouse events due to transitionend never firing on a CSS animation; fixed by switching to animationend

• Picasso theme — UI palette inspired by Picasso's Le Rêve (1932): crimson #c42020 accent, warm near-black island backgrounds, warm off-white text; replaces the previous blue-violet theme
• Favicon — custom logo added as browser tab icon
• Welcome screen — first-visit overlay with the Markasso wordmark in a pixel/retro font, a browser-storage reminder, and key shortcuts; auto-dismisses as soon as the user draws the first element

• Mobile action bar — compact Excalidraw-style bottom-right island always visible on touch devices: undo and redo are always shown; duplicate and delete appear when an element is selected
• Mobile style sheet — tapping the sliders button opens a bottom sheet with stroke color, fill color, stroke width, stroke style, roughness, borders, and opacity; sections auto-hide based on element type; closes on outside tap
• Mobile layout cleanup — desktop context panel suppressed on touch; floating undo/redo/zoom island replaced by the action bar; context panel repositioned and viewport-sized for touch

• Auto-select after drawing — when tool lock is off, placing a shape reverts to Select and keeps the new element selected so the properties panel opens automatically
• Rounded corners — rectangle elements now support a corner radius toggle (Sharp / Arrotondato) in the properties panel, fully undoable via APPLY_STYLE

• Eraser tool — new tool (0) erases elements on click or drag; locked elements are skipped
• Sword-slash trail — a glowing white trail fades out over 350 ms as you erase, for satisfying visual feedback
• Tool lock button — lock icon in the toolbar keeps the active drawing tool after placing a shape instead of reverting to Select; unlocked is the new default
• Toolbar layout — restructured to match Excalidraw style: lock · hand · select–text · eraser
• Properties panel auto-opens — after drawing a shape the panel opens immediately showing the new element's style controls

• Font size & family in context panel — when a text element is selected, the panel now shows a font size input (click to auto-select the value) and font family preset buttons (Arial, Georgia, Monospace, Comic Sans)
• Single-click text placement — clicking the canvas with the text tool now opens a textarea immediately, without requiring a drag; drag still works to define a custom area
• Text word-wrap fix — text now wraps on the canvas exactly as it did inside the textarea, using real glyph metrics (measureText); the SVG export also respects the element width

• Global menu — hamburger button replaces the gear icon; file actions (Open, Save, Export PNG/SVG, Clear canvas) are now in the menu alongside Preferences and theme
• Custom canvas background — choose from dark background presets directly in the menu; the background colour is persisted across sessions
• Grid off by default — new canvases start with a clean, grid-free background

• Improved tools panel UX — consolidated context and properties panels for a cleaner, less cluttered interface

• Hand tool — pan the canvas by holding H or Space, or selecting the hand from the toolbar
• Improved text tool — click to place, type, confirm with Enter/Escape; tool auto-returns to Select after confirming

• Text tool auto-resets — after confirming a text element the tool returns to Select automatically

• Lock icon fixed — the padlock icon now shows the current state (closed = locked, open = unlocked)
• Select locked elements — locked elements can now be click-selected; they still cannot be moved, resized, or deleted

• Arrow tool auto-resets — after drawing a linked arrow the tool returns to Select automatically
• Cascade delete — deleting a shape now removes all arrows and lines connected to it

• Smoother pen curves — real-time exponential smoothing filters trackpad jitter
• Improved curve rendering — cubic Bézier curves with Catmull-Rom splines
• High-quality anti-aliasing — canvas smoothing enabled for crisp curves at any zoom level
• Finer point capture — reduced from 3px to 2px threshold for more detailed strokes
• Cleaner default stroke — 1px width with round line caps and joins

• Border-point snap fix — corrected edge case where arrow/line endpoints did not snap to exact border attachment points

• Border attachment — smart links attach to element borders (facing the other shape), not the center
• Perimeter snap — arrow/line tools activate magnetic snap near element edges
• Hover preview — connection point preview when hovering over shapes
• Group entry fix — clicking an element inside a group correctly selects that individual element
• Pen tool flow — pen tool stays active after drawing a stroke

• Smart arrow links — drag arrow endpoints near shapes to connect them
• Lock elements — lock/unlock via the context toolbar
• Groups — Ctrl+G to group elements with nested editing support
• Hover highlight — soft glow around elements on hover
• Shift+click multi-select — add or remove elements without a marquee
• Arrow key nudge — move selection 1px (10px with Shift)
• Duplicate — Ctrl+D clones selection with 20px offset
• Pen tool smoothing — strokes filtered and simplified on release

• .markasso format — save and reload full scenes as portable JSON files
• Open .markasso — toolbar button and drag & drop support for loading saved scenes
• Session persistence — auto-save to localStorage with quota warnings
• Properties panel — now opens adjacent to the context panel
• Default font — changed to Arial, sans-serif

See CONTRIBUTORS.md for guidelines.

MIT — © 2026 Alberto Barrago

Draw things. Ship things. Touch grass.