Vellum

Inspect elements, write annotations, and preview CSS changes on a web page. Vellum is a desktop browser extension built for Chromium, including Chrome and Microsoft Edge.

Install

Requires Node.js 22 or newer to build, and a desktop Chromium browser based on Chromium 131 or newer. Use a current browser release. Vellum needs Manifest V3 extension support, HTML popovers, and CSS anchor positioning.

npm ci
npm run build

Open your browser's extension manager:

Browser	Extension manager
Chrome / Chromium	chrome://extensions
Microsoft Edge	edge://extensions

Enable Developer mode, select Load unpacked, and choose this repository's dist/ folder. Pin Vellum in the extension menu.

Open an ordinary web page and click the Vellum browser icon to start it. Click the icon again to stop it. After reloading the page, start Vellum again.

npm run package produces artifacts/vellum.zip for manual distribution. Unzip it and load the extracted folder with Load unpacked. Vellum is not published to the Chrome Web Store or Microsoft Edge Add-ons.

Automated browser checks load the real extension in Chromium and Microsoft Edge. This package does not support Firefox or Safari.

Browser	Compatibility status
Playwright Chromium	Real extension flows tested
Microsoft Edge	Real extension flows tested
Google Chrome	Chromium target; branded Chrome not separately tested
Brave, Opera, Vivaldi	Chromium-based; not separately tested
Firefox	Not supported by this package; needs a Firefox background manifest and API verification
Safari	Not supported by this package; needs a Safari Web Extension app and native packaging

Passing checks cover the tested builds and fixtures, not every browser version or website. Chromium 131 is the declared minimum, not a separately road-tested build. Mobile browsers are not supported.

Features

• Element selection and annotation markers.
• Create, edit, delete, tag, and filter annotations.
• Copy feedback with element and available React component context.
• DOM layer tree on ordinary pages; React tree when React metadata is available.
• Applied CSS editing, authored CSS rules, copyable diffs, and reset.
• Draggable toolbar, keyboard shortcuts, dark/light themes, and component gallery.
• One-click start and stop from the browser icon, with no popup.
• Startup errors appear in the icon tooltip with a ! badge.
• Visible save/copy failures. Failed copies never clear annotations.

Stop restores CSS overrides and Vellum anchor names. The sidebar overlays the page rather than changing the host layout.

Shortcut	Action
S	Select an element
H	Show or hide markers
L	Show or hide the sidebar
1 / 2	Annotations / Editor
/	Settings
C	Copy feedback
X, then X	Clear feedback
Escape	Cancel selection
Ctrl / Cmd + Enter	Save an annotation

Single-key shortcuts are ignored in inputs, textareas, select controls, and editable regions, including fields inside open shadow roots. Keys already handled by the host, composition events, and repeated keydown events are ignored.

Storage and permissions

No backend, telemetry, or account is required. Notes are stored in this extension's chrome.storage.local, not in the website's local storage. Annotations are scoped to origin, pathname, query, and hash. Settings and tags are scoped to the origin. There is no automatic import from the embedded tool.

The manifest requests activeTab, scripting, storage, and clipboardWrite. There are no persistent host permissions or always-on content scripts. Starting Vellum grants temporary access to the current tab.

The inspector runs in the page's JavaScript world to read React metadata. A separate isolated script handles storage through a bounded, validated message protocol. The page can see its displayed notes and can interact with this same-page bridge. Do not use annotations to store secrets. The bridge does not expose other origins, arbitrary extension storage keys, or extension APIs.

Limits

• Browser-internal pages, extension stores, PDFs, and file URLs are not supported.
• Inspection is limited to the top document. Cross-origin frames and closed shadow roots are not traversed.
• Native HTML auto popovers can close when you click outside them, including the Vellum toolbar. Press S to enter selection without clicking outside. Host handlers already registered on window capture can also run before Vellum's event isolation.
• React names and source locations depend on metadata available in the page. Production bundles may not provide readable names or source maps.
• Cross-origin stylesheets may not expose their authored rules to the page. You can still add explicit inline overrides in Applied CSS.
• Notes use DOM selectors. Large page restructures can leave notes without a matching target. Notes remain in the list and can still be copied or deleted.
• Two tabs editing the same page share storage. The last save wins.
• Mini Foundry's host-specific feature/variant routing is retained in the source import but is not a browser-extension feature.

Development and verification

npm ci
npx playwright install chromium
npm run check

npm run check runs these steps:

npm run typecheck
npm test
npm run build
npm run test:browser

Browser checks use Playwright's Chromium in a separate temporary profile. They load the actual extension, trigger its browser action, and exercise the one-click action and storage. They do not change your normal browser profile.

To select an installed Microsoft Edge build that supports the test harness:

VELLUM_BROWSER=msedge npm run test:browser

Install the Edge test browser with npx playwright install msedge if needed. Unlike the temporary test profile, this installs a browser on your machine. The extension test harness needs the browser's extension debugging protocol, which can require a newer build than Vellum's minimum browser version.

The road tests cover SVG icon selection, host shortcuts and menus, CSS anchor restoration, DOM replacement, missing targets, save failure/retry, query/hash and history navigation, origin isolation, scrolling, viewport changes, and ten start/stop cycles. tests/browser/extension.spec.ts keeps this regression coverage. The tests use fresh storage and close all tabs after each case.

.github/workflows/check.yml runs the suite separately in Chromium and Edge on Linux. Failed browser jobs retain traces and state captures. A local macOS road test on 2026-11-05 passed in Chromium 153.0.8010.12 and Edge 156.0.4314.58. Windows and other browser brands have not been separately road-tested here.

Tests use a local example site, not private work pages. Captures go to artifacts/states/. After browser checks, node scripts/state-board.mjs creates an editable HTML state board. npm run preview serves it at http://127.0.0.1:5198/board. That developer-only board loads Figma's capture script; the packaged extension never does.

Source changes for the extension live in src/extension/. src/vellum/ retains the source component layout and design tokens. The import commit separates the original library from browser-specific changes.

Source and design

This extension derives from coreai-microsoft/mini-foundry, not the standalone Vellum repository. The initial src/vellum/ import is unchanged from packages/vellum/src/ at commit 0104e3b1.

The Vellum Figma file contains design references. The implementation remains authoritative for interactions and edge cases.

Existing source attribution and ownership are retained. No additional license grant is implied.