CodeKitBase

Free web developer tools,
running entirely in your browser.

No file uploads, no server, no data logging.
Format, convert, encode, test and generate code instantly.

📄 JSON / Data Tools

✨

JSON Prettify / Minify / Validate

Format, compress and validate JSON with detailed error messages.

Live · P0
🔁

JSON ↔ YAML Converter

Convert JSON to YAML and back without sending data anywhere.

Live · P0
📊

JSON ↔ CSV Converter

Flatten JSON arrays into CSV and parse CSV rows back into JSON.

Live · P3
🧩

JSON Diff

Compare two JSON documents and highlight structural differences.

Live · P2
📐

JSON Schema Generator

Infer a JSON Schema from an example document.

Live · P3

🎨 CSS Style Tools

🪄

CSS Beautify & Minifier

Format messy CSS or minify it for production.

Live · P0
🎨

Color Converter + WCAG

Hex ↔ RGB ↔ HSL ↔ OKLCH plus contrast ratio checker.

Live · P0
💿

CSS Box Shadow Generator

Tweak sliders and ship the shadow CSS instantly.

Live · P2
🔀

CSS Transform Generator

Build translate / rotate / scale / skew transforms visually.

Live · P3
🔎

CSS Filter Generator

Adjust blur, contrast, saturate and more with live preview.

Live · P3
📏

CSS Unit Converter

px ↔ rem ↔ em ↔ vw ↔ vh at your reference font-size.

Live · P3
🔲

CSS Grid Generator

Draw a grid layout and copy the CSS.

Live · P3
🪟

Glassmorphism Generator

Generate the backdrop-filter CSS for glass UI cards.

Live · P3
🏷️

CSS Named Colors Reference

Clickable list of all 148 named CSS colors.

Live · P3

🌐 HTML / JS Code Tools

🧼

HTML Prettify & Minifier

Beautify or minify HTML markup locally.

Live · P0
🧹

JS / TS Prettify & Minify

Format and compress JavaScript or TypeScript code.

Live · P3
🏷️

Meta Tag / OG Generator

Build Open Graph, Twitter Card and basic meta tags.

Live · P2
🎯

CSS Selector Tester

Test a selector against an HTML snippet and count matches.

Live · P3

🔐 Encode / Decode / Crypto

🔡

Text Base64 Encode / Decode

Encode any UTF-8 string to Base64 and decode back.

Live · P0
🖼️

Image → Base64 Encoder

Drop an image, get a full data URI, all in your browser.

Live · P0
🔗

URL Parser / Encode Decoder

Break down any URL, percent-encode and decode components.

Live · P0
🧪

Regex Tester

Test JavaScript regular expressions with match groups.

Live · P2
🎟️

JWT Parser / Decoder

Decode JWT header and payload without a server.

Live · P2
🔒

Hash Generator (SHA256 / MD5)

Compute SHA-1 / SHA-256 / SHA-384 / SHA-512 / MD5 locally.

Live · P3

⏱️ Utilities & Generators

🕒

Timestamp Converter

Unix epoch ↔ ISO 8601 ↔ local time.

Live · P2
🆔

UUID / GUID Generator

Generate v4 UUIDs in bulk.

Live · P2
🔤

Slug Generator

Turn any title into a URL-safe slug.

Live · P3
🔣

Unicode Inspector

Break down any character into code points.

Live · P3

🖼️ Image & Icon Tools

💠

Favicon Generator

Resize an image to the classic favicon sizes.

Live · P2
🏞️

Placeholder Image Generator

Render colored placeholder PNGs directly in canvas.

Live · P3
📱

QR Code Generator

Generate QR codes locally in canvas.

Live · P3

📚 Reference Cheat Sheets

📡

HTTP Status Codes

Browse all HTTP status codes with meanings.

Live · P3
📎

MIME Type Lookup

Map file extensions to MIME types and vice versa.

Live · P3

Why CodeKitBase?

🔒 Privacy by default

Every tool processes your data inside your browser. Your JSON, tokens, CSS and files never touch a server.

⚡ Fast & lightweight

No frameworks, no bloated tracking. Zero default JavaScript. Pages load fast and stay fast.

🌍 Works offline

Once loaded, each tool keeps working even if you unplug from the network. PWA support is planned.

🎯 Built for developers

Toolkit selected around real-world dev workflows — JSON, CSS, JWT, regex, URL, encoding, all in one place.