Previous SortableJS Showcase Next Nested Sortable

Drag Drop Builder

Canvas-based page builder with drag-and-drop block placement.

This page is a scaffold for the Drag Drop Builder component. Build the live markup, Alpine.js interactions, and DaisyUI/Tailwind classes here, then replace this placeholder block with the real preview + code snippet.

Planned variants & states to implement:

  • Widget sidebar
  • Drop canvas
  • Reorder sections
  • Nested widget drop
  • Save layout JSON
  • Undo / redo
14

Component Playground

Interactive sandbox for testing component props and states live.

Theme Builder

Visual tool for customising design tokens and exporting themes.

Theme Switcher

Runtime toggle for switching between multiple theme presets.

Responsive Preview

Viewport simulator for previewing components at all breakpoints.

Variant Generator

Automated matrix of all component variant and state combinations.

Code Snippets

Searchable library of copy-ready HTML, CSS, and JS code snippets.

DaisyUI Showcase

Full DaisyUI component reference with live theme preview.

DaisyUI

SortableJS Showcase

Interactive SortableJS drag-and-drop examples and configuration.

SortableJS

Nested Sortable

Multi-level nested list drag-and-drop with tree structure.

Widget Registry

Registered widget catalogue with metadata and usage references.

Component Registry

Full component manifest with slots, props, and dependency map.

Block Registry

Block catalogue with thumbnail previews and insertion codes.

Template Registry

Page template library with screenshots and one-click scaffold.

Design Token Generator

Export design tokens to CSS variables, JSON, or Style Dictionary format.
Previous SortableJS Showcase Next Nested Sortable