0.9New in 0.9: GEO checks and site cleanup

Turn any website into clean, editable code.

Pick a section on any page and export it as React, Tailwind, Vue, Astro, Bricks or Elementor — with only the CSS its author wrote. Then audit the site and send your client a report.

Add to Chrome — it's free

Free forever. 7-day Pro trial, no card.
Chrome, Edge, Brave, Opera, Arc, Comet and Firefox

Authored CSS only

card.css11 lines

1.card {
2 display: grid; gap: 16px;
3 padding: 24px; border-radius: 20px;
4 background: var(--paper);
5 transition: transform .4s;
6}
7.card:hover { transform: translateY(-4px); }
8.card:hover .card__title { color: var(--ink); }
9@media (min-width: 768px) {
10 .card { grid-template-columns: 1fr 1fr; }
11}

Built for web designers, front-end developers, freelancers and agencies — especially if you work with WordPress, Bricks and Elementor.

export formats, from React to Elementor: 8; export formats, from React to Elementor
devices in the responsive view: 27; devices in the responsive view
Elementor setting keys checked against Elementor's source: 92; Elementor setting keys checked against Elementor's source
technology signatures in the tech stack panel: ~60; technology signatures in the tech stack panel

Exports to the tools you already use

React
Tailwind CSS
Vue
Astro
Bricks
Elementor
WordPress
WooCommerce
WCAG 2.2
Core Web Vitals
llms.txt
Lottie
React
Tailwind CSS
Vue
Astro
Bricks
Elementor
WordPress
WooCommerce
WCAG 2.2
Core Web Vitals
llms.txt
Lottie

React
Tailwind CSS
Vue
Astro
Bricks
Elementor
WordPress
WooCommerce
WCAG 2.2
Core Web Vitals
llms.txt
Lottie
React
Tailwind CSS
Vue
Astro
Bricks
Elementor
WordPress
WooCommerce
WCAG 2.2
Core Web Vitals
llms.txt
Lottie

Lottie
llms.txt
Core Web Vitals
WCAG 2.2
WooCommerce
WordPress
Elementor
Bricks
Astro
Vue
Tailwind CSS
React
Lottie
llms.txt
Core Web Vitals
WCAG 2.2
WooCommerce
WordPress
Elementor
Bricks
Astro
Vue
Tailwind CSS
React

Lottie
llms.txt
Core Web Vitals
WCAG 2.2
WooCommerce
WordPress
Elementor
Bricks
Astro
Vue
Tailwind CSS
React
Lottie
llms.txt
Core Web Vitals
WCAG 2.2
WooCommerce
WordPress
Elementor
Bricks
Astro
Vue
Tailwind CSS
React

Product tour

Pickode in under two minutes.

Inspector, export, colors, assets, performance and accessibility on a real site, from the first click to the client report.

Pickode product tour: inspecting a website and exporting a section

Play the tour (1:44)

Music only, no voice-over.

Why the code is short

The browser computes. The author writes. Pickode reads what was written.

Every @media, @supports and @container kept as written
States on the element and on its parents, like .card:hover .title
::before and ::after, variables resolved to the site's value
No browser defaults, no universal resets

DevTools: computed styles

32 lines+

align-content: normal;
align-items: normal;
background-color: rgb(244, 247, 241);
block-size: 412px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
box-sizing: border-box;
color: rgb(31, 61, 47);
column-gap: 16px;
display: grid;
font-family: Inter, sans-serif;
font-size: 16px;
grid-template-columns: 320px;
grid-template-rows: 240px 27px 33px;
height: 412px;
inline-size: 368px;
line-height: 24px;
margin-block-end: 0px;
margin-block-start: 0px;
padding-block-end: 24px;
padding-block-start: 24px;
padding-inline-end: 24px;
padding-inline-start: 24px;
row-gap: 16px;
transform: none;
transition-duration: 0.4s;
transition-property: transform;
transition-timing-function: ease;
width: 368px;
-webkit-font-smoothing: antialiased;
align-content: normal;
align-items: normal;
background-color: rgb(244, 247, 241);
block-size: 412px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
box-sizing: border-box;
color: rgb(31, 61, 47);
column-gap: 16px;
display: grid;
font-family: Inter, sans-serif;
font-size: 16px;
grid-template-columns: 320px;
grid-template-rows: 240px 27px 33px;
height: 412px;
inline-size: 368px;
line-height: 24px;
margin-block-end: 0px;
margin-block-start: 0px;
padding-block-end: 24px;
padding-block-start: 24px;
padding-inline-end: 24px;
padding-inline-start: 24px;
row-gap: 16px;
transform: none;
transition-duration: 0.4s;
transition-property: transform;
transition-timing-function: ease;
width: 368px;
-webkit-font-smoothing: antialiased;

