Zykit

Private tools and learning material that run entirely in the browser: developer, data, text, web, security and image tools, a software-engineering course and a blog. Nothing you paste or open is uploaded, and there is no backend, account or tracking.

Live at zykit.vercel.app.

• Tools (/, /tools/<tool-id>): the list below. The home page has search (press /) and category filters.
• Learn (/learn): 9 subjects, 176 lessons with runnable examples, 151 solved DSA problems and 9 system design case studies. See Learn.
• Blog (/blog): guides, including the Claude Code plugins used to build the site.

Tools

115 tools in 12 categories. Each tool's README covers its code, limits and tests; the user guide (how to use, limits, privacy, FAQs) is on its page on the site.

Images (13)

Tool	What it does	Docs
Clean Image	See the EXIF, GPS, XMP, IPTC, C2PA and AI-generation data inside JPEG, PNG and WebP files, then strip it without re-encoding.	README
Image Compressor	Compress photos with a quality slider and optional max size, compare before and after, and download one file or a ZIP of the whole batch. Nothing is uploaded.	README
Image Resizer	Resize one image or a batch with the aspect ratio locked, by percentage, or to fit, fill or cover a size. Presets for 1080p, 4K, Instagram, Twitter headers and favicons.	README
Image Converter	Convert images between PNG, JPEG, WebP and AVIF, with a background colour for transparent areas and a quality setting. Reads any format your browser can open. Batch and ZIP download.	README
Image to Base64	Turn an image into a Base64 data URI, CSS background or HTML img tag, or paste Base64 to preview and download the image. The file type is detected from its bytes.	README
SVG Optimizer	Strip editor metadata, comments and default attributes, round path numbers and remove scripts and event handlers from SVGs. Preview safely and compare sizes.	README
Favicon Generator	Generate a multi-size favicon.ico, PNG favicons, an Apple touch icon, Android icons, a web manifest and the HTML link tags from an image, text or emoji. Download everything as a ZIP.	README
Image Editor	Crop, rotate, flip, resize, sharpen and adjust brightness, contrast, saturation and colour, then export as PNG, JPEG or WebP.	README
Color Palette Extractor	Extract 3 to 12 dominant colours from an image with k-means in OKLab or median cut, see each colour’s share and WCAG contrast, and copy them as CSS variables, SCSS, a Tailwind theme or JSON.	README
Image Diff	Compare two images side by side, with a slider, onion skin, blink or a difference heatmap. Set a tolerance, ignore anti-aliasing, see the changed pixel count and download the diff as PNG. Nothing is uploaded.	README
Placeholder Image Generator	Create placeholder images with custom size, colours and text, and download them as PNG, JPEG, WebP or SVG.	README
QR Code Reader	Decode QR codes from an image, screenshot or paste and see the content, with links and Wi-Fi details shown safely.	README
Signature Pad	Draw or type your signature and download it as a transparent PNG or SVG to place on documents.	README

Data (18)

