https://github.com/mazipan/html-tools
๐ ๏ธ A collection of single-file browser-native utilities. All logic runs client-side โ no backend, no accounts, no data leaves your browser.
https://github.com/mazipan/html-tools
html-tools
Last synced: 4 days ago
JSON representation
๐ ๏ธ A collection of single-file browser-native utilities. All logic runs client-side โ no backend, no accounts, no data leaves your browser.
- Host: GitHub
- URL: https://github.com/mazipan/html-tools
- Owner: mazipan
- License: mit
- Created: 2026-05-06T09:37:45.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2026-06-25T03:41:24.000Z (6 days ago)
- Last Synced: 2026-06-25T05:12:38.938Z (6 days ago)
- Topics: html-tools
- Language: HTML
- Homepage: https://tools.mazipan.space/
- Size: 1.68 MB
- Stars: 4
- Watchers: 0
- Forks: 0
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# HTML Tools
A collection of single-file browser-native utilities. All logic runs client-side โ no backend, no accounts, no data leaves your browser.
[](https://app.netlify.com/projects/mzp-html-tools/deploys)
๐ **Live:** http://tools.mazipan.space/
## Tools
### JSON
| Tool | Description |
|------|-------------|
| ๐๏ธ [JSON Formatter](src/json-formatter.html) | Prettify, minify, and validate JSON with syntax highlighting. |
| ๐ท [JSON to TypeScript](src/json-to-ts.html) | Convert JSON objects into TypeScript interface definitions. |
| ๐ [JSON Diff](src/json-diff.html) | Compare two JSON objects and highlight the differences. |
| ๐ค [JSON Sort](src/json-sort.html) | Sort JSON keys alphabetically or by preset (package.json, tsconfig, composer). |
| ๐ [JSON โ CSV](src/csv-to-json.html) | Round-trip JSON and CSV with smart type inference and delimiter detection. |
| ๐ [JSON โ YAML](src/json-to-yaml.html) | Round-trip JSON and YAML with anchor resolution and multi-document support. |
| ๐ก๏ธ [JSON to Validator Schema](src/json-to-schema.html) | Generate Zod, Valibot, or Yup schemas from a JSON sample. |
### Code
| Tool | Description |
|------|-------------|
| ๐งช [Regex Tester](src/regex-tester.html) | Test JavaScript regular expressions live with capture-group breakdown. |
| โ๏ธ [SVG to JSX](src/svg-to-jsx.html) | Convert SVG markup into React JSX-compatible component code. |
| ๐ท [SVG to Raster](src/svg-rasterizer.html) | Rasterize an SVG to PNG, JPEG, or WebP at any pixel size โ preset sizes, aspect lock. |
| โฑ๏ธ [Cron Decoder](src/cron-decoder.html) | Decode a cron expression into plain English and preview the next 10 run times. |
| ๐ธ [Code Snippet to Image](src/snippet-to-image.html) | Turn code into a sharable PNG card with VS Code-grade syntax highlighting. |
| ๐ [Text Diff](src/text-diff.html) | Compare two plain-text blocks line-by-line with word-level inline highlighting. |
| ๐ [Markdown Preview](src/markdown-preview.html) | Live Markdown editor with GFM support โ tables, task lists, strikethrough. |
| ๐ท๏ธ [SemVer Checker](src/semver-checker.html) | Check if a version satisfies a range โ ^, ~, hyphen, wildcard, and more. |
| ๐ [JWT Decoder](src/jwt-decoder.html) | Decode JWT header, payload, and signature โ timestamps shown as human-readable dates. |
### Ornaments
| Tool | Description |
|------|-------------|
| ๐จ [Gradients](src/gradients.html) | Curated gradient collection โ copy CSS, Tailwind, or export PNG. |
| ๐ซง [Blob Generator](src/blob.html) | Generate organic blob shapes โ CSS border-radius or SVG path. |
| ใฐ๏ธ [Wave Generator](src/waves.html) | Generate SVG wave dividers โ single wave or stacked layers. |
### Image
| Tool | Description |
|------|-------------|
| ๐๏ธ [Image Compressor](src/image-compressor.html) | Compress PNG, JPEG, WebP, and AVIF images โ quality presets or target size in KB. |
| ๐ [Image Resizer](src/image-resizer.html) | Batch-resize images by percentage, exact size, or max dimensions โ social-card presets. |
| โ๏ธ [Image Cropper](src/image-cropper.html) | Crop a region โ rectangle or circle, drag the box, lock an aspect ratio. |
| ๐ผ๏ธ [Image Format Converter](src/image-converter.html) | Convert images between PNG, JPEG, WebP, and AVIF with a quality slider and before/after diff. |
| ๐ [Image Watermark](src/image-watermark.html) | Stamp a text or image watermark onto photos โ position, opacity, rotation, tiling. |
### Audio
| Tool | Description |
|------|-------------|
| ๐ต [MP3 Tag Editor](src/mp3-tag-editor.html) | Edit MP3 tags and album art โ smart-fills Artist/Title from the filename. |
### Web / SEO
| Tool | Description |
|------|-------------|
| ๐ [Meta Tag Preview](src/meta-tag-preview.html) | See how your URL looks as a Twitter, Facebook, LinkedIn, and Google card. |
| ๐ต๏ธ [User Agent Parser](src/user-agent-parser.html) | Break a UA string down into browser, engine, OS, device type, and CPU. |
| ๐ผ๏ธ [OG Image Builder](src/og-image-builder.html) | Design a 1200ร630 social card โ title, subtitle, gradient, logo โ export as PNG. |
### Generators
| Tool | Description |
|------|-------------|
| ๐ฑ [QR Code Generator](src/qr-code-generator.html) | Turn any text, URL, WiFi config, or vCard into a QR code โ export as SVG or PNG. |
| ๐ [Lorem Ipsum Generator](src/lorem-ipsum.html) | Generate placeholder text โ paragraphs, sentences, words, or list items, with flavored dictionaries. |
| ๐ค [Avatar Generator](src/avatar-generator.html) | Generate an initial-based avatar from a name โ choose shape, style, and export as PNG. |
| โญ [Favicon Generator](src/favicon-generator.html) | Drop an image or pick an emoji to generate a full favicon set โ PNG, ICO, maskable, manifest. |
| ๐ชช [UUID Generator](src/uuid-generator.html) | Generate UUID v4 (random) or v7 (time-ordered) in bulk โ copy individually or as a list. |
| ๐ก [Wheel of Names](src/wheel-of-names.html) | Add names, spin the wheel, and let chance decide โ remove winners for elimination-style draws. |
### PDF
| Tool | Description |
|------|-------------|
| ๐ [PDF Merger](src/pdf-merger.html) | Combine multiple PDFs into one โ reorder pages, pick page ranges, add bookmarks. |
| ๐ [Image to PDF](src/image-to-pdf.html) | Combine PNG, JPEG, or WebP images into a single PDF โ page size, fit, margin, drag-to-reorder. |
| ๐ค [PDF Compressor](src/pdf-compressor.html) | Shrink PDFs in-browser by re-encoding embedded JPEG images โ text stays selectable. |
| โ๏ธ [PDF Splitter](src/pdf-splitter.html) | Extract selected pages into one PDF or split to per-page files as a zip. |
| ๐๏ธ [PDF Page Manager](src/pdf-page-manager.html) | Reorder, rotate, and delete PDF pages โ text stays selectable, undo/redo included. |
| ๐ง [PDF Watermark](src/pdf-watermark.html) | Stamp a text or image watermark onto PDF pages โ position, opacity, rotation, tiling. |
| โ๏ธ [PDF Signature](src/pdf-signature.html) | Draw, type, or upload a signature and stamp it onto any page of a PDF. |
| ๐ผ๏ธ [PDF to Image](src/pdf-to-image.html) | 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](src/pomodoro-timer.html) | 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](https://tools.mazipan.space/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`](src/styles.css). See [AGENTS.md](AGENTS.md) for the migration policy.
## Development
```bash
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](https://parceljs.org/) โ zero-config bundler
- [Tailwind CSS v4](https://tailwindcss.com/) โ utility-first CSS
- Vanilla JS โ no runtime framework
## Adding a new tool
See [`.ai/CONTRIBUTING.md`](.ai/CONTRIBUTING.md) for the full checklist.