# DevZap

> The browser toolkit for developers. Inspect, edit, and export from any page — without leaving your tab.

DevZap is a Chrome extension that bundles inspect, style, SEO, and content tools into a single browser tab. The extension is paid (one-time, lifetime) and a curated subset is exposed as free in-browser tools at https://devzap.io/tools.

## Pricing

- **Free tier**: Limited toolset accessible via the public website at https://devzap.io/tools — no install required.
- **DevZap Premium**: $9 USD one-time payment. Lifetime access to every DevZap tool. One-time payment, 3 devices per license.
- Pricing page: https://devzap.io/pricing
- Current version: v1.3.0 (2026-05-05)

## Free in-browser tools

Each tool is a standalone web utility with its own page. All free, no account, no install.

- [Color Converter — HEX, RGB, HSL, OKLCH](https://devzap.io/tools/color-converter.md): Convert any color between HEX, RGB, HSL, and OKLCH instantly. WCAG contrast against white shown live.
- [CSS Box Shadow Generator](https://devzap.io/tools/box-shadow-generator.md): Stack multiple shadow layers and copy production-ready CSS. Inset, spread, opacity — all dialed in live.
- [CSS Gradient Generator](https://devzap.io/tools/css-gradient-generator.md): Build linear, radial, and conic gradients with a live preview. Copy production-ready CSS.
- [CSS Named Colors Reference](https://devzap.io/tools/css-colors.md): All 148 CSS named colors. Searchable, filterable by hue, copy as name, hex, or rgb.
- [CSS Unit Converter — px, rem, em, clamp()](https://devzap.io/tools/css-unit-converter.md): Convert between px, rem, and em with a configurable root, plus build fluid clamp() values for responsive typography.
- [Google Fonts Pairing Tool](https://devzap.io/tools/font-pairing.md): Preview heading and body Google Font combinations live. Copy the @import + font-family in one click.
- [HTML Entities Reference](https://devzap.io/tools/html-entities.md): Searchable list of HTML entities. Copy named, numeric, or hex form with one click.
- [HTTP Status Codes Reference](https://devzap.io/tools/http-status-codes.md): Every HTTP status code with a clear explanation. Bookmark this page.
- [Lorem Ipsum Generator](https://devzap.io/tools/lorem-ipsum-generator.md): Generate paragraphs, sentences, or words of placeholder text. Configure length, copy with one click.
- [Meta Tags Generator](https://devzap.io/tools/meta-tags-generator.md): Generate Basic Meta, Open Graph, and Twitter Cards live. Preview Google SERP and social cards as you type.
- [Redirect Path Builder — nginx, Apache, Vercel, Netlify](https://devzap.io/tools/redirect-path.md): Compose URL redirect rules and export as nginx, Apache, Vercel, or Netlify config in one click.
- [Tailwind Colors Palette Browser](https://devzap.io/tools/tailwind-colors.md): Browse the Tailwind v4 default palette. Copy as utility class, HEX, or OKLCH with one click.
- [WCAG Contrast Checker](https://devzap.io/tools/contrast-checker.md): Check WCAG 2.2 contrast ratios for any pair of colors. Get AA / AAA pass/fail at a glance.

## Extension features

Capabilities available inside the installed Chrome extension. Each has a marketing page documenting use cases and benefits.

- [CSS Inspector & Editor](https://devzap.io/features/css-inspector.md): Inspect any element. Copy clean CSS. Edit live without DevTools.
- [Font Changer](https://devzap.io/features/font-changer.md): Try Google Fonts on any site instantly. Compare pairings without writing a line of CSS.
- [SEO Meta Inspector](https://devzap.io/features/seo-meta-inspector.md): Audit titles, descriptions, OG, Twitter Cards, and structured data on any page in one click.
- [Site Stack Detector](https://devzap.io/features/site-stack.md): See what framework, libraries, and analytics any website is running on.

## Use cases by role

- [Developer](https://devzap.io/use-cases/developer): Inspect, edit, and export from any page without breaking flow.
- [Designer](https://devzap.io/use-cases/designer): See your work as a real browser would render it. Pick a font, picker a color, ship the spec.
- [Marketer](https://devzap.io/use-cases/marketer): Audit any page's SEO and social presence in one click.
- [QA Engineer](https://devzap.io/use-cases/qa): Spot regressions before users do. Inspect anything, verify everywhere.

## Blog

Tutorials, deep dives, and product updates.

- [Open Graph and Twitter Cards: The 2026 Pre-Publish Checklist](https://devzap.io/blog/og-twitter-cards-2026-checklist.md): Every meta tag that controls how your page renders when shared. Updated for what platforms actually use in 2026.
- [Designing for WCAG 2.2 AA in 2026: The Practical Checklist](https://devzap.io/blog/wcag-2-2-aa-2026.md): WCAG 2.2 AA is the de facto baseline in 2026. Here's what it actually means in design and code, with a checklist you can ship against.
- [From HEX to OKLCH: A Practical Migration Guide for Design Systems](https://devzap.io/blog/oklch-migration-guide.md): OKLCH is the perceptually uniform color space modern design systems are converging on. Here's a concrete migration path from HEX/HSL palettes.

## Optional

- [Changelog](https://devzap.io/changelog): release history
- [About](https://devzap.io/about): company / team
- [Full content corpus](https://devzap.io/llms-full.txt): all pages concatenated as plain markdown