Tool	What it does	Docs
JSON Formatter	Pretty-print or compact JSON, sort keys, and find the exact line and column of syntax errors.	README
JSON to TypeScript	Paste JSON and get TypeScript interfaces or type aliases, with nested types, optional fields and union types inferred from the data.	README
JSON Diff	See exactly which keys and values were added, removed or changed between two JSON documents, ignoring key order and formatting.	README
JSON to SQL	Convert an array of JSON objects into CREATE TABLE and INSERT statements for PostgreSQL, MySQL, SQLite or SQL Server.	README
YAML ↔ JSON	Convert YAML to JSON and JSON to YAML, with multi-document YAML, anchors and aliases resolved, and precise error locations.	README
XML ↔ JSON	Convert XML to JSON and back, with attributes, text nodes, repeated elements and namespaces handled predictably.	README
CSV ↔ JSON	Convert CSV or TSV to JSON and JSON arrays to CSV, with delimiter detection, quoted fields, headers and type inference.	README
CSV Viewer	Open a CSV or TSV file as a table, sort and filter columns, and see column statistics, all on your device.	README
JSONPath Query	Run JSONPath expressions against pasted JSON and see the matching values and their paths as you type.	README
JSON Schema Validator	Validate JSON documents against JSON Schema (draft 2020-12 and 7) with clear error paths, or infer a schema from sample data.	README
Mock Data Generator	Generate fake users, emails, addresses, companies and more as JSON, CSV or SQL for testing and prototypes.	README
Query CSV with SQL	Load CSV files into an in-browser SQLite database and query, join and aggregate them with SQL. Nothing is uploaded.	README
JSON to Code	Paste JSON and get typed models: Go structs with json tags, Python dataclasses or Pydantic, Rust serde structs, Java records or POJOs with Jackson, C# with System.Text.Json and Kotlin with kotlinx.serialization.	README
Log Viewer	Open NDJSON or plain log files to filter by level, field and text, sort by time and inspect each entry, without uploading.	README
TOML ↔ JSON	Convert TOML config files to JSON and JSON back to TOML, with precise error locations and dates handled correctly.	README
JSON Tree Viewer	Browse big JSON files as an expandable tree with search, path copy, type badges and array counts, without uploading them.	README
XML Formatter	Pretty-print or minify XML, find syntax errors by line and column, and test XPath expressions in your browser.	README
Excel to CSV / JSON	Open an Excel workbook, preview each sheet and export it as CSV, TSV or JSON, without uploading the file.	README

Code (11)

Tool	What it does	Docs
Diff Checker	See what changed between two versions of text or code, with word-level highlights, side-by-side or unified.	README
JS Runner	Write or paste code and run it in an isolated worker with console output, a time limit and no network access.	README
Regex Tester	Write a JavaScript regex, see every match and capture group highlighted, try replacements and get flags explained.	README
SQL Formatter	Format SQL for PostgreSQL, MySQL, SQLite, SQL Server, BigQuery and more, with keyword case and indentation options.	README
Semver Checker	Test whether versions satisfy npm-style ranges like ^1.2.0 or ~2.x, compare and sort versions, and see ranges explained.	README
String Escaper	Escape or unescape text for JSON, JavaScript, SQL, regex, shell, C, CSV, XML and URL contexts.	README
CSS Generator	Visually build CSS gradients, box and text shadows, border radius, clamp() fluid sizes and cubic-bezier easings, and copy the code.	README
GraphQL Formatter	Pretty-print or minify GraphQL queries and schemas, with syntax errors shown at the exact line and column.	README
Protobuf Decoder	Decode Protocol Buffers wire-format messages from hex or Base64 without a .proto file, showing field numbers, types and nested messages.	README
Keyboard Event Viewer	Press keys and inspect each keydown and keyup: key, code, legacy keyCode, location, modifiers, Caps Lock, repeat and composition. Copy the history as JSON or Markdown. Nothing is sent anywhere.	README
HTML & CSS Minifier	Shrink HTML and CSS by removing comments and whitespace without touching strings, pre blocks or scripts, or beautify them again, with before and after sizes including gzip.	README

Converters (8)

Tool	What it does	Docs
Encode / Decode	Convert text to and from Base64, Base64URL, URL encoding, HTML entities and hex, with full Unicode support.	README
Timestamp Converter	Convert Unix seconds or milliseconds to dates in any time zone and back, with ISO 8601, RFC 2822 and relative times.	README
Color Converter	Convert colours between HEX, RGB, HSL, HWB, OKLCH and more, check WCAG contrast, and build palettes with colour-blindness previews.	README
Number Base Converter	Convert numbers between bases, see two's complement and IEEE-754 float bits, and run bitwise operations.	README
Date Calculator	Find the time between two dates, add or subtract durations, and count business days with optional holidays.	README
Unit Converter	Convert between units of data size (KB/KiB), length, mass, temperature, time, speed, area and more.	README
Time Zone Meeting Planner	Compare cities side by side, see overlapping working hours and pick a meeting time that works for everyone, with DST handled.	README
Aspect Ratio Calculator	Find the aspect ratio of any width and height, scale dimensions without distortion, and use common presets like 16:9 and 4:3.	README