Every property resolved to pixels, media queries gone.

Pickode: authored CSS

11 lines

.card {
  display: grid; gap: 16px;
  padding: 24px; border-radius: 20px;
  background: var(--paper);
  transition: transform .4s;
}
.card:hover { transform: translateY(-4px); }
.card:hover .card__title { color: var(--ink); }
@media (min-width: 768px) {
  .card { grid-template-columns: 1fr 1fr; }
}

The real values, breakpoints, hover states and variables.

Same card, same page. Example.

How it works

From any website to your editor in three steps.

Select
Open Pickode on any page (Alt+I) and pick a section with the inspector.
Export
Choose React, Tailwind, Vue, Astro, Bricks or Elementor. Only the CSS the author wrote.
Paste
Press ⌘V in Bricks or import the template in Elementor: you get native, editable elements — headings, text, images, buttons, icons — with styles in each builder's own controls. Or drop the code into your project or your AI.

Text takes the fonts of the site you paste into. Elementor needs Flexbox Containers (on by default).

Learn more about Bricks Learn more about Elementor

Real recording of Pickode on a demo site, split into the three steps.

Analyze and report

Audit any site before the first call.

WordPress, speed, accessibility and AI search in one pass — then a report your client understands.

Send a report your client understands.

One HTML file with a screenshot, scores, prioritized fixes, SEO, speed, accessibility and technologies. Your header and colors, in English or Italian, printable to PDF.

Example layout

Ready for AI search

Checks what ChatGPT, Claude and Perplexity can read: robots.txt rules per AI crawler, llms.txt, sitemap, structured data and server-rendered text. Generates robots.txt rules and an llms.txt draft.

The score is a guide, not a promise of citations.

WordPress & WooCommerce

WP version, theme and child theme, plugins with versions, builder (Bricks, Elementor, Divi, Oxygen, Breakdance, Gutenberg), WooCommerce page type, checkout type, products and currency, cache headers, REST namespaces, basic security checks.

Learn more

Performance

LCP, CLS, INP, FCP, TTFB, LCP element and fetchpriority, weight by type, render-blocking resources, oversized/legacy/non-lazy images, third parties, long tasks.

Learn more

Accessibility

axe-core WCAG 2.2 AA audit with highlighted nodes, plus a contrast map that marks every failing text on the page and suggests the nearest passing color.

Learn more

Copy for AI

Give your AI the real thing.

One click copies a brief for Claude, ChatGPT, Cursor or v0: the component's code, its structure, breakpoints and states, the site's design tokens and the assets it uses. Only facts found on the page — no made-up style rules.

copied.md

# Rebuild this section
Recreate it in React + Tailwind. Keep breakpoints and states.

## Section
Type: pricing card (estimated)

## Layout
- grid, 3 columns → 1 column below 768px

## States
- `:hover`, `:focus-visible`

## Design tokens
- `--color-primary`: #715aff
- `--radius-card`: 16px

