A comprehensive collection of web-based tools for developers. This project provides a toolkit that developers can access via GitHub Pages to perform common development tasks more efficiently.
- Overview
- Available Tools
- Features
- Installation
- Usage
- Project Structure
- Contributing
- License
- Troubleshooting
Devtools is designed to streamline common development tasks by providing a suite of web-based utilities that can be accessed directly from your browser. Whether you're working on front-end, back-end, or DevOps tasks, these tools help you save time and improve productivity.
- API Mock Data Generator - Generate realistic mock data for API testing
- ASCII <> HEX Converter - Convert between ASCII text and hexadecimal representation
- Backslash Escape/Unescape - Escape and unescape backslashes in text
- Base64 Encoder/Decoder - Encode and decode text using Base64 encoding
- Color Converter - Convert between HEX, RGB, and HSL color formats
- Crontab Generator - Create crontab expressions visually with human-readable descriptions
- CSV <> JSON Converter - Convert between CSV and JSON data formats
- CURL Constructor - Build CURL commands for terminal execution with customizable options
- Hash Generator - Generate MD5, SHA-1, SHA-256, and SHA-512 hashes
- JSON Beautifier/Minifier - Format and compress JSON with syntax highlighting
- JSON to Protobuf - Generate Protocol Buffer definitions from JSON examples
- JSON <-> YAML Converter - Two-way conversion between JSON and YAML formats with validation
- JSON/YAML Explorer - Visualize and explore JSON and YAML data with interactive tree view
- JWT Decoder - Decode and inspect JSON Web Tokens (JWT)
- Line Sort/Dedupe - Sort lines alphabetically and remove duplicates
- Markdown Preview - Preview Markdown with live rendering
- Mermaid Diagram Editor - Create diagrams with Mermaid syntax and live preview
- OCR Tool - Extract text from images and PDFs using offline OCR
- QR Code Reader/Generator - Generate QR codes from text or URLs, and scan QR codes from images
- Random Password Generator - Generate secure random passwords with customizable options
- Random String Generator - Generate random strings with patterns and custom options
- Regular Expression Tester - Test and validate regular expressions with live results
- String Case Converter - Convert between camelCase, snake_case, kebab-case and more
- Text Diff Utility - Compare two text blocks and highlight differences
- Timestamp Converter - Convert between various timestamp formats and human-readable dates
- URL Encoder/Decoder - Encode and decode URLs and URL components
- URL Parser - Parse and extract components from URLs
- URL to Markdown - Scrape URL content and convert to Markdown format
- UUID Generator - Generate random UUIDs in version 4 format
- Vim-Style Code Editor - In-browser text editor with Vim key bindings, syntax highlighting, and advanced features
- 🌙 Dark/Light theme support - Comfortable viewing in any environment
- 📱 Responsive design - Works on mobile, tablet, and desktop devices
- 🔄 Copy-to-clipboard functionality - Easy transfer of results
- ⚡ Client-side processing - No server requirements, works offline
- 💾 Local storage - Save your work and preferences between sessions
- 🔒 Privacy-focused - No data leaves your browser
- ♿ WCAG accessibility compliance - Usable by everyone
- 🌐 Offline support - Works without an internet connection
- 🔍 Search functionality - Quickly find the tool you need
-
Clone the repository:
git clone https://github.com/irfansofyana/devtools.git cd devtools -
Open the project in your favorite code editor
-
To view the tools locally, simply open the
index.htmlfile in your browser
-
The project is static HTML/CSS/JavaScript and can be deployed directly
-
Deploy the project files to your web server or GitHub Pages
- Navigate to the deployed website or your local development server
- Select a tool from the navigation menu
- Input your data in the provided fields
- View the results and use the copy button to transfer to clipboard
- Navigate to the JSON Beautifier tool
- Paste your minified JSON into the input field
- Click the "Beautify" button
- The formatted JSON will appear in the output field
- Use the "Copy" button to copy the result to your clipboard
devtools/
├── assets/ # Static assets (images, icons, etc.)
├── css/ # Stylesheet files
├── js/ # JavaScript files
│ ├── tools/ # Individual tool implementations
│ ├── utils/ # Utility functions
│ └── app.js # Main application script
├── index.html # Main HTML entry point
├── .gitignore # Git ignore file
├── CONTRIBUTING.md # Contribution guidelines
├── LICENSE # MIT License
└── README.md # Project documentation
We welcome contributions from the community! Please see our CONTRIBUTING.md file for detailed information on how to contribute to this project.
This project is licensed under the MIT License - see the LICENSE file for details.
-
Tool not working properly
- Check your browser console for errors
- Try clearing your browser cache
- Ensure you're using a modern browser (Chrome, Firefox, Safari, Edge)
-
Tools not loading properly
- Check your browser console for JavaScript errors
- Ensure all files are properly downloaded
- Try using a different browser
-
Changes not appearing after deployment
- Ensure your browser isn't serving cached content
- Verify the deployment process completed successfully
- Check that all assets were properly uploaded
For additional help, please open an issue on GitHub.