A comprehensive, interactive web application for visualizing and understanding DOM events, event phases, and event propagation in real-time. Built with React, TypeScript, and modern web technologies.
- Real-time Event Capture: Monitor mouse, pointer, keyboard, focus, touch, clipboard, and drag & drop events
- Event Phase Visualization: See events in capturing, target, and bubbling phases
- Live Event Stream: Watch events as they happen with millisecond precision
- Comprehensive Event Details: View event properties, coordinates, keys, and more
- Interactive Elements: Buttons, inputs, textareas, and draggable elements for testing
- Event Filtering: Filter events by type, phase, or content
- Configurable Event Groups: Enable/disable specific event categories
- Smoke Test: Run predefined event sequences for testing
- Event Timeline: Visual timeline showing recent event sequences
- Detailed Log Table: Comprehensive event log with all properties
- Responsive Design: Works on desktop and mobile devices
- Modern UI: Built with Shadcn/UI components and Tailwind CSS
- Frontend: React 18, TypeScript
- Styling: Tailwind CSS, Shadcn/UI
- Build Tool: Next.js 15
- Event Handling: Native DOM Event Listeners
- State Management: React Hooks
- Architecture: Clean Architecture with component separation
- Node.js 18+
- npm
# Clone the repository
git clone https://github.com/your-username/ui-event-visualize.git
cd ui-event-visualize
# Install dependencies
npm install
# Run development server
npm run dev
# Build for production
npm run build
# Start production server
npm start- Open the application in your browser
- Interact with elements in the playground area
- Watch events appear in real-time in the log table
- Use the timeline to see event sequences
- Enable/Disable Events: Use checkboxes to control which events to monitor
- Phase Control: Toggle capturing and bubbling phase listeners
- Filtering: Use the search box to find specific events
- Max Rows: Adjust the maximum number of events to display
- Smoke Test: Click "Run smoke test" to generate a predictable event sequence
- Pause/Resume: Stop and resume event monitoring
- Clear Log: Reset the event log
The application follows Clean Architecture principles with clear separation of concerns:
components/visualizer/
├── types.ts # Type definitions and constants
├── utils.ts # Pure utility functions
├── use-event-manager.ts # Custom hook for event management
├── visualizer.tsx # Main orchestrator component
├── control-panel.tsx # Control interface
├── playground.tsx # Interactive testing area
├── timeline.tsx # Event timeline visualization
├── event-log-table.tsx # Event log display
└── phase-badge.tsx # Event phase indicators
- Event Debugging: Understand complex event flows
- Performance Analysis: Monitor event timing and frequency
- Cross-browser Testing: Verify event behavior across browsers
- Educational Purposes: Learn about DOM events and phases
- Web Development Classes: Demonstrate event concepts
- Interactive Learning: Visual representation of event propagation
- Code Examples: Real-world event handling examples
- Event Testing: Verify event handling in applications
- Regression Testing: Ensure events work after changes
- Cross-platform Testing: Test on different devices and browsers
| Category | Events |
|---|---|
| Mouse | mousedown, mouseup, click, dblclick, contextmenu, mouseenter, mouseleave, mousemove |
| Pointer | pointerdown, pointerup, pointermove, pointerenter, pointerleave |
| Keyboard | keydown, keypress, keyup, beforeinput, input, composition events |
| Focus | focus, blur, focusin, focusout |
| Touch | touchstart, touchend, touchmove, touchcancel |
| Clipboard | copy, cut, paste |
| Drag & Drop | dragstart, dragover, dragenter, dragleave, drop, dragend |
// In types.ts
export const ALL_EVENT_GROUPS: Record<string, string[]> = {
custom: ["customevent1", "customevent2"],
// ... existing groups
};Contributions are welcome! Please feel free to submit a Pull Request.
- Follow the existing code structure and patterns
- Use TypeScript for all new code
- Maintain component separation and clean architecture
- Add tests for new features
- Update documentation as needed
This project is licensed under the MIT License - see the LICENSE file for details.
If you have any questions or need help:
- Open an Issue