Wired Components React Playground

An interactive playground for experimenting with the wired-elements library using React. This playground allows you to:

• Browse and preview available wired components
• Add components to a canvas with a single click
• Customize components with different colors
• Drag and drop to arrange components
• Edit component text and attributes
• Generate HTML code for your custom layout

• React-based Interface: Built using React for a smooth, modern experience
• Component Library: Easy access to common wired-elements components
• Interactive Preview: See how components look and behave in real-time
• Drag & Drop Interface: Easily arrange your components on the canvas
• Color Customization: Apply different colors to components from a color palette
• Component Editing: Customize text, values, and attributes with a dialog interface
• Code Generation: Get the HTML code for your design with one click

1. Click on any component in the sidebar to add it to the playground
2. Use the color picker to choose a color for new components
3. Drag components to rearrange them in the playground
4. Click the edit (✏️) button to modify component properties
5. Click the delete (🗑️) button to remove a component
6. Click "Show Code" to view the generated HTML

The playground uses the hand-drawn "Architects Daughter" font to complement the sketched UI elements.

• Buttons
• Input fields
• Textareas
• Checkboxes
• Cards
• Progress bars
• Sliders
• Toggles

Each component maintains the hand-drawn aesthetic of the wired-elements library while being fully functional and customizable.