Codelifter — DOM to React + Tailwind CSS

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

═══════════════════════════════════════════════════════════════ NOTICE — Pro plan launching soon. All users currently get the full Free tier (20 conversions/month). No credit card required. ═══════════════════════════════════════════════════════════════ Convert any web page element into clean React + Tailwind CSS 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. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 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+) ▸ Side Panel UI — framework switcher, history of your conversions, settings ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ OPTIONAL DEVELOPER INTEGRATIONS (separate install required) These are optional companion tools for users who want to connect Codelifter to an AI coding editor. They are NOT part of the extension itself — install separately from npm/GitHub: ▸ Codelifter CLI — `npx codelifter extract` for CI and GitHub Actions ▸ MCP Server — hosted by the CLI on ws://127.0.0.1:12307 for Cursor, Windsurf, Zed, VS Code Copilot ▸ Claude Code Skill — `/codelifter` command in Claude Code ▸ Node.js SDK — `@codelifter/sdk` All companion tools are authenticated with a local-only pairing token (crypto.timingSafeEqual, 3-strike rate limit) and bind to 127.0.0.1 only. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 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 — 20 conversions/month, available now (no credit card) • Pro — $14/month, 70 conversions/month, launching soon ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 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. Full policy: https://codelifter.vercel.app/privacy REQUIREMENTS Chrome 114+. No API key. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SUPPORT Email: jh0580jh@tididig.com ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ━━━━━━━━ 한국어 (Korean) ━━━━━━━━ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ═══════════════════════════════════════════════════════════════ 안내 — Pro 요금제는 곧 출시됩니다. 현재 모든 사용자는 Free(월 20회) 전체 기능을 사용하실 수 있습니다. 신용카드 불필요. ═══════════════════════════════════════════════════════════════ 웹 페이지의 어떤 요소든 클릭 한 번으로 React + Tailwind CSS 코드로 변환. Codelifter는 DOM→코드 변환 Chrome 확장입니다. 웹사이트의 아무 요소나 선택하면 프로덕션 수준의 React, Vue 3, Svelte 5 컴포넌트가 몇 초 안에 생성됩니다. API 키 불필요. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Codelifter가 뭔가요? DOM 구조, computed 스타일, 애니메이션, 검출된 JS 라이브러리를 서버 사이드 AI(Anthropic Claude + HuggingFace Qwen)로 분석하여 프레임워크에 맞는 코드로 생성하는 DOM→코드 변환 도구입니다. 누구에게 유용한가요? • 참고 사이트의 UI 패턴을 빠르게 복제하려는 프론트엔드 개발자 • 스크린샷이 아닌 진짜 컴포넌트 코드가 필요한 AI 에디터 사용자 • 실제 작동하는 코드로 클라이언트 프로젝트를 시작하려는 프리랜서·에이전시 스크린샷 툴과 뭐가 다른가요? 스크린샷은 이미지만 주지만, Codelifter는 DOM 트리, computed 스타일, CSS 애니메이션, 검출된 JS 라이브러리를 함께 제공합니다. PII는 전송 전 기기 내에서 자동 마스킹됩니다. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 사용 방법 1. Codelifter 아이콘 클릭 → 사이드 패널 열림 2. 현재 페이지에서 요소 선택 3. 서버 AI가 주석 달린 React + Tailwind 코드 생성 4. 복사 또는 ZIP 다운로드 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 확장 내 기능 (현재 제공) ▸ DOM 추출 — 선택 요소의 HTML 구조, computed 스타일, 레이아웃 수집 ▸ CSS 애니메이션 지원 — @keyframes, 트랜지션, Web Animations API 보존 ▸ 동적 라이브러리 검출 — Framer Motion, Motion One, GSAP, AOS, ScrollMagic, Locomotive Scroll, Lenis, Three.js, Spline, Lottie, Rive, Video.js, Plyr, MUX Player, AutoAnimate, React Transition Group. 생성 코드에 라이브러리 주석 포함 ▸ 멀티 프레임워크 — React (JSX), Vue 3 (Composition API), Svelte 5 (룬). 모두 Tailwind ▸ 온디바이스 PII 필터 — 이메일·전화·카드·주민번호가 브라우저를 벗어나기 전 자동 제거 ▸ 온디바이스 AI 전처리 — Chrome Gemini Nano 사용 가능 시 (Chrome 131+) ▸ 사이드 패널 UI — 프레임워크 스위처, 변환 히스토리, 설정 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 선택 사항 개발자 통합 (별도 설치 필요) AI 코딩 에디터와 Codelifter를 연결하고 싶은 사용자를 위한 선택형 동반 도구입니다. 확장 자체에 포함되지 않으며 npm/GitHub 에서 별도 설치해야 합니다. ▸ Codelifter CLI — CI / GitHub Actions 용 `npx codelifter extract` ▸ MCP 서버 — Cursor, Windsurf, Zed, VS Code Copilot 용 CLI 호스팅 ws://127.0.0.1:12307 ▸ Claude Code Skill — Claude Code 의 `/codelifter` 커맨드 ▸ Node.js SDK — `@codelifter/sdk` 모든 동반 도구는 로컬 전용 페어링 토큰(crypto.timingSafeEqual, 3-strike rate limit) 으로 인증되며 127.0.0.1 전용 바인드입니다. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Pro (곧 출시 — 현재 비활성): 추가적인 추출 품질 기능이 Pro 티어에 예정되어 있습니다. 현재 빌드에서는 어느 기능도 활성화되어 있지 않으며, Pro 출시와 함께 제공될 예정입니다. 요금제 • Free — 월 20회, 지금 이용 가능 (신용카드 불필요) • Pro — $14/월, 월 70회, 곧 출시 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 제한 사항 Canvas/WebGL 페이지(Figma, Google Maps), 복잡한 D3.js 차트, 드래그앤드롭, cross-origin iframe, 런타임 JS 애니메이션(GSAP, Framer Motion)은 완전 재현되지 않습니다. 다만 검출된 라이브러리는 생성 코드에 주석으로 표시됩니다. 개인정보 변환을 요청한 요소의 DOM/CSS는 Vercel 프록시를 통해 AI 서버에 전송되어 코드 생성에만 사용되며, 응답 반환 후 서버에 저장되지 않습니다. 확장은 백그라운드 데이터 수집을 하지 않고, 툴바 아이콘을 클릭할 때만 해당 탭에서 동작합니다. 전체 정책: https://codelifter.vercel.app/privacy 요구사항 Chrome 114+. API 키 불필요. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 문의 이메일: jh0580jh@tididig.com