git404hub

what is cappie fr?

spronta/cappie — explained in plain English

Analysis updated 2026-07-25

1TypeScriptAudience · designerComplexity · 2/5Setup · easy

tl;dr

Cappie is a Chrome extension that lets you pick any element from a webpage and export it as a crisp SVG or high-res PNG, perfect for design and marketing work.

vibe map

mindmap
  root((repo))
    What it does
      Pick web elements
      Export SVG or PNG
      Inspector-like picker
    Key features
      Remove backgrounds
      Add padding
      Capture history
    Use cases
      Design assets
      Marketing materials
      Figma import
    Tech stack
      Chrome extension
      TypeScript
      dom-to-svg
    Audience
      Designers
      Marketers
      Developers

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

Grab a UI card or button from a live website to use in a Figma design file.

VIBE 2

Export a high-resolution PNG of a webpage section for marketing materials.

VIBE 3

Capture a clean SVG of a component with transparent background for layering in Illustrator.

VIBE 4

Pick and save specific webpage elements while removing unwanted parts like cookie banners.

what's the stack?

TypeScriptChrome Extensiondom-to-svg

how it stacks up fr

spronta/cappie0xkinno/neuralvault0xmayurrr/ai-contractauditor
Stars111
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyhardeasy
Complexity2/54/52/5
Audiencedesignerdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · easy time til it works · 5min

Download the zip from the release page, unzip it, and load it into Chrome's extensions panel with Developer mode turned on.

The explanation does not mention a license for this repository.

in plain english

Cappie is a Chrome extension that lets you grab any element from a web page and save it as a vector SVG file or a high-resolution PNG. You might want a clean shot of a button, a card, or a section for use in marketing materials or design software. Instead of taking a flat screenshot of your whole screen, you pick the exact piece you need and export it in a format that stays sharp at any size. The extension works by converting the picked element into real SVG shapes and text nodes. It does not rely on a rough screenshot trick, which means the result pastes cleanly into tools like Figma or Illustrator. Under the hood it builds on an existing library called dom-to-svg that handles the actual layout-to-SVG conversion. To install it, you download a zip file from the release page and load the unzipped folder into Chrome's extensions panel with Developer mode turned on. It requires Chrome 116 or newer and works in any Chromium browser such as Edge, Brave, or Arc. A Chrome Web Store listing is planned but not available yet. Using it feels similar to a browser inspector. You activate the picker with a toolbar icon, a keyboard shortcut, or a right-click menu. Hover to highlight what you want, click to select it, and use arrow keys to move up or down the page structure if you need a larger container. You can erase unwanted parts like cookie banners, remove the background for transparent layering, add padding, set a PNG scale from 1 to 10 times, or add a 3-second delay so you can open a menu before the shot fires. Pressing Enter saves an SVG, and Shift or Alt plus Enter saves a PNG at a chosen scale. Everything you capture is logged to a history page where you can re-download or delete items. The extension embeds web fonts directly into the SVG so your text looks right in other tools. Cross-origin images are included when their host allows it. It cannot capture content inside cross-origin iframes, canvas elements, or video, and it will not run on internal Chrome pages.

prompts (copy fr)

prompt 1
Help me build a Chrome extension like Cappie that lets users pick a specific DOM element on a webpage and export it as an SVG file. How should I structure the content script to highlight elements on hover?
prompt 2
I want to create a browser extension that converts a selected HTML element into a high-resolution PNG with adjustable scale from 1x to 10x. What approach should I take for rendering the element to canvas?
prompt 3
How can I embed web fonts directly into an SVG generated from a DOM element so that text renders correctly when the SVG is opened in design tools like Figma?
prompt 4
I am building an element picker tool for a browser extension. How do I let users navigate up and down the DOM tree with arrow keys to select a larger or smaller container element?

Frequently asked questions

what is cappie fr?

Cappie is a Chrome extension that lets you pick any element from a webpage and export it as a crisp SVG or high-res PNG, perfect for design and marketing work.

What language is cappie written in?

Mainly TypeScript. The stack also includes TypeScript, Chrome Extension, dom-to-svg.

What license does cappie use?

The explanation does not mention a license for this repository.

How hard is cappie to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is cappie for?

Mainly designer.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.