Calculators (4)

Tool	What it does	Docs
Loan / EMI Calculator	Calculate the monthly EMI, total interest and full repayment schedule for a loan, and see how prepayments save interest.	README
Percentage Calculator	Work out percentages, percentage change, discounts, margins and markups, and add or remove GST/VAT.	README
SIP & Compound Interest Calculator	Calculate SIP returns, lump-sum compound growth and step-up SIPs, with a year-by-year table and chart.	README
Age Calculator	Find your exact age in years, months, days and more, the day you were born and how long until your next birthday.	README

Network & HTTP (9)

Tool	What it does	Docs
URL Parser	Inspect protocol, host, path, query parameters and fragment, edit parameters and rebuild the URL.	README
HTTP Status Codes	Search every standard HTTP status code with a plain-language explanation of what it means and when to use it.	README
MIME Type Lookup	Find the MIME type for a file extension or the extensions for a MIME type, from a built-in list of common types.	README
cURL ↔ Fetch	Turn a cURL command into JavaScript fetch, Node, axios or Python requests code, and convert fetch calls back into cURL.	README
User-Agent Parser	Parse a User-Agent string into browser, engine, operating system and device, including bots and crawlers.	README
HTTP Headers Inspector	Paste raw HTTP headers to see what each one does, check security and caching headers and spot common mistakes.	README
IP / CIDR Calculator	Calculate network and broadcast addresses, masks, host ranges and counts for any CIDR, and check whether an IP is in a range.	README
SPF / DKIM / DMARC Checker	Paste SPF, DKIM, DMARC, MTA-STS or BIMI TXT records to validate them, spot mistakes and see what each part means.	README
HAR Viewer	Open a HAR file to see every request with timing waterfall, sizes, status codes and headers, and find the slowest calls, all locally.	README

DevOps & Config (8)

Tool	What it does	Docs
UUID Generator	Create random (v4) or time-ordered (v7) UUIDs, one or thousands at a time, and validate or inspect any UUID.	README
Cron Expression Builder	Build cron expressions visually, get them explained in plain English and see the next run times.	README
chmod Calculator	Convert Unix file permissions between symbolic (rwxr-xr-x) and octal (755), including setuid, setgid and sticky bits.	README
.env Diff	Compare two .env files to find missing, extra and changed keys, catch duplicates and syntax problems, with values masked.	README
docker run ↔ Compose	Turn docker run commands into a docker-compose.yml service (ports, volumes, env, health checks, resources), or a Compose service back into docker run commands, with warnings for anything that does not map.	README
Kubernetes YAML Checker	Paste Kubernetes YAML to check structure and best practices: resource limits, image tags, probes, security context and more.	README
.gitignore Generator	Combine presets for languages, frameworks, editors and operating systems into one clean .gitignore, and test paths against it.	README
nginx Config Generator	Generate nginx configs for static sites, SPAs, reverse proxies and redirects, with HTTPS, gzip, caching and security headers.	README

Security (13)

Tool	What it does	Docs
JWT Decoder	Read a JWT's header, payload and claims, check expiry, and verify HMAC, RSA or ECDSA signatures with your key.	README
Hash Generator	Compute MD5, SHA-1, SHA-256, SHA-384 and SHA-512 hashes, or HMACs with a secret key, as you type.	README
Password Generator	Generate passwords or passphrases with the browser's secure random generator, and see how strong they are.	README
Random String Generator	Generate random strings from any character set: hex, Base64, alphanumeric or your own, in any length and quantity.	README
JWT Generator	Build a JWT from a header and claims and sign it with HMAC, RSA or ECDSA using a key you provide or generate locally.	README
Certificate Inspector	Inspect X.509 certificates, CSRs and public keys: subject, issuer, validity, SANs, key type and fingerprints.	README
TOTP Generator	Generate time-based one-time passwords (TOTP/HOTP) from a secret or otpauth:// URI to test two-factor authentication.	README
Encrypt / Decrypt Text	Encrypt and decrypt text with a passphrase using AES-256-GCM and PBKDF2 in your browser, to share secrets safely.	README
SSH Key Generator	Create Ed25519, ECDSA or RSA key pairs in OpenSSH format in your browser, with fingerprints and an authorized_keys line.	README
Email Header Analyzer	Paste raw email headers to see every hop and delay, the SPF, DKIM and DMARC results, and warning signs of spoofing.	README
Password Strength Checker	Estimate a password's strength and crack time, and spot weak patterns like dictionary words, dates and keyboard runs, without it leaving your browser.	README
CSP Builder	Build a Content-Security-Policy header directive by directive, get warnings for risky settings, and copy it for your server or meta tag.	README
Bcrypt Generator	Generate bcrypt hashes with a chosen cost and check a password against an existing hash. It runs in a Web Worker in your browser and nothing is uploaded or saved.	README

