HTML Tools

A collection of single-file browser-native utilities. All logic runs client-side — no backend, no accounts, no data leaves your browser.

🌐 Live: http://tools.mazipan.space/

Tools

JSON

Tool	Description
🗂️ JSON Formatter	Prettify, minify, and validate JSON with syntax highlighting.
🔷 JSON to TypeScript	Convert JSON objects into TypeScript interface definitions.
🔍 JSON Diff	Compare two JSON objects and highlight the differences.
🔤 JSON Sort	Sort JSON keys alphabetically or by preset (package.json, tsconfig, composer).
📊 JSON ↔ CSV	Round-trip JSON and CSV with smart type inference and delimiter detection.
📝 JSON ↔ YAML	Round-trip JSON and YAML with anchor resolution and multi-document support.
🛡️ JSON to Validator Schema	Generate Zod, Valibot, or Yup schemas from a JSON sample.

Code

Tool	Description
🧪 Regex Tester	Test JavaScript regular expressions live with capture-group breakdown.
⚛️ SVG to JSX	Convert SVG markup into React JSX-compatible component code.
📷 SVG to Raster	Rasterize an SVG to PNG, JPEG, or WebP at any pixel size — preset sizes, aspect lock.
⏱️ Cron Decoder	Decode a cron expression into plain English and preview the next 10 run times.
📸 Code Snippet to Image	Turn code into a sharable PNG card with VS Code-grade syntax highlighting.
📄 Text Diff	Compare two plain-text blocks line-by-line with word-level inline highlighting.
📝 Markdown Preview	Live Markdown editor with GFM support — tables, task lists, strikethrough.
🏷️ SemVer Checker	Check if a version satisfies a range — ^, ~, hyphen, wildcard, and more.
🔑 JWT Decoder	Decode JWT header, payload, and signature — timestamps shown as human-readable dates.

Ornaments

Tool	Description
🎨 Gradients	Curated gradient collection — copy CSS, Tailwind, or export PNG.
🫧 Blob Generator	Generate organic blob shapes — CSS border-radius or SVG path.
〰️ Wave Generator	Generate SVG wave dividers — single wave or stacked layers.

Image

Tool	Description
🗜️ Image Compressor	Compress PNG, JPEG, WebP, and AVIF images — quality presets or target size in KB.
📐 Image Resizer	Batch-resize images by percentage, exact size, or max dimensions — social-card presets.
✂️ Image Cropper	Crop a region — rectangle or circle, drag the box, lock an aspect ratio.
🖼️ Image Format Converter	Convert images between PNG, JPEG, WebP, and AVIF with a quality slider and before/after diff.
🔏 Image Watermark	Stamp a text or image watermark onto photos — position, opacity, rotation, tiling.

Audio

Tool	Description
🎵 MP3 Tag Editor	Edit MP3 tags and album art — smart-fills Artist/Title from the filename.

Web / SEO

Tool	Description
🔍 Meta Tag Preview	See how your URL looks as a Twitter, Facebook, LinkedIn, and Google card.
🕵️ User Agent Parser	Break a UA string down into browser, engine, OS, device type, and CPU.
🖼️ OG Image Builder	Design a 1200×630 social card — title, subtitle, gradient, logo — export as PNG.

Generators

Tool	Description
📱 QR Code Generator	Turn any text, URL, WiFi config, or vCard into a QR code — export as SVG or PNG.
📜 Lorem Ipsum Generator	Generate placeholder text — paragraphs, sentences, words, or list items, with flavored dictionaries.
👤 Avatar Generator	Generate an initial-based avatar from a name — choose shape, style, and export as PNG.
⭐ Favicon Generator	Drop an image or pick an emoji to generate a full favicon set — PNG, ICO, maskable, manifest.
🪪 UUID Generator	Generate UUID v4 (random) or v7 (time-ordered) in bulk — copy individually or as a list.
🎡 Wheel of Names	Add names, spin the wheel, and let chance decide — remove winners for elimination-style draws.

PDF

Tool	Description
📄 PDF Merger	Combine multiple PDFs into one — reorder pages, pick page ranges, add bookmarks.
📑 Image to PDF	Combine PNG, JPEG, or WebP images into a single PDF — page size, fit, margin, drag-to-reorder.
🤏 PDF Compressor	Shrink PDFs in-browser by re-encoding embedded JPEG images — text stays selectable.
✂️ PDF Splitter	Extract selected pages into one PDF or split to per-page files as a zip.
🗂️ PDF Page Manager	Reorder, rotate, and delete PDF pages — text stays selectable, undo/redo included.
💧 PDF Watermark	Stamp a text or image watermark onto PDF pages — position, opacity, rotation, tiling.
✍️ PDF Signature	Draw, type, or upload a signature and stamp it onto any page of a PDF.
🖼️ PDF to Image	Rasterise PDF pages to PNG, JPEG, or WebP at 72–300 DPI — select pages, download individually or as a zip.

Time

Tool	Description
🍅 Pomodoro Timer	Focus timer that cycles work and breaks — configurable durations, sound, and desktop alerts.

Design system

Shared UI components (buttons, pills, chips, inputs, cards, disclosures, etc.) are catalogued at /design-system — a contributor reference page demoing every shared class. Reach for these classes first when building a new tool; the canonical CSS lives in src/styles.css. See AGENTS.md for the migration policy.

Development

bun install
bun run dev      # dev server with hot reload
bun run build    # production build → dist/

Requires Bun 1.2+ (see .bun-version).

Stack

• Parcel 2 — zero-config bundler
• Tailwind CSS v4 — utility-first CSS
• Vanilla JS — no runtime framework

Adding a new tool

See .ai/CONTRIBUTING.md for the full checklist.