Demo Tools
A collection of interactive tools showcasing various web development skills and techniques.
Data Visualizer
ReactRechartsTypeScript
Interactive data visualization tool that allows you to visualize and explore data through various chart types.
- Multiple chart types (bar, line, pie)
- Interactive tooltips and legends
- Customizable appearance
- Sample datasets included
Code Formatter
ReactMonaco EditorPrettier
Format and beautify code snippets in various programming languages with syntax highlighting.
- Support for multiple languages
- Customizable formatting options
- Syntax highlighting
- Copy formatted code to clipboard
Utility Toolkit
ReactTypeScriptZod
Collection of useful developer utilities and converters for everyday tasks.
- JSON validator and formatter
- Color converter (HEX, RGB, HSL)
- URL encoder/decoder
- Base64 encoder/decoder
- Unit converter
Form Builder
React Hook FormZodTypeScript
Interactive form builder with validation, conditional fields, and real-time preview.
- Drag and drop interface
- Form validation with Zod
- Conditional logic
- Export form configuration
Animation Playground
Framer MotionReactTypeScript
Interactive playground for experimenting with animations using Framer Motion.
- Preset animation examples
- Customizable parameters
- Animation code generator
- Interactive timeline
UI Component Gallery
shadcn/uiTailwind CSSReact
Showcase of custom UI components with interactive examples and code snippets.
- Interactive component demos
- Customization options
- Copy-paste code snippets
- Responsive design examples