starfederation/datastar
Datastar
Datastar is a framework for hypermedia application development that enables the creation of reactive user interfaces using declarative HTML attributes. It focuses on server-driven state management, offloading application logic and state transitions to the backend to reduce frontend complexity.
The project distinguishes itself through real-time UI streaming, using Server-Sent Events to push incremental DOM patches and state changes over a single long-lived connection. It synchronizes frontend and backend state by applying partial JSON updates to a client-side signal store and employs morphing-based DOM reconciliation to update the view while preserving element state and focus.
The framework covers a broad set of capabilities, including signal-based reactive state, sandboxed expression evaluation for dynamic attribute and class management, and the ability to execute remote scripts delivered from the server. It also provides tools for binding browser events to JavaScript expressions and connecting reactive signals to web components.
Features
- UI Push Updates - Provides real-time delivery of server-side updates to modify user interface elements via Server-Sent Events.
- Server-Driven State Management - Offloads application logic and state transitions to the backend to reduce frontend complexity.
- State Signal Patching - Updates frontend reactive signals using JSON Merge Patch delivered via HTTP or Server-Sent Events.
- DOM Reconciliation - Employs a morphing-based reconciliation engine to update the DOM while preserving element state and focus.
- Event Bindings - Executes JavaScript expressions in response to native DOM events via declarative syntax.
- JSON State Synchronization - Synchronizes frontend and backend state using JSON payloads and partial updates.
- Event Listeners - Binds custom logic to standard DOM events using HTML attributes.
- Reactive UI Updates - Automatically updates user interface elements and signals in response to streaming server-sent events.
- Reactive User Interfaces - Creates dynamic user interfaces that automatically synchronize their state with server-driven updates.
- Signal-Based Reactivity - Uses a signal-based reactivity system to track state and trigger granular UI updates.
- Attribute Binding - Implements a system for dynamically configuring element attributes using reactive expressions.
- Backend Action Triggering - Provides declarative HTML attributes to trigger server-side logic using standard HTTP methods.
- Computed State - Generates read-only reactive signals derived from expressions that update automatically when dependencies change.
- Declarative UI Interactivity - Creates interactive user interfaces using declarative HTML attributes instead of imperative JavaScript.
- DOM Morphing - Updates or removes HTML elements using a morphing strategy to maintain client-side state and performance.
- Event Binding - Maps browser events to reactive expressions using declarative HTML attributes.
- Hypermedia-Driven Development - Implements a hypermedia-driven architectural approach to build interactive web applications.
- Reactive Expression Evaluation - Provides sandboxed JavaScript evaluation within HTML attributes to compute dynamic values from reactive signals.
- Logic Offloading - Moves application logic and state transitions to the backend to reduce frontend complexity.
- SSE-Driven DOM Patching - Streams incremental HTML fragments over a long-lived Server-Sent Events connection to update the UI.
- Over-the-Air Update Services - Uses Server-Sent Events to incrementally update the user interface without page reloads.
- Surgical DOM Update Engines - Updates only the modified parts of the DOM tree to improve rendering performance.
- Real-time Event Streams - Transmits multiple events over a single connection to trigger incremental interface updates or scripts.
- Dynamic Class Management - Conditionally applies or removes CSS classes based on the evaluation of reactive expressions.
- Reactive Text Updates - Enables elements to automatically update their text content based on the current value of reactive signals.
- Global State Managers - Defines globally accessible reactive state variables using declarative HTML attributes.
- State Bindings - Synchronizes HTML input elements with reactive signals to maintain consistency between UI and state.
- Reactive Visibility Toggling - Toggles the visibility of HTML elements based on whether a reactive expression evaluates to true or false.
- Declarative DOM Frameworks - Uses declarative attributes to manage both the DOM state and application state from the server.
- Declarative JavaScript Execution - Enables the invocation of encapsulated JavaScript functions directly through declarative HTML attributes.
- Backend-Driven Updates - Morphs existing HTML elements based on backend responses to change content while preserving state.
- Expression Sandboxes - Provides a sandboxed environment to safely evaluate JavaScript expressions within HTML attributes.
- Remote Script Execution - Enables the execution of JavaScript delivered from the server via content types or SSE.
- State and Element Patching - Modifies HTML elements and frontend state signals based on responses driven by the backend server.
- State-Aware Backend Requests - Sends the current application state with every server request to ensure the backend maintains full context.
- DOM State Preservation - Preserves client-side element state and focus while updating parts of the page from server responses.
- Reactive Signal Bindings - Connects reactive signals to custom element attributes and responds to events dispatched by web components.
