FreeDraw

Draw freely on an infinite canvas — right inside VS Code. FreeDraw turns your editor into a sketchpad for whiteboarding ideas, annotating code, and explaining concepts live while you screen-share.

No file, no setup. Run Free Draw: Start Drawing and an instant canvas opens, ready to go.

This is an open-source project created by the community, for the community. Contributions welcome — see Contributing below.

What's new in 1.0

A full rewrite on a clean, purpose-built canvas engine with a native VS Code look:

• New rendering engine — layered, DPR-scaled canvas with Path2D caching and a spatial index. Fast and smooth even on large drawings.
• Clean geometric shapes — dropped the old sketchy Rough.js look for crisp shapes.
• Full transforms on everything — rotate, resize, multi-select, marquee, alt-drag duplicate, arrow-key nudge, group/ungroup, z-order, and lock.
• CodeBlock — send an editor selection to the canvas as a syntax-highlighted, movable snippet (right-click → Send Selection to Canvas).
• Screen-share markers — laser pointer and fading ink that annotate then disappear.
• Native chrome — floating toolbar, contextual style panel, minimap, zoom controls, context menu, and cheat sheet, all themed with your VS Code colors and codicons.
• .freedraw files — save durable drawings that reopen in a custom editor, with hot-exit backup.

Features

• Infinite canvas — pan and zoom (10%–1000%), zoom-to-cursor, zoom-to-fit, with grid or dot backgrounds.
• A full toolkit — pencil (stylus pressure), line, arrow, rectangle, ellipse, text (inline editing), images (paste/drop/picker), and an object eraser.
• Built for screen-sharing — laser pointer and fading ink keep your canvas clean while you present.
• Send code to the canvas — syntax-highlighted CodeBlocks, re-highlighted offline with Shiki.
• Export anywhere — copy or save the whole drawing or just a selection as PNG or SVG.
• Never lose work — the Scratch canvas autosaves; .freedraw files persist a durable copy.
• Feels native — theme-adaptive colors, configurable defaults (stroke, font, grid), and keyboard shortcuts throughout. Press ? for the cheat sheet.

Getting started

1. Install from the VS Code Marketplace or Open VSX.
2. Start drawing — Ctrl/Cmd+Shift+P → Free Draw: Start Drawing opens an instant Scratch canvas, no file needed.
3. Draw — pick a tool from the floating toolbar and use your mouse or stylus. Select, move, resize, and rotate anything.
4. Annotate live — use the laser pointer and fading ink, or send a code selection to the canvas.
5. Keep it — the Scratch canvas autosaves; save a durable .freedraw file (Free Draw: New Drawing File).
6. Export — copy or save the drawing (or selection) as PNG or SVG.

Press ? on the canvas for the keyboard cheat sheet.

Screenshots

Contributing

We welcome contributions from the community! To contribute:

1. Fork the repository.
2. Create a new branch for your feature or bugfix.
3. Make your changes and commit them with clear messages.
4. Push your changes to your fork.
5. Open a pull request with a description of your changes.

License

This project is licensed under the GPL-3.0-only License. See the LICENSE file for details.

Development

The repo is a single yarn workspace (root extension host + web/ webview). Install once from the root:

yarn install

To run the extension in VS Code:

1. yarn package (builds the webview + host), then press F5 to launch the Extension Development Host.
2. Run Free Draw: Start Drawing from the command palette and draw.

Fast web loop

The webview (engine + React chrome) runs in a plain browser with a mock host bridge and HMR — the fastest way to iterate on engine/UI:

yarn dev:web

Append ?seed=2000 to the dev URL to populate the canvas for eyeballing render performance.

Quality gates

yarn check-types   # host typecheck
yarn lint          # host lint
yarn lint:web      # webview lint
yarn test:web      # engine unit tests (vitest)
yarn package       # production build (webview + host)

See PLAN.md, CONTEXT.md, and docs/adr/ for the architecture and the reasoning behind it.

Release

To release a new version of the extension to both the VS Code Marketplace and Open VSX Registry, run:

yarn publish:all

This command requires a .env file in the root directory with the following token:

ACCESS_TOKEN_OPEN_VSX=<your-openvsx-token>

For VS Code Marketplace, the publish script uses credentials stored via vsce login.

Troubleshooting Publishing

TF400813: User not authorized error

If you see an error like:

TF400813: The user 'aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa' is not authorized to access this resource.

This means your VS Code Marketplace Personal Access Token (PAT) is invalid or expired. To fix it:

1. Generate a new PAT at https://dev.azure.com/:

   • Click your profile icon → Personal access tokens → + New Token
   • Set Organization to "All accessible organizations"
   • Under Scopes, select Custom defined and check Marketplace → Manage
   • Click Create and copy the token

2. Run vsce login ProjectSyntax and paste your new token when prompted

3. Run yarn publish:all again