Getting started

STEP 01 / GET STARTED

Install

Download the prebuilt release archive, then serve one surface bundle or the full kit alongside the open-source Datastar + Rocket runtime. Each surface includes its own core dependencies; the core bundle is also available for custom mechanics. Render the tags and data attributes from any backend.

mkdir -p public/js
curl -fsSL "https://github.com/<owner>/<repo>/releases/latest/download/pd-rockets-browser.tar.gz" | tar -xz -C public/js
# serve the upstream datastar-rocket.js at /js/datastar-rocket.js
<script type="importmap">{"imports":{"pd-rockets/rocket":"/js/datastar-rocket.js"}}</script>
# choose one of the following:
<script type="module" src="/js/rocket-sortable-tree.js"></script>
<script type="module" src="/js/rocket-kit.js"></script>

Get the Rocket runtime ↗ · Upstream MIT notice ↗

The import map resolves pd-rockets/rocket to the pinned upstream module. If your page supplies a separate Rocket ES module, map that specifier to its URL instead; it must export rocket and use the same Datastar instance as the page. The guide uses the latest pinned upstream Datastar + Rocket bundle (v1.0.4) with its MIT notice.

• rocket-core.js ↓ (7.0 kB br) .br ↓
• rocket-kanban.js ↓ (4.3 kB br) .br ↓
• rocket-sortable-list.js ↓ (3.8 kB br) .br ↓
• rocket-drag-group.js ↓ (4.1 kB br) .br ↓
• rocket-bento-workspace.js ↓ (5.9 kB br) .br ↓
• rocket-sortable-tree.js ↓ (4.6 kB br) .br ↓
• rocket-context-menu.js ↓ (3.2 kB br) .br ↓
• rocket-inline-edit.js ↓ (0.6 kB br) .br ↓
• rocket-kit.js ↓ (16.1 kB br) .br ↓

Sizes are Brotli-compressed kilobytes (1 kB = 1,000 bytes). Use the regular .js file in script tags; the optional .br file is for servers configured to serve precompressed JavaScript with Content-Encoding: br.

PD rockets license ↓

STEP 07 / SERVER HANDOFF

Server round trip

Bind each semantic event to a Datastar action in your page. Your server handler validates the target, updates authoritative state, and sends complete HTML over SSE. On this page, a site-only fetch shim stands in for that handler and returns a datastar-patch-elements event. Datastar performs the morph; Rocket animates items from their prior positions to the new ones. Try a demo gesture: the small activity queue shows the Rocket event, the Datastar POST and the SSE patch returned by the fixture, without recording item text or request content.

event: datastar-patch-elements
data: selector #kanban-demo
data: mode outer
data: elements <div id="kanban-demo">…complete example…</div>

Browser fixture source ↗ · Go SSE handler ↗

The page seeds only interaction-detail signals. Board, list and grid content live in rendered DOM, not signals.