· via Hacker News – Front Page (native)
braiNOTES brings handwritten lecture notes on PDFs to a browser tab, no account or install needed
braiNOTES is an open-source, MIT-licensed web app for handwritten notes on lecture PDFs. It runs entirely client-side, with no account, no server and no data leaving the browser.
An open-source project called braiNOTES, which surfaced on Hacker News, brings handwritten note-taking to lecture slides inside an ordinary browser tab. According to the project's GitHub repository, there is nothing to install and no account to create: notebooks, pages and uploaded PDFs stay on the user's own machine, with no server in the loop.
What the app does
The project describes itself as a browser-based counterpart to pen-first note apps such as OneNote or GoodNotes, built with lectures in mind. Lecture slides can sit in a panel beside your notes, or the PDF can become the paper you write on directly. Sections of a slide can also be snipped into a notebook.
The toolset covers the staples of digital handwriting: ballpoint, fountain pen, marker, pencil and highlighter tools, all pressure-sensitive; blank, lined, grid and dotted paper; and whiteboards that scroll without edges. Pages can additionally hold images, shapes and text, while a lasso moves existing ink, an eraser removes it, and a laser pointer helps during presentations. Single-key shortcuts switch between tools, and a command palette under Ctrl+K handles the rest.
Finished work exports to PDF with the original slide pages embedded and the handwriting layered on top as vector graphics; individual pages can also be saved as PNG images. Whole notebooks can be packaged as .brainotes files for backup or sharing — the repository explains that these are ordinary zip archives holding the notebook data, one JSON file per page, plus any attached PDFs and pictures.
Because state lives in the browser's IndexedDB storage and is saved automatically shortly after every change, the app keeps working offline once it has been opened, according to the repository.
How the ink pipeline works
The README also documents the rendering approach, which is where most of the engineering sits. Strokes come from the perfect-freehand library, which turns pen coordinates and pressure readings into filled outlines, and they are drawn the moment the pen moves. A one-euro filter — a smoothing technique often applied to noisy pointer input — smooths jittery handwriting in real time, with a lighter refit pass running when the pen lifts.
To stay responsive, ink is painted into cached canvas tiles, and only tiles that actually changed are redrawn. PDFs are rendered by pdf.js inside a web worker, and only the pages currently visible, at the current zoom level, are rasterised at all.
Svelte under the hood
The stack is Svelte 5 with SvelteKit's static adapter, written in TypeScript. pdf.js handles PDF reading, a pdfme fork of pdf-lib handles PDF writing, idb wraps IndexedDB, and fflate and browser-fs-access deal with files. The project is MIT-licensed, includes tests and type checks runnable via pnpm, and builds to a plain static site — so a university or any individual can self-host a copy. A hosted instance already runs at notes.swimmingbrain.dev.
Why it matters
Handwriting on lecture PDFs has largely been the territory of paid, installed apps that demand accounts and sync to somebody else's cloud. braiNOTES demonstrates that the entire workflow — pressure-sensitive ink, PDF rendering, autosave, offline use and vector export — can run client-side on standard browser APIs. That removes the installation barrier for students on locked-down hardware, and it answers the privacy question before it is asked: if there is no server, notes cannot leak from one.
The open .brainotes format and the MIT licence also mean work is not trapped inside a service that could disappear or change its terms. For developers, the project is a compact, readable example of the canvas-tile-plus-worker pattern for latency-sensitive drawing apps; for students, it is a free lecture tool that opens about as fast as the slide deck itself.
- #open-source
- #note-taking
- #web-app
- #svelte