Developer-Toolbox is a professional-grade, offline-first suite of 100+ developer utilities designed to eliminate context-switching and dependency on external web-based formatters. Built with a focus on privacy and performance, every tool runs entirely in your browser—no backend, no tracking, and no data leaves your machine.
🌐 Launch Web App | 📥 Direct Download
Modern development requires constant data transformation, debugging, and visualization. Relying on dozens of fragmented, ad-heavy websites for JSON formatting, JWT decoding, or Regex testing isn't just inefficient—it's a security risk.
Developer-Toolbox solves this by providing:
- Zero Latency: Everything is pre-loaded and runs client-side.
- Privacy First: Data never touches a server. Perfect for sensitive logs or API keys.
- Total Consistency: A unified "Neon" design system across all 100+ tools.
- Visual Feedback: Interactive 3D visualizations (Three.js) for every utility to help conceptualize complex data.
| Feature | Conventional Workflow | The Developer-Toolbox Way |
|---|---|---|
| JSON Formatting | Search Google → Dodge Ads → Paste Data → Risk Leak | Ctrl+L → "JSON" → Instant Format (Local) |
| JWT Debugging | Use online sites → Risk sharing signatures | Local decoding with 3D structural mapping |
| Regex Testing | Multiple tabs for explanation vs testing | Integrated visual builder + path analysis |
| Connectivity | Requires stable internet | Works 100% offline (PWA-ready) |
Developer-Toolbox is built on a "Zero-Build" architecture, ensuring maximum longevity and ease of deployment.
graph TD
A[index.html] --> B[Tool Registry / manifest]
B --> C{Tool Selector}
C --> D[Tool 1: JSON Formatter]
C --> E[Tool 2: Base64 Converter]
C --> F[Tool 100+: WAAPI Playground]
subgraph Shared Core
G[assets/core.css] --- H[Global Themes]
I[assets/core.js] --- J[Storage/Backup Engine]
K[assets/tools-data.js] --- L[Global Search & Keywords]
end
D --- G
E --- G
F --- G
D --- I
Simply visit https://aliriyaj007.github.io/Developer-Toolbox/ and start typing in the search box to find your tool.
- Clone the repo:
git clone https://github.com/Aliriyaj007/Developer-Toolbox.git
- Open index.html:
Simply double-click
index.htmlin your file explorer. Nonpm installor local server required.
Switch dynamically between:
- Neon Glow (Default: High-energy cyberpunk)
- Deep Dark (OLED optimized)
- Solarized (Professional eye-care)
- Light Mode (Crisp print-friendly)
- High Contrast (Accessibility focused)
Save your favorites and custom tags locally. Use the Backup/Restore feature to sync your preferences across different browsers or machines via a simple JSON manifest.
Below is a partial list of the specialized categories available:
| Category | Tools Included |
|---|---|
| Data & Encoding | JSON/YAML/XML, Base64, URL, JWT, Protobuf, CSV |
| Encryption/Security | RSA, Hash (MD5/SHA), SSL Decoder, CORS Debugger |
| Frontend/Design | CSS Grid, Flexbox, Variable Organizer, Type Scale |
| DevOps/Git | .gitignore builder, Docker Linter, Git Hook Builder |
| Performance | Bundle/WASM Analyzer, Lighthouse CI, Memory Leak Simulator |
Full tool specifications can be found in app_details.md.
Developer-Toolbox is a community-first project. Whether it's adding a new 3D visualization or optimizing a parser, contributions are welcome.
- Fork the project.
- Add your tool (use the template in
tool-100+-...html). - Update
assets/tools-data.js. - Open a Pull Request.
Riyajul Ali
Full Stack Developer & Technical Architect
- GitHub: Aliriyaj007
- Email: aliriyaj007@protonmail.com
- LinkedIn: in/Aliriyaj007
- Project Link: https://aliriyaj007.github.io/Developer-Toolbox/
“This project proves its value by existing.” — Code with precision.