Create beautiful, annotated code snippets for documentation, presentations, and teaching — entirely in the browser.
Example output:
- Syntax Highlighting — 19 languages supported via Prism.js
- Text Selection Annotations — Select any text in your code to create annotation cards
- Rich Text Editing — Bold, italic, underline, strikethrough, and lists
- Customizable Styling — Highlight color, text color, and font size per annotation
- Drag & Drop — Freely position annotation cards and arrows on the canvas
- Resizable Elements — Resize code block, annotation cards, and export area
- Dark / Light Theme — Toggle to match your preference
- PNG Export — Preview and download your annotated code as a PNG image
- Privacy First — Runs entirely in the browser; no data leaves your machine
- Node.js (v16+)
git clone https://github.com/fairy-pitta/code-annotator.git
cd code-annotator
npm install
npm run devOpen http://localhost:8788.
npm run deployDeploys to Cloudflare Workers.
- Paste your code and select the language.
- Select text in the code display to create an annotation.
- Write your explanation using the rich-text editor in the sidebar.
- Customize colors, font size, and drag cards/arrows into position.
- Export as PNG — preview first, then download.
| Layer | Technology |
|---|---|
| Frontend | Vanilla JavaScript |
| Syntax Highlighting | Prism.js |
| Image Export | html2canvas |
| Hosting | Cloudflare Workers |
Code Annotator is a frontend-only application. All processing happens in your browser — no code, annotations, or images are sent to any server.