Examples

Use these examples to move from one sortable Item to complete application interfaces. The focused examples isolate one API decision at a time; the complete interfaces combine placement modes, nested Containers, session callbacks, and application-owned state.

Learn the Building Blocks

• Basics starts with Items, Containers, and the framework-owned render loop.
• Container Recipes covers collection rendering, configuration, nesting, imperative moves, ghosts, and presentation.
• Item Recipes covers metadata, selection, adopted core Items, and drag handles.

Explore Complete Interfaces

Complete Interfaces brings the pieces together in a checklist, Kanban board, sentence builder, file explorer, clone palette, drop-to-delete interaction, swap grid, and form editor.

These examples demonstrate application patterns rather than adding another SnapSort API layer. Each interface keeps its persistent records in application state. Structural callbacks synchronize changes that SnapSort originates; session and hover callbacks also let the application configure transient behavior or attach application-specific meaning to a resolved result.

Framework Source

Every live example includes a Svelte source tab. The interaction model and core events are shared across bindings; use the Svelte Reference or React Reference for the exact component syntax in your framework.