Rocket components · drag & drop first

Interactions for server-rendered pages.

A collection of vendorable Rocket components. Explore drag-and-drop surfaces and contextual menus, each with a live example, a browser contract, and server-rendered markup.

Follow the guide Browse the contract ↓

EXPLORE THE COLLECTION

Components & guides

Drag and dropKanban boardLive example, markup and contract Drag and dropSortable listLive example, markup and contract Drag and dropDrag groupLive example, markup and contract Drag and dropBento gridsLive example, markup and contract Drag and dropFile treeLive example, markup and contract MenusContext menuLive example, markup and contract EditingInline editLive example, markup and contract

FIELD GUIDE / 01

How it works

The public contracts live in contracts/. Core owns pointer capture, the detached preview, target marking and post-move FLIP. The Rocket hosts own DOM lookup and event emission. Neither layer knows which Datastar action your page will invoke or how your backend stores changes.

Why Rocket?

Rocket is Datastar’s web component API. Here it owns element setup and cleanup around browser-only work—pointer capture, hit testing, previews and animation—while the backend stays responsible for rendering state. Semantic custom events let any page connect those mechanics to its own Datastar actions. Rocket gives each instance a lifecycle and a public DOM boundary without turning signals into a second application model.

contracts/inputs & outputscore/gesture & motionrocket/host lifecycleexamples/server adapters