Text (12)

Tool	What it does	Docs
Slug Generator	Convert any text into a clean URL slug, with accents removed, a choice of separator and optional length limit.	README
Case Converter	Convert text between camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE, Title Case, sentence case and more.	README
Word Counter	Count words, characters, sentences, paragraphs and lines, with reading time and the most frequent words.	README
Markdown Editor	Edit Markdown side by side with a safe live preview, GitHub-flavoured tables and task lists, and export to HTML.	README
Text Cleaner	Clean up text: remove duplicate or empty lines, trim and collapse whitespace, sort, reverse and number lines.	README
Find & Replace	Search text with plain words or regular expressions, preview every replacement and apply them all at once.	README
Unicode Inspector	Inspect text character by character: code points, names, categories, invisible characters, look-alike letters and normalization.	README
Lorem Ipsum Generator	Generate lorem ipsum or plain-English placeholder text by paragraphs, sentences or words, with HTML or Markdown output.	README
HTML to Markdown	Paste HTML or rich text and get tidy Markdown with headings, lists, links, tables and code blocks preserved.	README
Markdown Table Generator	Create Markdown tables from CSV, JSON or a grid editor, align columns and pretty-print existing tables.	README
Morse Code Translator	Translate text to Morse code and back, play it as audio or light at your chosen speed, and learn the alphabet.	README
Text to Speech	Have text read aloud using the voices built into your device, with speed, pitch and voice choice. The text stays in the page, but some voices are processed by your browser or OS vendor.	README

Web (9)

Tool	What it does	Docs
Meta Tag Inspector	Paste a page's HTML to review its title, description, canonical, Open Graph and Twitter tags, with preview cards.	README
UTM Builder	Add utm_source, utm_medium, utm_campaign and more to a URL, with presets and consistent formatting.	README
URL Cleaner	Remove utm_*, fbclid, gclid and other tracking parameters from URLs, one or many at a time.	README
Robots.txt Generator	Build a robots.txt with rules per crawler, test whether a URL is allowed, and block AI crawlers if you want.	README
Sitemap Generator	Paste URLs to generate a valid sitemap.xml with lastmod, changefreq and priority, split into files when it's large.	README
QR Code Generator	Generate QR codes for URLs, text, Wi-Fi logins, email and contact cards, and download them as PNG or SVG.	README
JSON-LD Generator	Generate JSON-LD structured data for articles, products, FAQs, organisations, events, breadcrumbs and more, ready to paste into a page.	README
Open Graph Image Generator	Design Open Graph and Twitter card images from a title, colours and an optional logo, and download them as PNG.	README
Barcode Generator	Generate barcodes in Code 128, Code 39, EAN-13, EAN-8, UPC-A and ITF with check digits, and download them as PNG or SVG.	README

Documents (7)

Tool	What it does	Docs
PDF Merge & Split	Combine PDFs, split or extract pages, reorder and rotate them, all in your browser without uploading.	README
PDF Metadata Cleaner	Inspect a PDF's author, software, dates and XMP metadata, then remove it without changing the pages. Nothing is uploaded.	README
Office Metadata Cleaner	Inspect and remove author, company, revision, comments and custom properties from .docx, .xlsx and .pptx files, locally.	README
Images to PDF	Turn photos or scans into a single PDF with page size, margins, orientation and order you choose, all in your browser.	README
Duplicate File Finder	Select files or a folder to find exact duplicates by SHA-256 hash, see wasted space and export a report. Files never leave your device.	README
Invoice Generator	Fill in your business, client and line items to produce a clean PDF invoice with taxes and totals. Nothing is uploaded.	README
PDF to Images	Turn every page of a PDF into JPG, PNG or WebP images at the resolution you choose, and download them as a ZIP. Nothing is uploaded.	README

