See how any website is built — colors, typography, and tech stack for design engineers
Tracer is a browser extension that analyzes websites in real-time, extracting visual design elements and technology stack information. Perfect for design engineers, developers, and curious minds who want to understand how websites are constructed.
- Extract color palettes from any website
- Identify primary, secondary, and accent colors
- View color usage frequency and distribution
- Copy color values with one click
- Discover fonts used across the site
- Preview font samples with actual text rendering
- Identify icon fonts and custom typefaces
- See font weights, sizes, and families
- Detect JavaScript frameworks (React, Vue, Svelte, etc.)
- Identify UI libraries and design systems
- Discover build tools, CMS platforms, and services
- Powered by Wappalyzer technology patterns
- 3000+ technology icons
- Click-to-inspect page elements
- Analyze individual components
- View computed styles and properties
- Capture element screenshots
- 100% local processing — all analysis happens in your browser
- No data transmission to external servers
- No tracking or analytics
- Temporary session storage only
Coming soon — currently in development
- Clone this repository:
git clone https://github.com/yourusername/tracer-v2.git
cd tracer-v2- Install dependencies:
npm install- Build the extension:
npm run build-
Load in Chrome:
- Open
chrome://extensions/ - Enable "Developer mode"
- Click "Load unpacked"
- Select the
distfolder
- Open
-
For development with hot reload:
npm run dev- Frontend: React 18 + TypeScript
- Build Tool: Vite
- Styling: Tailwind CSS
- Animation: Motion (Framer Motion)
- Extension: Chrome Extension Manifest V3
- Icons: 3000+ tech icons from Wappalyzer
tracer-v2/
├── src/
│ ├── background/ # Service worker
│ ├── content/ # Content scripts
│ │ ├── extractors/ # Color, font, tech extraction
│ │ └── inspect/ # Element inspection
│ ├── sidepanel/ # React UI
│ │ └── components/ # UI components
│ └── shared/ # Shared utilities & types
├── scripts/ # Build scripts
└── manifest.json # Extension manifest
npm run dev- Start development server with hot reloadnpm run build- Build for productionnpm run preview- Preview production build
Frontend Frameworks
- React, Vue, Svelte, Angular, Solid, Preact
- Next.js, Nuxt, Remix, Astro, SvelteKit
UI Libraries
- Material UI, Chakra UI, Ant Design, Radix UI
- Tailwind CSS, Bootstrap, styled-components
Animation
- Framer Motion, GSAP, Lottie, Three.js
CMS & Site Builders
- WordPress, Contentful, Sanity, Webflow, Framer
And 3000+ more technologies...
- Open Tracer: Click the Tracer icon in your Chrome toolbar
- Navigate: Visit any website you want to analyze
- Analyze: Click the scan button or wait for automatic analysis
- Explore: Browse colors, fonts, and tech stack in the side panel
- Inspect: Use the inspect tool to analyze specific elements
- Design Engineers: Understand design systems and color palettes
- Developers: Discover tech stacks and frameworks
- Designers: Extract typography and color inspiration
- Product Managers: Research competitor technologies
- Students: Learn how modern websites are built
Tracer includes settings to customize your experience:
- Theme: Light or dark mode
- Auto-scan: Automatically scan pages on navigation
- Deep scan: More thorough tech detection (slower)
- Show signals: Highlight high-confidence detections
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Wappalyzer for technology detection patterns
- Webappanalyzer for icon mappings
- All the open-source projects that make this possible
For questions, issues, or suggestions, please open an issue on GitHub.
Made with ❤️ for design engineers and curious developers