Developer Tools
Essential utilities for modern web development
On This Page
Overview
The Developer Tools page contains 4 essential utilities accessible through tabs. All processing happens in your browser - no data is sent to any server. Each tool includes real-time feedback, copy/download functionality, and history tracking.
Navigate to Dev Tools from the top navigation bar. Switch between tools using the tab bar at the top of the page.
JSON to TypeScript
Convert JSON objects into type-safe TypeScript interfaces or type aliases. Handles nested objects, arrays, and optional fields.
How to Use
- 1
Paste your JSON into the left input panel. You can also click "Load Example" to see a sample JSON structure.
- 2
Configure options: Set the root interface name, choose between "interface" or "type" output, and toggle whether to make fields optional.
- 3
Click "Generate" to produce the TypeScript output. The result appears in the right panel.
- 4
Copy or download the generated TypeScript code using the buttons above the output.
Features
- Handles nested objects and arrays automatically
- Generates separate interfaces for nested types
- JSON validation with clear error messages
- Customizable root interface name
CSS Unit Converter
Convert between CSS units (px to rem) and generate fluid clamp() functions for responsive typography.
How to Use
- 1
Enter a pixel value in the input field (e.g., 16, 24, 32).
- 2
Set the base font size (default: 16px). This is used as the root value for rem calculations.
- 3
View the conversions - the tool shows rem equivalent and a fluid clamp() function that scales smoothly between viewport breakpoints.
- 4
Copy the result you need directly into your CSS.
What is clamp()?
The CSS clamp() function creates fluid typography that smoothly scales between a minimum and maximum size based on viewport width. This eliminates the need for multiple media query breakpoints for font sizes.
SVG Path Visualizer
Visualize SVG path commands, understand their structure, and optimize paths for production use.
How to Use
- 1
Paste an SVG path string into the input field (the
dattribute value from an SVG<path>element). - 2
View the visualization - the path renders in a live preview area showing the shape the path creates.
- 3
Explore the command breakdown - each path command (M, L, C, Z, etc.) is parsed and explained.
- 4
Optimize the path to reduce file size while maintaining visual fidelity.
SVG paths must start with an M (moveto) command. If your path doesn't render, check that it begins with "M" followed by coordinates.
Regular Expression Tester
Test regex patterns against sample text, visualize matches, and get detailed explanations for each token in your pattern.
How to Use
- 1
Enter your regex pattern in the pattern input field. No need to wrap it in slashes.
- 2
Set flags - toggle global (g), case insensitive (i), multiline (m), and other regex flags using the flag checkboxes.
- 3
Enter test text in the text area below. The tool highlights matches in real-time as you type.
- 4
Review results - see match count, captured groups, and detailed token explanations for your pattern.
Common Flags
- g (global): Find all matches instead of stopping at the first one
- i (insensitive): Case-insensitive matching
- m (multiline): ^ and $ match line beginnings and endings
Using History
The Dev Tools page automatically saves your last 20 operations across all tools. Access history by clicking the "History" button in the top right.
History Features
- View past inputs and outputs for each tool
- Load a previous operation to reuse or modify it
- Delete individual entries you no longer need
- History is stored locally in your browser
Tips & Best Practices
JSON to TypeScript: Use the "Load Example" button to see how complex nested structures are handled.
CSS Converter: The clamp() function eliminates the need for multiple media query breakpoints for font sizes.
SVG Visualizer: SVG paths must start with an M (moveto) command to be valid.
Regex Tester: Enable the "global" (g) flag to find all matches instead of just the first one.
All tools process data entirely in your browser - your code and data never leave your device.
Use the history feature to quickly access previous conversions without re-entering data.
Each tool output can be copied to clipboard or downloaded as a file.