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.
83 tools in 10 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.
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
To add one, see docs/adding-a-tool.md.
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>/)
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) |
- 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
GETrequests 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
localStorageonly.
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 READMEDeveloped 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.
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 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 insrc/learn/types/). Edit or add lessons there; pages never hard-code content. - Catalog:
npm run generate:learnrebuildssrc/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 importsrc/learn/content/index.tsfrom 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 (seevercel.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 fromscripts/seo-plugin.ts). - Tests:
tests/learn/(content integrity: unique ids, every cross-link resolves, every item loads) ande2e/learn-*.spec.ts.
- 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.
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.