## Code
```jsx

Paste it intoClaudeChatGPTCursorv0

Design tokens

Extract a site's design system in seconds.

Colors by role: primary, secondary, accent, success, error, background, text, border.
Brand colors and gradients.
Spacing scale with 4/8px grid detection.
Type scale, radii and shadows.

Export asCSS variablesTailwind v4 @themetailwind.config.jsglobals.css (shadcn)WordPress theme.jsonJSON

Learn more

Everything else you reach for

One extension instead of ten.

The small tools you open every day, in the same panel, with the same shortcuts.

Inspector & live edit
Box model, fonts, colors and WCAG contrast; edit properties live.
Measure with Alt
Hold Alt over an element to see distances in px.
Grid overlay
Columns, gutter and baseline, with Bootstrap, Tailwind and Bricks presets.
Saved CSS per site
CSS saved per domain and re-applied on every visit.
Eyedropper & palette
Text, background and border colors in HEX, RGB and HSL.
Page fonts
Families, weights, sizes and loaded @font-face rules.
Screenshots & editor
Visible area, full page, area or element, with arrows, text and blur.
Responsive
27 devices with frames, rotation, synced scroll and replay.
Assets and media
Images, SVG, fonts, video, Lottie and HLS/DASH streams, zipped by folder.
Site cleanup
Clear cookies, storage and cache for the open site only, then reload without cache.
Image optimizer
Re-encode to WebP or AVIF at the size actually displayed, and download a ZIP.
Library on your Drive
Saved components, tokens and palettes, synced to a Pickode folder in your Google Drive.

All features

Privacy

The pages you analyze never leave your browser.

No Pickode server
Inspection, export and audits run in your browser. We don't collect browsing data.
Your Drive, not ours
Library sync goes straight to your Google Drive, and Pickode only sees the files it created.
License only
The license key is the one thing sent out, to our payment provider, to verify it.

Pricing

Simple pricing. Free forever.

MonthlyYearlySave 46%Lifetime

Free

For inspecting, auditing and the occasional export.

€0forever

Add to Chrome

Inspector, box model, live edit, measurements, grid
Colors, eyedropper, fonts, contrast map
SEO and tech stack
Visible and full-page screenshots
5 HTML + CSS exports a week
Design tokens in every format: copy and download

Pro

Team / Agency

For agencies: 5 people × 3 browsers each.

€149/year

€149/year or €299 one-time

Get Team

Everything in Pro, plus:

5 people, 3 browsers each
Client reports with your logo

30-day refund, no questions asked.
7-day Pro trial from the extension: no card, no account.
Prices exclude VAT, calculated at checkout.

Compare Free and Pro in detail All comparisons

Questions

Frequently asked questions.

Can't find your answer?

Read the documentation or write to us.

Read the docs Contact us

Is Pickode free?

Yes. The free version has the inspector, colors, fonts, SEO, tech stack, screenshots, the contrast map, design tokens in every format and a weekly allowance of HTML exports. Pro unlocks every export format, builders, reports and media tools.

What does “only authored CSS” mean?

Pickode reads the site's original stylesheets instead of the values the browser computed. You get the author's real values, media queries and hover states, not hundreds of resolved pixels.

Does the Elementor export work with free Elementor?

Yes. It needs Flexbox Containers, on by default in recent versions.

How do I paste into Bricks?

Copy for Bricks in Pickode, then select an element or the canvas in Bricks and press ⌘V (Ctrl+V).

Which browsers?

Chrome, Edge, Brave, Opera, Arc, Comet (Chromium) and Firefox 140+. The Side Panel is available where the browser supports it.

Do you collect my browsing data?

No. Everything runs in your browser. Only the license key is sent to our payment provider to verify it.

Is it legal to copy a website's code?

Pickode is for learning, inspiration, auditing and migrating sites you work on. Respect copyright and licenses: don't republish others' designs, text or images without permission.

Can I download any video?

Only unprotected HLS/DASH streams you have the right to save. DRM-protected video, encrypted streams, live streams and YouTube are not supported.

Stop rebuilding. Start picking.

Install Pickode, open any site and press Alt+I.

Add to Chrome — it's free

Free · 7-day Pro trial · No account needed

Turn any website into clean, editable code.Turnanywebsite intoclean,editablecode.

Pickode by the numbers.

Exports to the tools you already use

Pickode in under two minutes.

The browser computes. The author writes. Pickode reads what was written.

From any website to your editor in three steps.

Select

Export

Paste

Audit any site before the first call.

Send a report your client understands.

Ready for AI search

WordPress & WooCommerce

Performance

Accessibility

Give your AI the real thing. Extract a site's design system in seconds.

Give your AI the real thing.

Extract a site's design system in seconds.

One extension instead of ten.

Inspector & live edit

Measure with Alt

Grid overlay

Saved CSS per site

Eyedropper & palette

Page fonts

Screenshots & editor

Responsive

Assets and media

Site cleanup

Image optimizer

Library on your Drive

The pages you analyze never leave your browser.

No Pickode server

Your Drive, not ours

License only

Simple pricing. Free forever.

Free

Pro

Team / Agency

Frequently asked questions.

Can't find your answer?

Is Pickode free?

What does “only authored CSS” mean?

Does the Elementor export work with free Elementor?

How do I paste into Bricks?

Which browsers?

Do you collect my browsing data?

Is it legal to copy a website's code?

Can I download any video?

Stop rebuilding. Start picking.

Turn any website into clean, editable code.