Datastar Documentation

repository·develop·Indexed 26 days ago

https://github.com/starfederation/datastar

A lightweight hypermedia framework for building websites and real-time collaborative web applications using declarative attributes. It features a reactivity system based on signals, computed values, and effects, and utilizes data-* attributes for data binding, text updates, and event handling. The framework includes a plugin system for attributes, actions, and watchers, as well as official extensions for Visual Studio Code and JetBrains IDEs.

Tokens
5.3K
Snippets
16
Records
46
Agent score
89%

What's inside Datastar

  1. Understand Datastar SDK Core Mechanics

    develop

    Datastar uses a Server-Sent Events (SSE) approach for communication between the server and the browser. The communication flow follows these rules:

    1. Server to Browser: Data is transmitted via SSE events.
    2. Browser to Server: Data is sent as JSON payloads under the datastar namespace.
  2. Create a new Datastar SDK

    develop

    To implement a new Datastar SDK, follow these steps:

    1. Review the Architecture Decision Record to understand the required SDK specifications.
    2. Use the constants defined in datastar-sdk-config.json as your source of truth for event types, element patch modes, and other enums.
    3. Implement the ServerSentEventGenerator interface.
    4. Validate your implementation by running the comprehensive test suite located in the tests/ directory.
  3. Install Datastar via CDN

    develop

    To use Datastar, add a single script tag to your HTML. This loads the framework as a module, enabling declarative reactivity through data-* attributes.

    <script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.2/bundles/datastar.js"></script>
  4. Use Datastar Autocomplete and Documentation in IntelliJ

    develop

    The plugin provides autocomplete for all Datastar custom data-* attributes, as well as standard DOM attributes and events.

    To view documentation alongside autocomplete suggestions, enable the following setting:

    <kbd>File</kbd> → <kbd>Settings</kbd> → <kbd>Editor</kbd> → <kbd>General</kbd> → <kbd>Code Completion</kbd> → Check the box: Show the documentation popup in .... ms.