Codelifter — DOM to React + Tailwind CSS

Convert any web page to React/Vue/Svelte + Tailwind in one click. 30 free conversions/month. Pro plan launching soon.

═══════════════════════════════════════════════════════════════ Free 30 conversions/month — no credit card. Pro ($9/mo · 200 conv) and Lifetime ($99 one-time · 500 conv/mo) available now ═══════════════════════════════════════════════════════════════ Convert UI from any surface — browser, AI editor, terminal, IDE, Figma, Raycast, or Claude Code — into production-ready React/Vue/Svelte code. Codelifter is a Chrome extension that turns any website element into production-ready React, Vue 3, or Svelte 5 components. Click an element on any page, and get a working component in seconds. No API key required. The same engine is also reachable from your terminal, your AI editor, your IDE, Figma, Raycast, and Claude Code (see "Eight Ways to Use Codelifter" below). ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WHAT IS CODELIFTER? A DOM-to-code converter. It captures a page's structure, computed styles, and animations, then generates framework-idiomatic code via our server-side AI (Anthropic Claude + HuggingFace Qwen). WHO IS IT FOR? • Frontend developers replicating UI patterns from reference sites • AI-assisted coders who want component code instead of screenshots • Freelancers and agencies starting client projects from real working code WHY NOT JUST A SCREENSHOT? Screenshots give you a picture. Codelifter gives you the DOM tree, computed styles, CSS animations, and detected JS libraries — with PII automatically masked on-device before transmission. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HOW IT WORKS 1. Install the extension — a welcome page opens automatically with a 4-step visual guide 2. Click the Codelifter icon → side panel opens 3. Pick any element on the current page 4. Our server-side AI returns annotated React + Tailwind code 5. Copy or download as ZIP ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ IN-EXTENSION FEATURES (available today) ▸ Guided First-Use — post-install welcome page (4-step visual guide) + "NEW" toolbar badge that clears on first side-panel open + inline activation hint on the idle screen ▸ DOM Extraction — captures HTML structure, computed styles, and layout geometry of the element you select ▸ CSS Animation Support — preserves @keyframes, transitions, and Web Animations API usage ▸ Dynamic Library Detection — recognizes Framer Motion, Motion One, GSAP, AOS, ScrollMagic, Locomotive Scroll, Lenis, Three.js, Spline, Lottie, Rive, Video.js, Plyr, MUX Player, AutoAnimate, React Transition Group. The generated code includes a comment so your AI editor preserves the library. ▸ Multi-Framework Output — React (JSX), Vue 3 (Composition API), Svelte 5 (runes). All styled with Tailwind. ▸ On-Device PII Filtering — email, phone, credit card, Korean RRN removed before any data leaves your browser ▸ On-Device AI Preprocessing — uses Chrome Gemini Nano when available (Chrome 131+) ▸ Live Preview — generated React renders in a sandboxed iframe; if rendering fails, the original screenshot is shown as a fallback (no infinite "rendering" state) ▸ Side Panel UI — framework switcher, history of your conversions, settings ▸ Large-Page Safety — large DOM is auto-compressed in four stages, with a clear "select a smaller area" message instead of a generic error when a single selection still exceeds the payload budget ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ EIGHT WAYS TO USE CODELIFTER (all Live) The same DOM-to-code engine is reachable from eight separate surfaces. Surface 1 is this Browser Extension; surfaces 2-8 are optional companion tools that install independently and never extend this extension's permissions. All authenticate with a single local-only pairing token (crypto.timingSafeEqual, 3-strike rate limit) bound to 127.0.0.1. ▸ 1/8 — Browser Extension (this listing) — click an element, get a component ▸ 2/8 — MCP Server — `codelifter mcp-stdio` for Claude Code, Cursor, Windsurf, Zed, VS Code Copilot ▸ 3/8 — CLI — `npx @codelifter/cli` for terminals, CI pipelines, GitHub Actions ▸ 4/8 — Node.js SDK — `@codelifter/sdk` to embed Codelifter in your own tool ▸ 5/8 — Claude Code Skill — `/codelifter` slash command in Claude Code ▸ 6/8 — VSCode / Cursor Extension — `Codelifter: Extract from URL` in the command palette ▸ 7/8 — Figma Plugin — lift a live URL into a Figma frame ▸ 8/8 — Raycast Extension — Cmd+Space, type `lift <url>`, React in clipboard ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PLANS (all available now) • Free — 30 conversions/month (no credit card) • Pro — $9/month, 200 conversions/month • Lifetime — $99 one-time, 500 conversions/month Payments processed by Lemon Squeezy (Merchant of Record — handles tax, refunds, and PCI compliance). The extension never receives card data. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ LIMITATIONS Canvas/WebGL pages (Figma, Google Maps), complex D3.js charts, drag-and-drop interactions, cross-origin iframes, and runtime JS animations (GSAP, Framer Motion) are not fully reproduced — but detected libraries are flagged in the generated code. PRIVACY The DOM and CSS of the element you convert is sent to our AI server via a Vercel proxy, used only for code generation, never sold, and not retained after the response is returned. The extension has NO background data collection and only acts on the tab when you click the toolbar icon. Anonymous product telemetry (PostHog + Sentry) is opt-in via a consent modal on first run; PII is filtered on-device before any transmission, and you can revoke consent anytime in Settings → Privacy. Full policy: https://codelifter.vercel.app/privacy REQUIREMENTS Chrome 114+. No API key. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SUPPORT Email: jh0580jh@tididig.com