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.

═══════════════════════════════════════════════════════════════ NOTICE — Pro plan launching soon. All users currently get the full Free tier (30 conversions/month). No credit card required. ═══════════════════════════════════════════════════════════════ 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. Click the Codelifter icon → side panel opens 2. Pick any element on the current page 3. Our server-side AI returns annotated React + Tailwind code 4. Copy or download as ZIP ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ IN-EXTENSION FEATURES (available today) ▸ 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 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 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 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PRO (COMING SOON — not yet available): Additional extraction quality features are planned for the Pro tier. None of these features are active in the current build — they will ship together with Pro launch. PLANS • Free — 30 conversions/month, available now (no credit card) • Pro — $9/month, 200 conversions/month, launching soon • Lifetime — $99 one-time, 500 conversions/month, launching soon Payments processed by Lemon Squeezy (Merchant of Record — handles tax, refunds, and PCI compliance). ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 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