wired_components_playground
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
main.tsx
https://dcm31--a4cdbe78278311f0b46e569c3dd06744.web.val.run
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.