Productivity (3)

Tool	What it does	Docs
Stopwatch & Timer	A precise stopwatch with laps, a countdown timer with alerts and a Pomodoro focus timer, all in your browser.	README
Notepad	Write notes that save automatically in this browser, with search, Markdown preview and export to .txt or .md.	README
Random Picker	Pick random names, split a list into teams, shuffle, flip a coin or roll dice, using fair randomness.	README

To add one, see docs/adding-a-tool.md.

Project structure

src/
├── main.tsx                 entry: theme + router
├── app/                     site shell: router (tools, /learn, /blog), Layout (header, footer, page metadata)
├── pages/                   HomePage (tool directory with search), NotFoundPage
├── config/                  site.ts (name, URL), seo.ts (titles, descriptions, structured data)
├── shared/                  code any tool can use
│   ├── ui/                  Button, Card, Badge, Icon, Tabs, Panel, Select, Headline, ThemeToggle…
│   │   ├── tool.tsx         Breadcrumb, CodeArea, CodeBlock, CopyButton, Segmented
│   │   └── convert.tsx      Checkbox, OptionsCard, ErrorPanel, OutputPanel, Notices, OpenFileButton
│   ├── hooks/               useMediaQuery, useDocumentMeta
│   ├── lib/                 bytes, CRC-32, inflate, hashes, csv, random (unbiased), textpos (error positions)
│   └── utils/               formatting, theme, download, tool search
├── styles/index.css         design tokens (palette, fonts), scrollbars, phone input sizing
├── tools/
│   ├── types.ts             ToolDefinition
│   ├── registry.ts          the list of tools ← register new tools here
│   └── <tool-id>/           index.ts (definition), <Name>Page.tsx, features/ (pure logic), components/, hooks/, workers/
├── learn/                   the course: content/, data/ (catalog + loaders), pages/, components/, features/, hooks/
└── blog/                    posts/, registry.ts, pages/
scripts/
├── seo-plugin.ts            build step: a static HTML page per tool, lesson and post, plus sitemap.xml
├── learn-pages.ts           static bodies for Learn pages
├── generate-learn-catalog.ts  Learn catalog, search index and counts (runs before every build)
└── generate-readme-tools.ts   the tool list in this README
public/sandbox/              sandboxed page that runs lesson examples needing a real DOM
tests/                       unit tests (Vitest): tests/tools/<tool-id>/, tests/learn/, tests/shared/
e2e/                         browser tests (Playwright): one spec per tool, plus home and learn-*
docs/                        adding-a-tool.md, search-console.md, claude-code-plugins.md (per-tool docs live in src/tools/<tool-id>/)

Third-party code

Everything else is written from scratch. These libraries are each loaded only when the tool that needs them is opened:

Library	Used by
sucrase	JS Runner and Learn (TypeScript → JavaScript)
yaml	YAML ↔ JSON
sql-formatter	SQL Formatter
marked + dompurify	Markdown Editor (every preview is sanitized)
sql.js	Query CSV with SQL (SQLite compiled to WebAssembly; only its worker may compile WebAssembly, see vercel.json)
pdf-lib	PDF Merge & Split (runs in a worker)

Privacy

• No backend, uploads, database, analytics or telemetry. Every tool processes data locally; heavy or risky work (regex matching, diffs, CSV parsing, code execution) runs in Web Workers with time limits.
• Tools that would normally fetch a URL (meta tags, HTTP headers) work on pasted content instead, because the site never contacts other servers.
• A strict Content Security Policy (connect-src 'self') ships for Netlify/Cloudflare (public/_headers) and Vercel (vercel.json).
• The e2e suite asserts that every tool makes only same-origin GET requests for the app's own assets, and has no sideways scrolling at 320 px.
• Learn and progress data (topic status, bookmarks, solved problems) and a few drafts are kept in localStorage only.

