Ever wanted to know what fonts Linear uses? What colors Stripe's landing page is built with? Which CSS framework powers Vercel's homepage?
SnapSharp's Site Audit endpoint opens any URL in a real Chromium browser and extracts everything a designer or developer needs — in one API call.
What you get
| Section | Data |
|---|---|
| Colors | Primary, background, text, accent — up to 20 unique colors with hex codes |
| Fonts | Every font family with weights and usage context (body, heading, code) |
| Headings | All h1–h6 with font size, weight, color, and text content |
| Typography | Body font size, line height, heading scale |
| Tech stack | Framework detection with confidence scores — 14+ technologies |
| Accessibility | Images without alt, heading order, contrast issues, ARIA landmarks |
| Metadata | Title, description, OG image, favicon, language, viewport |
Three output formats
JSON — structured data for programmatic use. Feed it into design system generators, CI pipelines, or competitive analysis dashboards.
PNG (Site-Book) — a pixel-perfect 1200px visual card with screenshot, color swatches, font families, heading hierarchy, and tech stack badges. Share in Slack, Notion, or client decks.
PDF — A4 landscape report with the same content. Perfect for proposals and audits.
Quick start
import { SnapSharp } from '@snapsharp/sdk';
const snap = new SnapSharp('sk_live_...');
const audit = await snap.siteAudit('https://linear.app', {
format: 'json',
});
console.log(audit.colors.primary); // ["#5E6AD2", "#4B50C8"]
console.log(audit.fonts.families[0]); // { name: "Inter", weights: [400, 500, 600, 700] }
console.log(audit.stack.js_framework); // "Next.js"
console.log(audit.accessibility.images_without_alt); // 3from snapsharp import SnapSharp
snap = SnapSharp("sk_live_...")
audit = snap.site_audit("https://stripe.com", format="json")
for font in audit["fonts"]["families"]:
print(f"{font['name']} — {font['weights']}")PNG site-book — one command
snapsharp site-audit https://vercel.com --format png --output vercel-tokens.pngThe resulting PNG contains:
- Page screenshot (top fold)
- Color swatches with hex codes
- Font families with weights
- Heading hierarchy with sizes
- Technology stack badges
Use cases
Design system bootstrap — starting a new project? Audit a reference site, extract its tokens, and use them as a starting point for your design system.
Competitive analysis — compare color palettes, font choices, and tech stacks across competitors. Export JSON and build a comparison dashboard.
Client proposals — generate a PDF site audit for a prospect's website. Show them exactly what their current site uses and what you'd improve.
Brand consistency — run periodic audits on your own site to make sure design tokens haven't drifted. Combine with Website Monitoring for automated visual regression.
Accessibility checks — spot missing alt texts, broken heading hierarchies, and low-contrast text/background pairs before they become compliance issues.
Tech stack detection
SnapSharp detects 14+ technologies including Tailwind CSS, Bootstrap, Material UI, Chakra UI, Next.js, Nuxt, React, Vue, Angular, WordPress, Webflow, Framer, Vercel, and Netlify. Each detection includes the signal that triggered it and a confidence score.
Try it free
The Site Audit Tool is available as a free browser-based tool — 3 requests per day, no sign-up required. For API access, any paid plan includes unlimited site audits.
Try Site Audit → · Read the docs → · Get an API key →
Frequently Asked Questions
How accurate is the tech stack detection?
Detection runs on a mix of DOM signals, HTTP headers, and script URLs — typical accuracy is 90%+ for popular frameworks (Next.js, Nuxt, WordPress). We return a confidence score per detection so you can filter out low-confidence guesses. Obfuscated or custom-built sites may return "Unknown" rather than incorrect results.
Can I audit sites behind authentication or staging environments?
Yes — pass cookies and headers in the request body (same shape as the screenshot endpoint), and the audit runs with that authenticated session. For basic auth staging sites, add headers: { Authorization: "Basic ..." }. The endpoint inherits SnapSharp's SSRF guard, so internal IPs are still blocked.
What's the difference between Site Audit and the free online analyzers?
Site Audit runs in real Chromium with full JS execution, so it sees computed styles as users see them — not just parsed CSS. It extracts design tokens (colors, fonts, spacing) in a form you can feed into a design system, exports PNG/PDF/JSON, and is accessible by API for automation. Free tools typically parse static HTML only.
How many unique colors does the audit return?
Up to 20, ranked by on-screen area. The endpoint extracts computed background and text colors from all visible elements, dedupes near-identical values (ΔE < 2), and returns the most prominent. For sites with 100+ palette colors, this gives you the core system rather than every gradient stop.
Can I run Site Audit on a schedule?
Yes — combine it with a cron job or GitHub Action. Run daily against your own site to catch design token drift, or against competitors to track design changes over time. Store the JSON output and diff it week-over-week.
Which plan do I need for API access?
Site Audit is available on Starter and above. The free in-browser tool allows 3 audits/day without sign-up. See pricing for full details and monthly request limits.
Related: Site Audit docs · Website Monitoring · Custom OG Templates with HTML & CSS