Item logo image for OpenPencil

OpenPencil

5.0(

1 rating

)
Item media 5 (screenshot) for OpenPencil
Item media 1 (screenshot) for OpenPencil
Item media 2 (screenshot) for OpenPencil
Item media 3 (screenshot) for OpenPencil
Item media 4 (screenshot) for OpenPencil
Item media 5 (screenshot) for OpenPencil
Item media 1 (screenshot) for OpenPencil
Item media 1 (screenshot) for OpenPencil
Item media 2 (screenshot) for OpenPencil
Item media 3 (screenshot) for OpenPencil
Item media 4 (screenshot) for OpenPencil
Item media 5 (screenshot) for OpenPencil

Overview

Capture the rendered page and import it into OpenPencil as editable design nodes.

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.

Details

  • Version
    0.8.3
  • Updated
    August 8, 2026
  • Size
    320KiB
  • Languages
    16 languages
  • Developer
    Email
    xkayshen@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

Manage extensions and learn how they're being used in your organization
The developer has disclosed that it will not collect or use your data.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Related

Visual Web Clipper for Miro & Figma

3.7

The visual web clipper for designers. Capture screenshots, build moodboards, and drag them directly into Miro, Figma, or Notion.

Protoca

4.3

Capture the design, tweak manually, export as HTML, send to AI.

PageSnapper: Capture, Edit & Export

5.0

Capture full pages, selected areas, elements, and visible screens. Edit, redact, compose, and export locally.

Full Page Screenshot

5.0

Capture a full-page screenshot, preview it, and export as PNG or PDF.

Element Armory – Capture UI Elements

0.0

Capture and save styled page elements as reusable snippets.

HTML to Figma

0.0

Capture any webpage's HTML/CSS and import it into Figma as editable layers.

MarkUp: Annotate webpages, prompt AI agents

4.2

Annotate live webpages and export structured change requests to AI coding assistants. Draw your changes instead of describing them.

Flowblock: Notion Diagrams & Flowcharts

0.0

Add Excalidraw and draw.io diagrams to Notion pages. Import Notion AI Mermaid flowcharts in one click. Native Notion blocks.

ChromeDraw — Draw on any webpage

5.0

Draw, highlight & type notes on any webpage. Pen, highlighter, on-device handwriting-to-text (OCR), erasers & one-click screenshots.

SnapPage Pro - Full Page Screenshot

5.0

Capture full page screenshots with advanced editing, annotations, and export to PNG, JPEG, or PDF

Scribdown

0.0

Renders any .md page or local Markdown file in place — code highlighting, Mermaid diagrams, table of contents.

UI Inspector - Visual CSS Editor

4.0

Inspect and visually edit elements and their CSS directly on the page for faster design and UI debugging.

Visual Web Clipper for Miro & Figma

3.7

The visual web clipper for designers. Capture screenshots, build moodboards, and drag them directly into Miro, Figma, or Notion.

Protoca

4.3

Capture the design, tweak manually, export as HTML, send to AI.

PageSnapper: Capture, Edit & Export

5.0

Capture full pages, selected areas, elements, and visible screens. Edit, redact, compose, and export locally.

Full Page Screenshot

5.0

Capture a full-page screenshot, preview it, and export as PNG or PDF.

Element Armory – Capture UI Elements

0.0

Capture and save styled page elements as reusable snippets.

HTML to Figma

0.0

Capture any webpage's HTML/CSS and import it into Figma as editable layers.

MarkUp: Annotate webpages, prompt AI agents

4.2

Annotate live webpages and export structured change requests to AI coding assistants. Draw your changes instead of describing them.

Flowblock: Notion Diagrams & Flowcharts

0.0

Add Excalidraw and draw.io diagrams to Notion pages. Import Notion AI Mermaid flowcharts in one click. Native Notion blocks.

Google apps