Lit + Datastar Integration Examples

Flow Diagram Arrays + Objects

Pass node and edge arrays to a Lit component. Nested changes trigger updates automatically.

Node Size:

Animate:

<!-- Bind arrays and objects directly with data-attr -->
<flow-diagram
    data-attr:nodes="$flow.nodes"
    data-attr:edges="$flow.edges"
    data-attr:config="$flow.config"
></flow-diagram>

<!-- Lit component with type converters -->
@property({ type: Array }) nodes: FlowNode[] = []
@property({ type: Object }) config: FlowConfig = { ... }

3D Scene Viewer Config Object

Three.js scene controlled by Datastar signals. Nested property changes work seamlessly.

Shape:

Color:

Speed:

Wireframe:

Zoom:

<!-- Config object bound directly -->
<scene-viewer
    data-attr:config="$scene.config"
></scene-viewer>

<!-- Why it works: data-attr calls JSON.stringify() internally,
     which reads all nested properties within Datastar's reactive effect -->

Data Chart Array Mutations

ECharts visualization with reactive data array. Push, pop, and mutations all work.

Chart Type:

Color:

Legend:

<!-- Bind data arrays and config objects directly -->
<data-chart
    data-attr:data="$chart.data"
    data-attr:config="$chart.config"
></data-chart>

<!-- Array mutations like $chart.data.push(...) are detected -->