OpenPencil

Turn any web page into an editable OpenPencil design. OpenPencil reads a page the way your browser actually renders it — computed styles, real positions, resolved fonts and colours — and rebuilds it in OpenPencil as design nodes you can select, restyle and rearrange. Not a screenshot, not an HTML dump: frames, text and images with their real geometry. WHAT YOU CAN DO • Capture full page — the whole rendered document, one click. • Capture element — hover to highlight, click to take just the card, header or section you want. • Download .op — save the capture as a document to open in OpenPencil later, with no app running. WHY THE RENDERED STATE MATTERS Modern pages are assembled at runtime. Anything built by JavaScript, styled by a utility CSS framework, or positioned by flexbox or grid simply is not in the HTML source. This extension runs OpenPencil's own DOM extractor inside the tab, reading getComputedStyle and getBoundingClientRect, so what lands on your canvas is what you were actually looking at. WHERE YOUR CAPTURE GOES — YOU CHOOSE, EVERY TIME • OpenPencil on this computer — delivered over loopback (127.0.0.1) to the desktop app. Nothing leaves your machine. Start it from Settings → MCP. • My OpenPencil account — optional. Sign in and captures land in your account inbox, waiting on your other devices. The extension is fully functional signed out. BUILT TO BE INSPECTED Manifest V3, zero third-party dependencies, and no code loaded from the network. The extension's decision logic is Rust compiled to WebAssembly and unit-tested; the JavaScript is a thin layer over the Chrome APIs. Open source under the MIT licence: https://github.com/ZSeven-W/openpencil GOOD TO KNOW Available in 15 languages. Requires Chrome 103 or later. Delivering to the desktop app needs OpenPencil installed with its local server started — Download .op works without it. Very large pages are capped at 20,000 nodes; the popup tells you when a capture came through partial.