The privacy-first developer utility suite & scratchpad with zero server transmission.
Explore 23+ Tools • Report a Bug • Request a Feature • Submit a PR
Why DevScratchpad? Most online formatters and decoders secretly transmit your sensitive API keys, JWT tokens, environment secrets, and customer payloads to remote tracking servers.
DevScratchpad is 100% client-side:
- Zero API Endpoints: Every formatter, parser, hash generator, and converter executes in pure browser JavaScript & WASM.
- Zero Telemetry on Payloads: Your inputs never touch a server or database.
- Auditable & Open-Source: Inspect the network tab or the source code in this repository to verify that no network requests leave your machine.
- ⚡ Next.js 16 & Turbopack: 100% Static Site Generated (SSG) with sub-millisecond TTFB.
- 🎨 Unified Spatial Dark UI: High-contrast pitch-black canvas (
#09090B), elevated cards (#121215), and standardized monospace inputs. - 💻 Monaco Code Editor: VS Code's editor engine built-in with syntax highlighting, auto-wrap, error lines, and dual-pane diff comparison.
- ⏱️ Local Status Bars: Embedded 32px Monaco status footers displaying real-time execution speeds (ms), character volume, and syntax error lines.
- ⌨️ Command Palette: Global Ctrl + K / Cmd + K navigation to jump between tools in milliseconds.
- 🔗 Zero-Backend Sharing: Payloads are serialized directly into URL hash fragments (
#data=...), enabling private sharing with no server storage. - 💾 Local Workspace History: FIFO 15-entry local history buffer and workspace snapshot bookmarking.
| Category | Tool Name | Route | What It Does |
|---|---|---|---|
| Code Formatting | JSON Formatter | /tools/json-formatter |
Multi-indent formatting, minification, and real-time syntax error line tracking. |
| JSON Validator | /tools/json-validator |
Secure, strict JSON syntax validator to catch missing commas and string issues. | |
| XML Formatter | /tools/xml-formatter |
Format, beautify, and minify XML data structures with indentation controls. | |
| SQL Formatter | /tools/sql-formatter |
Multi-dialect query beautifier (PostgreSQL, MySQL, SQLite) with keyword casing. | |
| GraphQL Formatter | /tools/graphql-formatter |
Formats and validates GraphQL queries and schemas using the official AST parser. | |
| Security & Crypto | Base64 & Hex Inspector | /tools/base64-inspector |
Multi-encoding converter, canonical hex dump, and live Data URL image previewer. |
| JWT Decoder | /tools/jwt |
Safely decodes Header, Payload & Signature; auto-converts exp/iat timestamps. |
|
| X.509 Certificate Decoder | /tools/cert-decoder |
Decodes PEM certificates and CSRs with SANs, validity countdown, and fingerprints. | |
| SSH Key Generator | /tools/ssh-key-generator |
In-browser Ed25519/RSA/ECDSA keypair generator with OpenSSH Randomart. | |
| Password Hash & Verifier | /tools/password-hash |
Bcrypt ($2a/$2b), Argon2id, and PBKDF2 hashing and live verification matching. | |
| Hash Generator | /tools/hash |
Computes MD5, SHA-1, SHA-256, and SHA-512 in parallel client-side. | |
| HMAC Generator | /tools/hmac-generator |
Computes SHA256 & SHA512 HMAC signatures in Hex & Base64 for webhook testing. | |
| UUID Generator | /tools/uuid-generator |
Fast bulk v4 UUID generator using the native browser Crypto API. | |
| Network & Time | Cron Visualizer | /tools/cron |
Translates complex cron schedules into plain English with a 5-column breakdown grid. |
| IP / CIDR Calculator | /tools/cidr-calculator |
Calculates IPv4 network address, broadcast, wildcard mask, and usable host bounds. | |
| Code Converters | cURL to Fetch | /tools/curl-to-fetch |
Transforms cURL commands into executable JavaScript (fetch). |
| cURL to Python | /tools/curl-to-python |
Transforms cURL commands into Python (requests). |
|
| JSON to TypeScript | /tools/json-to-ts |
Generates strongly-typed TypeScript interfaces from raw JSON. | |
| JSON to Zod | /tools/json-to-zod |
Generates strict Zod schemas from raw JSON. | |
| SVG to JSX | /tools/svg-to-jsx |
Convert raw SVG code to React JSX functional components. | |
| YAML to JSON | /tools/yaml-to-json |
Convert YAML configurations into JSON payloads. | |
| Diff & Optimization | Diff Checker | /tools/diff |
Monaco side-by-side or inline code diffing with character-level additions. |
| CSS & SVG Minifier | /tools/minifier |
Strips comments and whitespace; displays byte savings and compression ratio. | |
| Regex Tester | /tools/regex |
Real-time RegExp testing with flags (g, i, m, s), match lists. |
- Node.js 18.17+ or 20+
- npm, yarn, or pnpm
# 1. Clone the repository
git clone https://github.com/Saad-web-spec/DevScratchPad.git
# 2. Enter the project directory
cd DevScratchPad
# 3. Install dependencies
npm install
# 4. Start the Turbopack development server
npm run devOpen http://localhost:3000 in your browser.
Deploy your own private, customized instance of DevScratchpad for your team on Vercel:
Contributions, feature ideas, and new utility tools are very welcome! Please check out our Contributing Guide to get started.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingNewTool) - Commit your Changes (
git commit -m 'feat: add amazing new developer tool') - Push to the Branch (
git push origin feature/AmazingNewTool) - Open a Pull Request
If DevScratchpad has saved you time or improved your workflow, consider starring ⭐ this repository and supporting its ongoing development!
Distributed under the MIT License. See LICENSE for more information.
Built with ❤️ by Saad • Powered by Next.js 16 & Monaco Editor