Skip to content

nocodework/offline-whiteboard

Repository files navigation

offline-whiteboard

offline-whiteboard

A whiteboard that's just one HTML file. Open it, start drawing, done. No signup, no install, and nothing leaves your browser.

license: MIT dependencies: 0 single file ~60 KB network requests: 0 vanilla JS

Open the live demo and use it right now, or download index.html and open it on any machine, even one with no internet.

offline-whiteboard screenshot

The idea

Most whiteboards make you create an account and push everything to their servers. That's useless on a work laptop with no internet, or one locked down by IT, which is usually exactly where I want to sketch a quick diagram.

This one is the opposite. It's a single file. You open it and it works. Whatever you draw is saved in your browser as you go, and none of it is sent anywhere. If you want to check, open your browser's Network tab and reload: the only thing that loads is the page itself.

One thing worth knowing up front: because your boards live in the browser, they're tied to that browser on that machine. For anything you actually care about, hit Export every now and then to save a real .json file you own. You can import it back later, or open it on another computer.

What it does

  • Sticky notes, rectangles, ellipses, and plain text
  • Arrows that latch onto items and follow them when you move things around
  • An infinite canvas you can pan and zoom
  • Multi-select, resize, duplicate, an 8-color palette, and undo/redo
  • Saves to the browser automatically, plus JSON import/export and PNG export

Using it

The fastest way is to open the live demo and go. If you want it offline, download index.html and double-click it. It's a static file, so you can also keep it on a USB stick, drop it on any web host, or git clone and open it. No server, no build step.

Grab the file from a terminal (this also works inside Claude Code or Codex):

curl -O https://raw.githubusercontent.com/nocodework/offline-whiteboard/main/index.html
open index.html      # macOS  ·  Linux: xdg-open index.html  ·  Windows: start index.html

Use it with Claude Code

This repo ships a small Claude Code skill, doflow, that turns a described process, funnel or flow into a board and opens it here ready to edit — handy for sketching logic the way you might on a workshop whiteboard.

git clone https://github.com/nocodework/offline-whiteboard
cp -r offline-whiteboard/claude-skill/doflow ~/.claude/skills/

Then in Claude Code, say "draw a sales funnel" or "map this onboarding process on a whiteboard". It builds a board and opens the whiteboard with it preloaded (#board64=). Works offline against a local index.html. See claude-skill/doflow.

Keyboard shortcuts

Key Action Key Action
V Select & move A Arrow (drag item to item)
H / Space Pan view double-click Edit text, or make a new note
N Sticky note Delete selection
R O T Rectangle / ellipse / text ⌘Z / ⌘⇧Z Undo / redo
wheel Pan +wheel Zoom

What's private about it

There's no backend, so there's nowhere for your data to go. No account, no cookies, no analytics, and no fonts pulled from a CDN. Your boards sit in your browser's local storage on your own device. Export saves a copy; Clear wipes everything. The whole thing is one readable file, so if you'd rather not take my word for it, open index.html and read it.

How it works

Plain JavaScript, no libraries. The board draws to a single <canvas>, and a <textarea> pops up over it when you edit text (the same trick Excalidraw uses). PNG export reuses the same drawing code, so the file you get looks exactly like what's on screen. State is a small JSON object of elements and connections, saved to local storage.

{
  "app": "offline-whiteboard",
  "version": 1,
  "elements": [
    { "id": "n1", "type": "note", "x": 40, "y": 60, "w": 195, "h": 120, "text": "Idea", "color": "#FEF08A" }
  ],
  "connections": [
    { "id": "c1", "from": "n1", "to": "r1" }
  ]
}

How it compares

offline-whiteboard Miro / FigJam Excalidraw
Works with no internet yes no needs PWA install
No account yes no yes
Single file, no build yes no no
Self-host in seconds yes no takes setup
Open source yes no yes
Real-time collaboration no yes yes

It's deliberately small: a whiteboard you fully own and can carry around in one file. If you need live multiplayer, Excalidraw or Miro will serve you better.

Part of the offline series

offline-whiteboard is one of a small family of single-file, offline-first tools by NoCodeWork — one HTML file, no account, no server, works offline. The others:

offline-notes — a Markdown editor that renders as you type · demo

offline-notes

offline-sketch — a pressure-sensitive sketchpad · demo

offline-sketch

More open source from NoCodeWork

  • ai-context-kit — give any AI tool durable context about you and your company
  • growth-os — an open Growth OS for any AI agent: audit a site's SEO, speed, GEO and competitors, then act

Contributing

Issues and pull requests are welcome, see CONTRIBUTING.md. It's one file with no toolchain, so there's nothing to set up first.

License

MIT, by NoCodeWork. Do whatever you want with it.


NoCodeWork

Built by NoCodeWork, where we build automation, AI and apps for companies.

Releases

Packages

Contributors

Languages