A playground for experimenting with the wired-elements library, which provides hand-drawn UI components. This playground allows you to:
- Browse and preview available wired components
- Add components to a canvas
- Customize components with different colors
- Drag and drop to arrange components
- Edit component text and attributes
- Generate HTML code for your custom layout
- Component Library: Browse the available wired-elements components
- Interactive Preview: See how components look and behave
- Drag & Drop Interface: Easily arrange your components
- Color Customization: Apply different colors to components
- Code Generation: Get the HTML code for your design
- Edit Controls: Customize text and attributes of components
- Light/Dark Mode: Toggle between light and dark themes
- Browse the component examples in the card grid
- Click "Add to playground" on any component you want to use
- Use the color picker to choose colors for your components
- Drag components to rearrange them in the playground
- Use the edit (✏️) and delete (🗑️) controls to modify components
- View the generated HTML code at the bottom of the page
The playground uses the hand-drawn "Architects Daughter" font to complement the sketched UI elements.