Scribble: Excalidraw on Any Web Page

I love hand-drawn whiteboard tools like Excalidraw and Drawy. There is something about a rough sketch, an arrow and a scribbled note that explains an idea faster than any polished slide. The problem was where I needed them most: in the browser, in the middle of a meeting, while sharing a web page. I wanted to circle a button, draw an arrow to a broken layout, or jot a note right on the page everyone was looking at. I could not find an extension that did it the way I wanted, so I built one.

Scribble is a Chrome extension that lays an Excalidraw canvas over any website. You can sketch, draw shapes and arrows, add text and sticky notes, or paste a Mermaid diagram, right on top of the page. The drawings stay pinned to the page and are still there when you come back.

What I wanted

I knew exactly what I was missing, because I kept wishing for it in the middle of calls. I wanted the drawing tool I already loved, right on the page in front of me, without it getting in the way of the page itself, and without handing an extension access to everything I browse.

That turned into a short list of goals:

The real Excalidraw editor, not an imitation of it.
Drawings that belong to the page, scrolling with it and coming back later.
A clean switch between drawing and using the page, so it never gets in the way.
Nothing running in the background, and no access to sites I never use it on.

Built on Excalidraw

Scribble is built on Excalidraw's open-source editor, so you get the full toolset you would expect: shapes, arrows, freehand drawing, text, sticky notes, images, frames, lasso selection, bucket fill, the laser pointer, and Mermaid diagrams converted into editable drawings. If you already know Excalidraw, you already know Scribble.

Excalidraw's fonts and assets are bundled into the extension rather than loaded from a CDN, which matters for the privacy goals below. Scribble is an independent project, inspired by and built on Excalidraw, and not affiliated with it.

Drawing on a page that moves

The hardest part of drawing on a website is that a website is not a whiteboard. It scrolls, it changes theme, and you need to keep using it.

Drawings are anchored to the page. An arrow pointing at a paragraph keeps pointing at it as you scroll, instead of floating over whatever happens to be on screen.
Two modes keep it out of your way. In draw mode, Scribble captures the mouse so you can sketch. In view mode, your drawings stay visible while the page works normally underneath, so you can click links and fill in forms. Switch with the toolbar icon or Alt+Shift+D, and press Esc to go back to view mode.
It follows the page's theme, switching between light and dark to match the site you are on.
It leaves no trace when you are done. Switching to view mode on a page with no drawings removes Scribble from the page completely.

Drawings that come back

Scribble saves your drawings for each page and restores them when you open it on that page again. Pages are matched by their address without the # part, so jumping to a different section of the same page still shows your notes. Clearing a page is one button, and it can be undone, because clearing an annotated page by accident should never be permanent.

Private by design

This was the part I cared about most, because browser extensions can see a great deal, and a drawing tool has no reason to.

Nothing runs until you click the icon. Scribble does not inject anything into pages as they load. It has no background timers and makes no network requests.
It asks for as little as possible. Its permissions are limited to the active tab when you use it, injecting the editor, and local storage. It has no access to all your sites.
Your drawings stay on your device, in the browser's local extension storage. There is no account, no sync, no analytics and no backend.

The activeTab permission is what makes this possible. Instead of asking for standing access to every website, Scribble only gets access to a tab at the moment you click its icon there. It is a little more work to build around, and it is the right trade for something people use on their own pages and documents.

How it is built

Scribble is a Manifest V3 Chrome extension written in TypeScript and React, built with Vite and the CRXJS plugin, which brings hot reloading to extension development. The editor is the official Excalidraw package. Every release includes the full license texts of everything it bundles, including Excalidraw and its fonts, which felt like the right way to build on other people's open-source work.

There are a few places Scribble cannot reach, because Chrome does not allow any extension there: chrome:// pages, the Chrome Web Store and Chrome's built-in PDF viewer.

What I learned

Frustration makes the best product brief. I knew exactly what Scribble had to do, because I had wanted it so many times before it existed.
Build on the best tool instead of rebuilding it. Excalidraw's editor is excellent. My job was to bring it to the browser well, not to compete with it.
Least privilege is a feature people can feel. "Nothing runs until you click it" is a promise users understand, and keeping it shaped the whole design.
The page is the hard part. Drawing is solved. Keeping drawings attached to a page that scrolls, changes theme and needs to stay usable is where the real work was.

Try it

Download the latest scribble-vX.Y.Z.zip from the GitHub releases page and unzip it.
Open chrome://extensions. It also works in Edge and Brave.
Turn on Developer mode, click Load unpacked, and select the unzipped folder.
Pin Scribble, open any website and click its icon.

To build it yourself with Node 22 and pnpm:

pnpm install
pnpm build

Then load the dist/ folder the same way. The source code is on GitHub at github.com/Lusan-sapkota/Scribble, under the MIT license.