DevSnap is a collection of 25 offline-first developer utilities packaged in a modern dashboard interface. Built with speed, safety, and productivity in mind, it executes all calculations completely client-side in your web browser.
DevSnap includes 25 developer tools:
- JSON Formatter: Format (2-space, 4-space, tabs), validate, and minify JSON payloads with key sorting and error highlights.
- JSON ↔ YAML Converter: Convert structured data schemas between JSON syntax and YAML configurations.
- SQL Query Formatter: Clean up, indent, and format raw SQL query strings with custom keyword casing.
- CSS Minifier / Beautifier: Minify CSS stylesheets or pretty-print rules for legibility.
- XML Formatter: Validate, indent, and format raw XML strings into clean hierarchy trees.
- Base64 Converter: Safely encode text or decode Base64 data with UTF-8 support and URL-Safe (Base64URL) options.
- URL Converter: Encode parameters or decode URLs using standard/scrambled (encode-all) options across 5 different encoding schemes.
- HTML Escaper: Escape special tags into safe HTML entities or unescape back to raw tags.
- Hex to Text Converter: Translate plain text to hexadecimal byte values or decode hex strings back with multiple format notations.
- UUID v4 Generator: Generate batches of 1, 10, or 100 version 4 UUIDs with optional hyphens and casing parameters.
- Strong Password Generator: Customize password lengths (8 to 64 chars), character pools, and filter easily confused characters (I, l, 1, 0, O).
- Lorem Ipsum Generator: Create customizable latin filler text with paragraph, sentence, and word levels with HTML wrapping tags.
- QR Code Generator: Create high-quality QR codes on the fly. Download codes in vector SVG or PNG raster formats.
- Hash Generator: Compute MD5, SHA-1, SHA-256, and SHA-512 hashes in parallel, with casing options.
- Color Converter: Translate formats between HEX, RGB, and HSL with a native color-picker, opacity controls, HEX8 CSS, and Android XML formats.
- Epoch Timestamp Converter: Read current Unix times (sec and ms). Convert Unix timestamps to custom date formats, ISO, and UTC.
- Text Case Converter: Convert sentences between UPPERCASE, lowercase, Title, sentence, camel, pascal, snake, kebab, slugify, or reverse strings.
- Markdown Live Previewer: Write markdown text and preview formatted rich-text HTML renders in real-time.
- Regex Tester: Validate regular expressions against test inputs with live highlights, capture groups, and substring replacement.
- JWT Debugger: Decode JSON Web Tokens locally to view headers and payload claims with auto-decoded timestamps.
- Diff Checker: Compare two text payloads side-by-side or inline, highlighting additions and deletions with case-insensitive and whitespace options.
- User Agent Parser: Inspect OS, browser engines, device formats from UA strings.
- Cron Parser: Deconstruct cron schedule syntax, explain fields, and calculate future execution times.
- Number Base Converter: Convert numbers between Decimal, Hexadecimal, Binary, and Octal.
- String Inspector: Inspect word counts, byte size, whitespace, and word/character frequency distributions.
- Keyboard Shortcuts: E.g.
Escto clear,Ctrl+Enterto run,Ctrl+Shift+Cto copy outputs. - Modern Dark Shell: Beautiful styling with dark theme, custom responsive grids, and clean sidebar navigations.
- Toast Notifications: Interactive state alerts when files download or copies complete.
- OLED Black mode: Click the theme moon/sun icon in the navbar to switch the background between Deep Zinc and pitch-black OLED colors.
- Offline first: Works completely offline after initial loading. Zero tracking or API calls.
- Framework: React + Vite
- Language: TypeScript (strict types)
- Styling: Tailwind CSS + Framer Motion (animations)
- Icons: Lucide React
- Engine Dependencies: qrcode, marked, js-yaml, diff
devsnap/
├── package.json # Dependencies and script triggers
├── vite.config.ts # Vite configuration (relative asset pathing)
├── tailwind.config.js # Customized dark theme palette mapping
├── postcss.config.js # PostCSS configurations
├── tsconfig.json # TypeScript configuration entries
├── index.html # Main HTML document template
├── devsnap_banner.png # Dashboard preview banner
├── README.md # Project documentation
└── src/
├── main.tsx # Application mount script
├── index.css # Global style base, scrollbars, and glows
├── App.tsx # Dashboard composition and view shell routing
├── types/
│ └── index.ts # TypeScript interfaces
├── hooks/
│ ├── useToast.tsx # Context provider for toast notifications
│ └── useLocalStorage.ts # Sync and restore user dark/oled theme
├── utils/
│ ├── hash.ts # MD5 TS math & Web Crypto SHA wrappers
│ ├── lorem.ts # Lorem word-bank algorithms
│ └── color.ts # HEX, RGB, HSL conversion methods
└── components/
├── Layout.tsx # Shell header search footer
├── Toast.tsx # Slide-in toast alerts
├── ToolCard.tsx # Dashboard grid cards
├── ToolLayout.tsx # Reusable utility wrapper framework
├── JSONFormatter.tsx
├── Base64Converter.tsx
├── URLConverter.tsx
├── UUIDGenerator.tsx
├── PasswordGenerator.tsx
├── HashGenerator.tsx
├── ColorConverter.tsx
├── TimestampConverter.tsx
├── LoremGenerator.tsx
├── QRGenerator.tsx
├── TextCaseConverter.tsx
├── MarkdownPreview.tsx
├── RegexTester.tsx
├── JsonYamlConverter.tsx
├── JwtDebugger.tsx
├── DiffChecker.tsx
├── HtmlEscaper.tsx
├── UserAgentParser.tsx
├── SqlFormatter.tsx
├── HexConverter.tsx
├── CronParser.tsx
├── CssFormatter.tsx
├── NumberBaseConverter.tsx
├── StringAnalyzer.tsx
└── XmlFormatter.tsx
Follow these commands to run DevSnap locally:
-
Install dependencies:
npm install
-
Launch the development server:
npm run dev
-
Compile a production bundle:
npm run build
MIT License. Feel free to use, modify, and host this project for your personal or commercial developer workflow!