v0.1.0-beta // ready_for_deployment

Refine your workflow.
Export clean code.

A minimalist visual editor for modern developers. Fine-tune layouts, extract assets, and get production-ready Tailwind code instantly.

Get Started View Documentation

system.preview

PickyEditor

Inspect Mode

READY_FOR_DEPLOYPROD_v1

Live_Lab

Experience Picky_Editor in action.

Live_Simulation

SELECT ANY ELEMENT ON THE PAGE

Just toggle Inspect Mode and click on any element. You will see the code, can change properties in real time, and copy the result.

Interactive_Boxes

"Here are some boxes, have fun try it out"

Box_Alpha

Box_Beta

Box_Gamma

🐈

yellow car

Inspect_Off

Picky.EditorEnv_v0.8.1

dom_hierarchy

properties

MODIFIABLE

Width100%

Height100%

BG_Color

#7C3AED

Border

Padding0px

Radius

tailwind_code

// no element selected

Engine_Readyv0.8.1-BETA

Simulation_Active

Desktop Experience Required

The Live Lab is a complex environment optimized for larger screens. Please visit on a desktop to experience the full interactive demo.

Next-Gen CSS Editing

Features

A complete toolkit designed to inspect, edit, and extract website designs directly from your browser's side panel.

Precision Element Picker

Instantly inspect any DOM element with a single click. A non-intrusive highlight box perfectly frames elements, displaying layout type and dimensions in real-time.

Real-Time CSS Editing

Adjust layouts, typography, spacing, and colors on the fly directly from the Chrome Side Panel. See your design changes immediately applied to the live webpage.

Intelligent Site Scanning

Extract the entire design system of any website in seconds. With one click, automatically pull the most frequently used font families, text colors, and background palettes.

Instant Asset Extraction

Quickly pinpoint and extract embedded images, background visuals, and inline SVGs. Instantly view their exact rendered sizes and computed properties.

Non-Destructive Experimentation

Play around with CSS properties with complete confidence. Picky.Editor automatically tracks original element states, allowing you to freely experiment and instantly revert your changes.

Native Side Panel Workspace

Designed specifically for modern browser workflows. Picky.Editor lives inside Chrome's native Side Panel, providing a dedicated interface that never covers the webpage you're inspecting.

How_It_Works

A quick peek under the hood. Here's how Picky.Editor magically reads and manipulates any website in real-time.

The Command Center

Once you open the clean React Side Panel and click "Inspect," the extension wakes up and sends a hidden message to the webpage you're currently viewing, telling it to prepare for scanning.

{ action: "START_PICKING" }

Invisible Helpers

Tiny Content Scripts are injected into the page. They follow your mouse, casting a neat shadow-box highlight over everything you hover. Using the Shadow DOM ensures they never accidentally break the site's layout!

The DOM Reader

Click an element, and our DOM Reader kicks in. It captures all the exact colors, fonts, and box models, instantly teleporting that raw CSS data back to your side panel so you can see exactly how it was built.

window.getComputedStyle()

Real-Time Magic

Tweak a layout setting in the panel, and the webpage updates instantly! A background tracker remembers the original state, so you can safely undo your changes. Close the panel, and the background worker ensures a clean exit.

element.style.setProperty()

Refine your workflow.Export clean code.