# starfederation/datastar

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/starfederation-datastar).**

3,971 stars · 198 forks · TypeScript · mit

## Links

- GitHub: https://github.com/starfederation/datastar
- Homepage: https://data-star.dev
- awesome-repositories: https://awesome-repositories.com/repository/starfederation-datastar.md

## Description

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.

## Tags

### Development Tools & Productivity

- [UI Push Updates](https://awesome-repositories.com/f/development-tools-productivity/configuration-updates/real-time-push-updates/ui-push-updates.md) — Provides real-time delivery of server-side updates to modify user interface elements via Server-Sent Events.

### Web Development

- [Server-Driven State Management](https://awesome-repositories.com/f/web-development/server-driven-state-management.md) — Offloads application logic and state transitions to the backend to reduce frontend complexity.
- [Attribute Binding](https://awesome-repositories.com/f/web-development/attribute-binding.md) — Implements a system for dynamically configuring element attributes using reactive expressions.
- [Backend Action Triggering](https://awesome-repositories.com/f/web-development/backend-action-triggering.md) — Provides declarative HTML attributes to trigger server-side logic using standard HTTP methods. ([source](https://data-star.dev/guide/backend_requests))
- [Computed State](https://awesome-repositories.com/f/web-development/computed-state.md) — Generates read-only reactive signals derived from expressions that update automatically when dependencies change. ([source](https://data-star.dev/guide/reactive_signals))
- [Declarative UI Interactivity](https://awesome-repositories.com/f/web-development/declarative-ui-interactivity.md) — Creates interactive user interfaces using declarative HTML attributes instead of imperative JavaScript. ([source](https://cdn.jsdelivr.net/gh/starfederation/datastar@develop/README.md))
- [DOM Morphing](https://awesome-repositories.com/f/web-development/dom-morphing.md) — Updates or removes HTML elements using a morphing strategy to maintain client-side state and performance. ([source](https://data-star.dev/guide/getting_started))
- [Event Binding](https://awesome-repositories.com/f/web-development/event-binding.md) — Maps browser events to reactive expressions using declarative HTML attributes. ([source](https://data-star.dev/guide/reactive_signals))
- [Hypermedia-Driven Development](https://awesome-repositories.com/f/web-development/hypermedia-driven-development.md) — Implements a hypermedia-driven architectural approach to build interactive web applications.
- [Reactive Expression Evaluation](https://awesome-repositories.com/f/web-development/reactive-expression-evaluation.md) — Provides sandboxed JavaScript evaluation within HTML attributes to compute dynamic values from reactive signals. ([source](https://data-star.dev/guide/datastar_expressions))
- [Logic Offloading](https://awesome-repositories.com/f/web-development/server-side-frameworks/reactive-frameworks/client-side-state-synchronizers/logic-offloading.md) — Moves application logic and state transitions to the backend to reduce frontend complexity. ([source](https://data-star.dev/))
- [SSE-Driven DOM Patching](https://awesome-repositories.com/f/web-development/sse-driven-dom-patching.md) — Streams incremental HTML fragments over a long-lived Server-Sent Events connection to update the UI.
- [Declarative DOM Frameworks](https://awesome-repositories.com/f/web-development/declarative-dom-frameworks.md) — Uses declarative attributes to manage both the DOM state and application state from the server. ([source](https://data-star.dev/))
- [Declarative JavaScript Execution](https://awesome-repositories.com/f/web-development/declarative-javascript-execution.md) — Enables the invocation of encapsulated JavaScript functions directly through declarative HTML attributes. ([source](https://data-star.dev/guide/datastar_expressions))
- [Backend-Driven Updates](https://awesome-repositories.com/f/web-development/dom-element-manipulators/dom-content-updating/backend-driven-updates.md) — Morphs existing HTML elements based on backend responses to change content while preserving state. ([source](https://data-star.dev/guide))
- [Expression Sandboxes](https://awesome-repositories.com/f/web-development/expression-sandboxes.md) — Provides a sandboxed environment to safely evaluate JavaScript expressions within HTML attributes.
- [Remote Script Execution](https://awesome-repositories.com/f/web-development/remote-script-execution.md) — Enables the execution of JavaScript delivered from the server via content types or SSE. ([source](https://data-star.dev/guide/datastar_expressions))
- [State and Element Patching](https://awesome-repositories.com/f/web-development/state-and-element-patching.md) — Modifies HTML elements and frontend state signals based on responses driven by the backend server. ([source](https://data-star.dev/guide/the_tao_of_datastar))
- [State-Aware Backend Requests](https://awesome-repositories.com/f/web-development/state-aware-backend-requests.md) — Sends the current application state with every server request to ensure the backend maintains full context. ([source](https://data-star.dev/guide/backend_requests))
- [DOM State Preservation](https://awesome-repositories.com/f/web-development/virtual-dom-diffing/dom-state-preservation.md) — Preserves client-side element state and focus while updating parts of the page from server responses.
- [Reactive Signal Bindings](https://awesome-repositories.com/f/web-development/web-components/reactive-signal-bindings.md) — Connects reactive signals to custom element attributes and responds to events dispatched by web components. ([source](https://data-star.dev/guide/datastar_expressions))

### Data & Databases

- [State Signal Patching](https://awesome-repositories.com/f/data-databases/json-patching/state-signal-patching.md) — Updates frontend reactive signals using JSON Merge Patch delivered via HTTP or Server-Sent Events. ([source](https://data-star.dev/guide/reactive_signals))

### Graphics & Multimedia

- [DOM Reconciliation](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/dom-web-rendering-strategies/surgical-dom-update-engines/dom-reconciliation.md) — Employs a morphing-based reconciliation engine to update the DOM while preserving element state and focus.
- [Surgical DOM Update Engines](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/dom-web-rendering-strategies/surgical-dom-update-engines.md) — Updates only the modified parts of the DOM tree to improve rendering performance. ([source](https://data-star.dev/guide/the_tao_of_datastar))

### Programming Languages & Runtimes

- [Event Bindings](https://awesome-repositories.com/f/programming-languages-runtimes/programming-utilities/data-text-processing/template-engines/event-bindings.md) — Executes JavaScript expressions in response to native DOM events via declarative syntax. ([source](https://data-star.dev/guide/getting_started))

### Software Engineering & Architecture

- [JSON State Synchronization](https://awesome-repositories.com/f/software-engineering-architecture/json-state-synchronization.md) — Synchronizes frontend and backend state using JSON payloads and partial updates.

### User Interface & Experience

- [Event Listeners](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/event-handling-architectures/event-handling/event-listeners.md) — Binds custom logic to standard DOM events using HTML attributes. ([source](https://data-star.dev/guide))
- [Reactive UI Updates](https://awesome-repositories.com/f/user-interface-experience/reactive-ui-updates.md) — Automatically updates user interface elements and signals in response to streaming server-sent events. ([source](https://data-star.dev/guide/backend_requests))
- [Reactive User Interfaces](https://awesome-repositories.com/f/user-interface-experience/reactive-user-interfaces.md) — Creates dynamic user interfaces that automatically synchronize their state with server-driven updates.
- [Signal-Based Reactivity](https://awesome-repositories.com/f/user-interface-experience/signal-based-reactivity.md) — Uses a signal-based reactivity system to track state and trigger granular UI updates.
- [Dynamic Class Management](https://awesome-repositories.com/f/user-interface-experience/dynamic-class-management.md) — Conditionally applies or removes CSS classes based on the evaluation of reactive expressions. ([source](https://data-star.dev/guide/reactive_signals))
- [Reactive Text Updates](https://awesome-repositories.com/f/user-interface-experience/event-driven-ui-frameworks/reactive-text-updates.md) — Enables elements to automatically update their text content based on the current value of reactive signals. ([source](https://data-star.dev/guide/reactive_signals))
- [Global State Managers](https://awesome-repositories.com/f/user-interface-experience/global-state-managers.md) — Defines globally accessible reactive state variables using declarative HTML attributes. ([source](https://data-star.dev/guide/reactive_signals))
- [State Bindings](https://awesome-repositories.com/f/user-interface-experience/input-field-enhancements/state-bindings.md) — Synchronizes HTML input elements with reactive signals to maintain consistency between UI and state. ([source](https://data-star.dev/guide/reactive_signals))
- [Reactive Visibility Toggling](https://awesome-repositories.com/f/user-interface-experience/page-headers/page-action-integrations/page-element-injections/ui-element-visibility-toggles/reactive-visibility-toggling.md) — Toggles the visibility of HTML elements based on whether a reactive expression evaluates to true or false. ([source](https://data-star.dev/guide/reactive_signals))

### DevOps & Infrastructure

- [Over-the-Air Update Services](https://awesome-repositories.com/f/devops-infrastructure/over-the-air-update-services.md) — Uses Server-Sent Events to incrementally update the user interface without page reloads. ([source](https://data-star.dev/))

### Networking & Communication

- [Real-time Event Streams](https://awesome-repositories.com/f/networking-communication/real-time-event-streams.md) — Transmits multiple events over a single connection to trigger incremental interface updates or scripts. ([source](https://data-star.dev/guide/the_tao_of_datastar))