The Ultimate Browser Extension for Frontend Engineers.
Reverse-engineer design systems, extract clean React code, and dissect production components—all in one click.
DevLens Ultra is a professional-grade engineering tool built to dissect modern web applications It is Figma + DevTools + Code Generator. It uses advanced DOM Analysis, System 4 IR Scanning, and Heuristic Pattern Detection to reveal the DNA of any website.
Built with performance in mind, it operates inside a Shadow DOM to ensure zero CSS bleed and leverages Manifest V3 Service Workers for non-blocking network analysis.
- Zero-Noise Codegen: Extracts clean, production-ready React components.
- Tailwind Mapper: Automatically converts computed styles into the nearest Tailwind CSS classes.
- Abstract Mode: Uses AI to refactor raw DOM into logical, reusable sub-components.
- Universal LLM Support: Connect to OpenAI, Groq, Ollama, or OpenRouter.
- AI Explain: Highlight any element to get a 3-sentence technical breakdown of its layout, logic, and purpose.
- Auto-Correction: AI handles malformed JSON and optimizes JSX structure on the fly.
- Stack Detection: Identifies frameworks (Next.js, React, Vue) and libraries.
- Data Hooking: Directly reads framework state like
__NEXT_DATA__or React Fiber props.
- Draggable & Minimizable: Floating sidebar that can be dragged anywhere or minimized to a sleek "D" icon.
- Glassmorphism Design: High-end UI that stays out of your way.
For deep-dive exploration, the codebase follow a "Triple-Layer" architecture:
- The Shadow Host (Injector): Encapsulates the UI in a Shadow DOM. Bypasses site-wide CSP to load styles and scripts safely.
- The Scanning Worker: Offloads heavy DOM-to-IR calculations to a background thread to prevent UI jank.
- The Service Worker (Background): Handles secure network requests, AI streaming, and long-running job management.
- Clone the Repo:
git clone https://github.com/Arsh-pixel-cmd/DevLens.git - Load in Chrome:
- Go to
chrome://extensions. - Enable Developer Mode.
- Click Load unpacked and select the
srcfolder.
- Go to
- Configure AI:
- Open the extension → Go to Codegen tab.
- Enter your API Key and Base URL.
- Click Save Configuration.
- Inspect: Click Select Element and click any part of a website.
- Insights: Switch to the Insights tab to see React Fiber data or click AI Explain.
- Generate: Go to Codegen → Compile Selection. Copy the JSX or refine it via the code editor.
- Minimize: Use the
-icon to shrink DevLens into a floating shortcut.
Support the project! ⭐ Star the repo on GitHub
Built with ❤️ by Arsh. Defining the future of Developer Tooling.