Development

Requires Node 20.19+ (nvm use reads .nvmrc).

npm install
npm run dev          # http://localhost:5173
npm test             # unit tests
npm run test:e2e     # browser tests against the production build (first run: npx playwright install chromium)
npm run lint
npm run typecheck
npm run build        # static site in dist/ (also regenerates the Learn catalog)
npm run generate:readme   # refresh the tool list in this README

Developed with Claude Code and a set of plugins (superpowers, frontend-design, context7, code-review, code-simplifier, claude-mem, context-mode). See docs/claude-code-plugins.md for what each one does, how to install it and when to use it. The same guides are on the site's blog (/blog); posts live in src/blog/posts/ and are registered in src/blog/registry.ts.

Deployment

npm run build produces a fully static dist/. Tool pages use client-side routes, so the host must serve index.html for unknown paths. That's already configured for Netlify/Cloudflare Pages (public/_redirects) and Vercel (vercel.json). Keep the security headers from the same files. /sandbox/* needs its own CSP instead of the site-wide one (lesson examples that use the DOM run there). Vercel and Cloudflare Pages support that; Netlify merges the two policies, so those examples won't run there.

On Vercel, vercel.json maps clean URLs (/tools/jwt-decoder) to the pre-rendered .html pages with rewrites instead of cleanUrls, so real files such as the Google Search Console verification file (public/google*.html) are served at their exact URL without a redirect. See docs/search-console.md for getting the site indexed.

Learn

/learn is a software-engineering course migrated from EngineeringWiki: 9 subjects (JavaScript, TypeScript, DSA, Web Fundamentals, Backend, Databases, System Design, Software Architecture, AWS Cloud), 176 lessons, 151 solved DSA problems and 9 system design case studies. Progress, bookmarks and solved problems are kept in the browser only.

• Content lives in src/learn/content/ as plain TypeScript data (types in src/learn/types/). Edit or add lessons there; pages never hard-code content.
• Catalog: npm run generate:learn rebuilds src/learn/data/*.generated.ts (titles, links, search index, counts). It also runs before every build, and a unit test fails if it's out of date.
• Loading: pages list content from the small catalog and load one subject, problem file or case study at a time (src/learn/data/index.ts), so the ~3 MB of lessons never ships up front. Never import src/learn/content/index.ts from the app.
• Runnable examples use the JS Runner's worker. Examples that need a real page (document, alert, localStorage…) run in a sandboxed iframe at /sandbox/dom, which has its own CSP (see vercel.json) and no network access.
• SEO: the build writes a static HTML page with the full text of every lesson, problem and case study, and lists them in sitemap.xml (scripts/learn-pages.ts, called from scripts/seo-plugin.ts).
• Tests: tests/learn/ (content integrity: unique ids, every cross-link resolves, every item loads) and e2e/learn-*.spec.ts.

Clean Image

• Inspects EXIF (GPS, camera, dates, thumbnails), XMP, IPTC, JPEG comments, PNG text chunks, ICC, C2PA and trailing data, plus encoding details, checksums and raw bytes.
• Labels AI and provenance metadata (C2PA, IPTC digital source type, "Made with Google AI", generator parameters). These are labels, not a detection verdict.
• Cleans losslessly by removing metadata containers and copying image data byte for byte. Two modes are available, and orientation can be preserved.
• Verifies the output by re-parsing it, diffing the metadata, checking dimensions and image-data identity, and test-decoding it in the browser.
• Doesn't touch pixels, so it doesn't remove invisible watermarks (e.g. SynthID) and doesn't change AI-detector results.

Developer docs (architecture, what is removed and kept, how privacy is enforced): src/tools/clean-image/README.md.

Contributing

Contributions are welcome. Read CONTRIBUTING.md for setup, project rules and the pull request process, and follow the Code of Conduct. Report security issues privately as described in SECURITY.md.

License

MIT