Skip to content

alvarolm/datastar-resources

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Datastar Resources

discussions Discussions are now open! Since the Datastar maintainers have their hands full, this is a place to keep public organized conversations about Datastar.

file docs/considerations.md is a good starting point for understanding Datastar's production trade-offs. It's looking for improvements - check the discussion discussion to contribute!

A collection of resources for Datastar, the hypermedia framework for building reactive web applications.

Note: This repository is not endorsed by Datastar or its authors. It is a community-driven collection of resources.

About Datastar

Datastar is a lightweight hypermedia framework that enables developers to build reactive web applications using simple HTML attributes (data-*) and server-side logic. It eliminates the need for complex JavaScript frameworks while providing real-time capabilities, reactive frontend, and other features out of the box.

Official Links:


Organization

This repository organizes Datastar references by category. The structure and subcategories will be adapted as the collection grows. When a reference needs additional context or detailed explanation, a dedicated markdown file can be created in the /docs directory.

A specific section called Using Datastar showcases real-world production applications built with Datastar.

πŸ“š References

AI Learning Resources

(before use, please read the official documentation at https://data-star.dev/, always double check the results, use of AI is discouraged by the datastar authors)

  • Datastar Wiki on DeepWiki - Comprehensive technical wiki documenting Datastar's architecture, reactive system implementation, plugin architecture, expression engine mechanics, and DOM integration. Includes detailed reference material for backend SDKs, JavaScript library usage, data attributes, build system, and IDE extensions. Covers implementation details like signals-based reactivity and SSE protocol specifications. Updated November 7, 2025. #documentation #wiki #reference #technical

  • Datastar on Context7 - AI-optimized documentation index aggregating Datastar's official documentation with 487 code snippets, 137 pages, and 52,401 tokens of indexed content. Provides searchable documentation interface and raw documentation tokens for AI model integration. Benchmark score of 70.5 for documentation quality. Updated October 16, 2025. #documentation #ai-index #reference #search

Libraries & Tools

  • dataSPA - Friendly fork of the Datastar hypermedia framework that restores features from the beta version that were removed or moved to Datastar Pro. Includes all open-core Datastar attributes and actions (data-bind, data-class, data-computed, HTTP methods), plus restored premium features like data-persist, data-replace-url, data-scroll-into-view, and data-view-transition. Features free browser devtools extension, reproducible builds, and DIY bundler approach. Prioritizes accessibility to previously paid features with community support. By @lllama (Felix Ingram) #frontend #framework #fork #alternative

  • dataSPA Inspector - Browser inspector/debugger for Datastar and dataSPA applications, providing functionality similar to Datastar Pro's Inspector. Shows current page signals with element highlighting and scroll-to-element on shift-click, displays signal and element patch events from the server with console logging, clipboard copying, and event replay capabilities. Toggle between table and object views for signal inspection. By @lllama (Felix Ingram) #frontend #debugging #devtools #inspector #signals

  • Datastar VS Code Extension - Official Visual Studio Code extension providing intelligent autocomplete for Datastar syntax and attributes. Works with HTML and common template languages by default, with customizable language support via datastar.enabledLanguages setting. Supports custom file extensions (.edge, .njk, etc.) and language IDs (PHP, Twig, etc.). Requires VS Code 1.63.0 or later. MIT License. #frontend #vscode #editor #devtools #autocomplete

  • Datastar IntelliJ Plugin - Official JetBrains IntelliJ plugin providing IDE support for Datastar. Features autocomplete for all Datastar custom data-* attributes plus DOM attributes and events. Includes optional inline documentation through Code Completion settings. Available on JetBrains Marketplace (Plugin ID: 26072). Compatible with all IntelliJ-based IDEs. #frontend #intellij #jetbrains #editor #devtools #autocomplete

  • datastar-el - Emacs Lisp package providing datastar framework support within the Emacs editor. Features intelligent data- attribute completion through Emacs' completion system, context-aware attribute detection, and dedicated help documentation with links to official docs via datastar-attribute-help command. Supports html-mode, web-mode, clojure-mode, and clojurescript-mode. Recommended for project-level enablement through .dir-locals.el files. By @benjamin-asdf #frontend #emacs #editor #devtools #autocomplete

  • tree-sitter-datastar - Tree-sitter grammar for parsing Datastar expressions and attributes, enabling syntax highlighting and code analysis. Parses attribute names with plugin syntax (data-on:click__debounce.500ms), signal references ($count, $user.name), action calls (@get('/api')), and JavaScript expressions. Supports 31 Datastar plugins and uses injection-based parsing within HTML files. Verified support for Neovim (primary target with full AST inspection) and Helix, with possible support for VS Code and Emacs via third-party extensions. Uses external C scanner for proper tokenization. By @YuryKL #frontend #editor #devtools #tree-sitter #syntax-highlighting #neovim #helix

  • data-lint-example - Example implementation demonstrating how to build a linting tool for Datastar using tree-sitter bindings. Built with Rust (66%) and Lua (34%), serves as a reference for creating custom Datastar linters with syntax analysis capabilities. Includes Neovim integration documentation (NVIM_SETUP.md). Requires tree-sitter-datastar bindings to compile. Useful as a starting point for developers building editor tooling or custom validation rules for Datastar projects. By @YuryKL #frontend #linting #rust #lua #tree-sitter #example #neovim

  • datastar-plugin-starter - TypeScript starter template for creating Datastar plugins with pre-configured build tooling and development infrastructure. Features esbuild compilation to minified JavaScript, development server with file watching for real-time compilation, demo HTML page with PicoCSS styling for local testing, and GitHub Pages integration for live plugin demonstrations. Supports all three plugin types (action, attribute, watcher) with access to Datastar's Public API and internal utilities. Includes CDN-ready distribution via GitHub and JSDelivr. Eliminates initial setup overhead so developers can focus on plugin code. By @Regaez (Thomas Threadgold) #frontend #plugin #typescript #template #development #starter

  • datastar-scoped-signals - Copy-paste utility plugin for adding scoped signal functionality to Datastar. Provides local state management with data-scope attribute for isolated signal namespaces, @scoped() and @scopedSet() functions for reading/writing scoped signals, and automatic cleanup. Includes data-scoped-indicator for loading states during async operations. By @Hackder #frontend #signals #plugin #state-management

  • datastar-attribute-on-keys - Plugin for binding keyboard events to reactive actions via data-on-keys attribute. Supports multi-key combinations (Alt-Q, Ctrl-Shift-S), multiple key bindings with OR logic (Escape.Enter), event scope options (global or element focus), and modifier support for preventing defaults and event propagation. Available as npm package @mbolli/datastar-attribute-on-keys. By @mbolli #frontend #plugin #keyboard #events

  • datastar-attribute-prop - Plugin extending Datastar with property binding capabilities via data-prop attribute. Enables reactive signal binding directly to DOM element properties (not HTML attributes) for use cases like input values, checkbox states, and custom web component properties. Supports single property binding and multiple properties using object syntax. Available as npm package @mbolli/datastar-attribute-prop. By @mbolli #frontend #plugin #property-binding #reactivity

  • data-on-remove - Lightweight plugin enabling execution of custom Datastar expressions when DOM elements are removed from the page. Provides data-on-remove attribute with access to special variables (el for removed element, parent for former parent node). Use cases include performance measurement, security verification of sensitive data removal, and signal cleanup. MIT License. Available as npm package. By @Regaez #frontend #plugin #dom #lifecycle

  • data-persist - Plugin recreating Datastar persist functionality for maintaining signal state across page loads. Built with TypeScript using the datastar-plugin-starter template, provides localStorage-based state persistence. Includes development environment with esbuild compilation, watch mode, and demo page with PicoCSS styling. Compatible with Datastar v1.0.0-RC.6. MIT License. By @ndendic #frontend #plugin #persistence #localstorage

  • datastar-beacon - Custom plugin integrating the browser's Beacon API for telemetry and tracking within Datastar applications. Provides @beacon action to send application state data to specified URLs with automatic signal inclusion, flexible include/exclude filtering, dual transmission modes (immediate/delayed), and smart defaults (excludes underscore-prefixed local signals). Useful for debugging, analytics, and capturing user interactions before page navigation or closure. MIT License. Version 1.0.0. By @Regaez #frontend #plugin #analytics #telemetry #beacon

  • data-highlight - Datastar attribute plugin integrating the CSS Custom Highlight API for syntax highlighting without wrapped span elements. Provides data-highlight for applying language-based syntax highlighting and data-highlight-text for updating text while preserving highlight ranges. Features on-demand tokenizer loading as ES modules, CSS-driven styling via ::highlight() pseudo-element, extensible architecture with PrismJS compatibility, and adapts to DOM changes synergizing with data-json-signals. MIT License. Version 0.1.0. Live demo at threadgold.nz/demos/data-highlight. By @Regaez #frontend #plugin #syntax-highlighting #css-highlight-api

  • datastar-speech - Plugin simplifying text-to-speech functionality by wrapping the Web Speech API with a declarative interface suited for Datastar expressions. Provides @speech() for queuing text utterances and @speechCtrl() for playback controls (play, pause, next, previous, reset). Features queue management (append/insert/replace), voice customization (language, voice selection), adjustable speech parameters (rate, pitch, volume), and custom events for state monitoring. Smooths over Web Speech API complexity with a declarative HTML attribute approach. By @Regaez #frontend #plugin #speech #accessibility #web-speech-api

  • data-on-gyroscope - Datastar plugin integrating device gyroscope sensor capabilities into web applications. Provides data-on-gyroscope attribute to execute Datastar expressions when new sensor readings arrive. Features customizable sampling frequency via __frequency modifier (defaults to 60Hz), access to angular velocity values through velocities array (x, y, z axes), and direct signal binding for reactive sensor data integration. Enables building motion-responsive interfaces using device orientation data. Includes live demo at threadgold.nz/demos/data-on-gyroscope. MIT License. Version 1.0.0. By @Regaez #frontend #plugin #sensors #gyroscope

  • datastar-cleanup - Lightweight plugin (234 bytes minified) for automatic cleanup execution when Datastar's cleanup mechanism is triggered. Provides data-on-cleanup attribute for declarative resource disposal, timer cleanup, state management, and logging. Cleanup triggers include element removal, attribute changes, DOM morphing operations, and server patches. Leverages Datastar's built-in cleanup system. By @alvarolm #frontend #plugin #dom #lifecycle #cleanup

  • datastar-resilient - A library for building resilient web applications with auto-recovering SSE connections. Features configurable backoff/retry strategies, connection state monitoring, and stream manipulation. By @alvarolm #frontend #real-time #resilience

  • Solidstar - Almost drop-in replacement for Datastar using SolidJS reactivity system. Enables interoperability between hypermedia-driven frontend logic and Solid components. Features TypeScript support, reactive web components, and efficient signal-based state management (14.7 KiB gzipped). By @solidstarjs #frontend #solidjs #reactivity

  • via - Real-time engine for building reactive web applications entirely in Go. Eliminates templates, JavaScript, transpilation, and hydration through pure Go implementation with single SSE stream for real-time updates. Integrates Datastar for browser reactivity through signals and real-time HTML/Signal patches, plus Gomponents (via via/h package) for Go-native HTML composition. Enables full-stack Go development with type safety and composition patterns. Experimental (approaching v0.1.0). By @go-via #go #framework #backend #real-time #experimental

  • gomponents-datastar - Go library providing Datastar attributes and helpers for gomponents. Enables integration of Datastar functionality into the gomponents component system with helper functions to streamline Datastar usage in Go-based web development. Mostly feature-complete and actively developed. MIT License. By @maragudk #go #library #backend #components

  • DatastarUI - Go/templ component library porting shadcn/ui with minimal JavaScript. Provides server-side rendered, reactive components with Tailwind CSS styling, type-safe arguments, built-in dark mode, and comprehensive accessibility support. By @CoreyCole #components #go #templ #backend

  • northstar - Boilerplate for creating real-time hypermedia applications with Datastar, Go, NATS, Templ, and Tailwind CSS. Includes embedded NATS server, live reload, web components support, and Docker containerization. By @zangster300 #backend #boilerplate #go #real-time

  • HyperPress - WordPress plugin for modern hypermedia development with HTMX, Alpine AJAX, and Datastar. Features REST API for HTML partials, HyperFields (custom metadata API), and HyperBlocks (PHP-first Gutenberg blocks). By @EstebanForge #wordpress #backend #integrations #php

  • Laravel Datastar - Laravel package for building reactive frontends with Datastar. Provides Blade directives for element patching, signal management, and backend-driven state management. Enables live search, infinite scrolling, form submissions, and pagination without frontend frameworks. By @putyourlightson #laravel #backend #integrations #php

  • Datastar for Craft CMS - Craft CMS plugin for building reactive web interfaces using Twig templates. Features template-driven state management, backend request handling, and support for live search, infinite scroll, and form submissions. Free and open-source (MIT License). By @putyourlightson #craftcms #backend #integrations #php

  • Swoldier - PHP micro-framework for building fast, concurrent web applications using Swoole's coroutine-based asynchronous runtime. Features flexible routing with path parameters, middleware support, HTTP/2 and SSL/TLS support, and native Brotli/Zstd compression. Includes Datastar integration via datastar-swoldier SDK for server-sent events, DOM patching, signal management, and script execution. WTFPL License. By @wilaak #php #backend #framework #swoole #real-time

  • Electron SSR - Novel approach to building Electron desktop applications using server-side rendering from the main process. Eliminates traditional IPC complexity by allowing direct access to Node.js modules and Electron APIs. Supports htmx, Alpine.js, and Datastar. By @StreamUI #electron #desktop #integrations

  • ft-datastar - Python library integrating Datastar with FastHTML framework. Provides helper functions for dynamic attribute binding, two-way form binding, computed properties, event handlers, and conditional rendering. Includes SSE decorator for real-time signal and DOM fragment updates, plus FastHTMLDatastarSSEResponse class for streaming responses. Ships with Datastar v1.0.0-beta.8. By @banditburai #python #backend #library #fasthtml #real-time

  • starHTML - Python-first hypermedia web framework forked from FastHTML, using Datastar for client-side reactivity. Features type-safe development with IDE support, Server-Sent Events for real-time interactions, and framework-agnostic CSS compatibility. Enables reactive web applications using Python syntax. By @banditburai #python #backend #framework #real-time

  • Stario - Lightweight Python web framework built on Starlette for joyful, HTML-first development. Features Server-Sent Events support, Datastar patches/signals integration, simple dependency injection, and built-in Brotli compression. Emphasizes minimal complexity and rapid prototyping. By @Bobowski #python #backend #framework #real-time

  • datastar.wow - Data-oriented Clojure library for building Datastar applications. Provides middleware for Ring handlers with simplified signal handling, data-oriented effects, Hiccup support, and extensible registries. Built on the official Datastar Clojure SDK, Nexus, and optionally Charred (JSON) and Chassis (HTML). By @brianium #clojure #backend #library

  • safe-js - Clojure library for securely generating JavaScript strings with user input interpolation for Datastar applications. Provides safe string interpolation macros (#{} for escaped forms, #() for escaped invocations, #!{} for unescaped forms, #!() for unescaped invocations) that prevent injection attacks when embedding user data into JavaScript code. Prioritizes security without sacrificing performance. By @KnowClick #clojure #backend #library #security

  • Hyperlith - Small, opinionated fullstack Clojure framework built on Datastar for server-driven web applications. Features view = f(state) pattern with single render function per page, push-based multiplayer via SSE streaming, stateless CQRS design where actions modify databases and render functions push updates, HTML compression over SSE (90-100x reduction), and minimal dependencies for long-term stability. Emphasizes production REPL accessibility, operational simplicity, and deployment sovereignty on standard VPS providers. By @andersmurphy #clojure #backend #framework #real-time #server-driven

  • gleam-datastar - Gleam language bindings for building reactive web applications with Datastar. Includes three packages: core Datastar bindings for frontend actions and server-sent events, Wisp integration, and Lustre integration. Provides type-safe tools for server-side rendering with reactive capabilities. By @sporto #gleam #backend #library

  • datastar.http.zig - Zig programming language implementation of the Datastar SDK, fully conforming to the official specification. Features stream-based architecture with no implicit allocations, support for all patch operations (DOM, signals, scripts), built-in pub/sub system for multiplayer scenarios, and passes all official Datastar validation tests. Built on Zig 0.15.2 and http.zig library, optimized for microsecond-level performance and minimal memory footprints. By @zigster64 #zig #backend #library #performance

  • Datastar for Java - Unofficial Datastar SDK for any pure Java HTTP server framework like Spring, Quarkus or Jakarta EE. No dependencies, no Maven or any build tool required. Just copy and paste two files to your source tree. By @mailq #java #backend #nobuild

  • jte-datastar-spring-boot-starter - Spring Boot starter library with autoconfiguration for server-side HTML rendering and real-time updates. Combines Java Template Engine (JTE) for HTML rendering with Datastar Server-Sent Events (SSE) for pushing updates to browsers. Features async event emission using virtual threads, support for PatchElements and PatchSignals events, and connection management for multiple concurrent SSE connections. Apache 2.0 License. By @Gadnex #java #spring #backend #library #real-time #jte

  • DataStar - Raku language SDK for building reactive hypermedia applications with Datastar. Provides server-sent events support for real-time communication, signal management for reactive state updates, and DOM patching capabilities with selector targeting and multiple insertion modes. Integrates with Cro web framework. Cross-platform testing on Linux, macOS, and Windows. By @arunvickram #raku #backend #library #real-time

Guides & How-tos

  • The Datastar Way - Distilled personal study notes documenting Datastar's core concepts and architectural patterns. Covers hypermedia controls via data-on attributes, Server-Sent Events with Brotli compression, Fat Morphing algorithm for efficient DOM updates, state-driven rendering philosophy ("View = Function(State)"), and client-side reactivity through signals. Includes practical implementation guidance and candid documentation of framework constraints (progressive enhancement, History API, PWA limitations). Serves as a concise reference for understanding Datastar's novel approach to web development. By @Huangphoux #getting-started #reference #architecture #patterns #learning

  • The Great Unlearning Doc - GitHub discussion proposing a comprehensive guide to help developers unlearn common misconceptions about web development with Datastar. Covers SSE compatibility with HTTP features (compression, standard methods), architectural differences from WebSocket approaches, fragment-based updates, backend flexibility, and the "10 Commandments" for working with Datastar. Key insights include keeping state server-side, prioritizing fragments over signals, and understanding that SSE is just HTTP with chunked responses. Community-driven discussion with valuable architectural guidance. #architecture #patterns #getting-started #sse #best-practices

  • Production Considerations - Comprehensive analysis of Datastar's known limitations, architectural trade-offs, and production challenges. Covers security implications (XSS, CSP requirements), SSE reconnection behavior, HTTP/1.1 compatibility issues, state management limitations, and API stability concerns. Includes framework comparisons, real-world impact assessments, mitigation strategies, and guidance on when Datastar is (or isn't) appropriate for your use case. Essential reading for teams evaluating Datastar for production deployments. #production #security #architecture #decision-making

  • Datastar RC6 Data Attributes Reference - Technical API reference documenting 30+ Datastar RC6 data attributes. Provides a lookup table of declarative attributes for data binding, event handling, computed values, dynamic styling, request tracking, and change observation. Each entry includes attribute syntax and functionality description. By @winkler1 #reference #api #documentation

  • Simplicity Is A Virtue: How To Build Modern Web Apps With Datastar - Comprehensive book and learning guide for Datastar (work in progress). Aims to be the definitive resource for learning Datastar with a focus on simplicity and practical application. Uses the "mirabeau" presentation tool as a demonstration project. By @delaneyj and @iansmith #getting-started #tutorial #learning

  • TodoMVC with Datastar - Tutorial demonstrating full-stack web development with event sourcing and "stream driven development" methodology. Shows how to build a TodoMVC application using event streams as the source of truth, with server-driven UI updates through SSE streaming HTML fragments. Integrates xs (event sourcing framework), minijinja-cli (templating), http-nu (HTTP server), and Datastar for reactive frontend bindings without client-side state management. By @cablehead #tutorial #event-sourcing #real-time #sse #server-driven

  • Intercepting and Modifying SSE Streams - Advanced technique using fetch monkey-patching to intercept and transform SSE responses before Datastar processes them. Includes error handling examples. By @alvarolm #real-time #patterns #advanced

  • Signaling When Datastar Has Loaded - How to dispatch a custom event when Datastar initializes, enabling third-party libraries to safely interact with Datastar-managed elements. #patterns #integrations #getting-started

  • Basic SSE Reconnection Workaround - Simple polling mechanism to maintain SSE connections through server restarts. Note: This is a basic workaround approach. By @gazpachoking #real-time #patterns #workaround

Articles & Blog Posts

  • Datastar: First Impressions - Detailed exploration of Datastar as an alternative to HTMX, covering reactive programming with signals, Server-Sent Events, and server-centric architecture. Compares Datastar with traditional frameworks and explains core concepts like actions and fragments. By Chris Malek #introduction #comparison #architecture

  • Datastar first impressions, coming from React - A React developer's first experience building with Datastar by constructing a spellchecker component. Explores the architectural shift from client-side state management to server-driven rendering, signal-based reactivity, and simplified request handling. Discusses the developer experience compared to React's paradigm, including eliminating build complexity and working with semantic HTTP methods. By @Regaez (Thomas Threadgold) #introduction #comparison #react #tutorial

  • Why I Switched from HTMX to Datastar - Personal account of transitioning from HTMX to Datastar, highlighting Datastar's simpler API, component-based approach, real-time SSE updates, and server-driven state management. Explores multi-user collaborative applications and web-native features like CSS view transitions. By Everyday Superpowers #comparison #htmx #real-time #sse

  • Datastar + Common Lisp - Exploration of using Datastar with a Common Lisp backend for reactive web development. Discusses the benefits of server-side state management and alternative approaches to complex modern frameworks, showcasing a simpler and more enjoyable development experience. #commonlisp #introduction #tutorial

  • just f*cking use datastar - Satirical critique of modern web development complexity, advocating for Datastar as a simpler alternative to frameworks like React. Emphasizes native web technologies and reactive data attributes over complicated frontend tooling. By le guide #opinion #comparison #simplicity

  • ui = fn(state) done right - Technical blog post critiquing modern frontend complexity and proposing a simpler "ui = function(state)" approach using hypermedia and server-side rendering. Introduces Single Route Architecture with Datastar for keeping state on the backend, includes practical counter app example. #architecture #simplicity #tutorial #backend

  • Datastar attribute plugin for signal value translation - Tutorial on creating a custom Datastar attribute plugin (data-textlabel) to decouple UI formatting from signal values. Demonstrates extending the built-in data-text attribute with custom processing rules, using a labels object for value translation, and working with Datastar's plugin API. Includes full code examples on GitHub/Codeberg and CodePen. By Jarkko Saltiola #tutorial #plugin #advanced #patterns

  • Misunderstanding SSE - Technical article challenging common misconceptions about Server-Sent Events (SSE), explaining that SSE is fundamentally a text-based response format that works with any HTTP method (not just GET) and should be the default for server-driven page updates. Demonstrates progressive updates, form validation, and error handling using Datastar with extensive code examples comparing text/html vs text/event-stream approaches. By drk (YAGNI Club) #architecture #sse #tutorial #patterns #introduction

  • Building an AI-Powered App Entirely in Go - Tutorial demonstrating how to build sophisticated AI applications using only Go, progressing from simple prompts to multi-stage LLM pipelines. Shows evolution through five increasingly complex flows including structured JSON outputs and content moderation. Built with Go, Genkit (AI orchestration), Templ templates, Datastar for reactive SSE-driven UI, and Google Gemini 2.0 Flash. Features production-ready patterns with CSRF protection and rate limiting. Includes live demo and full source code. Demo: welcome-note-generator. Source: github.com/vnaveen-mh/welcome-note-generator. By @vnaveen-mh (Naveen V) #go #ai #tutorial #genkit #templ #real-time #llm

  • Datastar Tips - Technical guide on building Datastar locally from source using esbuild. Covers the compilation process from the library directory, including options for minification, source mapping, and configuring the alias prefix using the --define flag. Provides practical steps for developers who want to work with Datastar source code directly. By @lllama (Felix Ingram) #guide #building #development #esbuild

  • Let's Write a Datastar Plugin! - Comprehensive tutorial on creating custom Datastar plugins by building a data-bind-attr plugin that combines two-way binding with attribute synchronization. Covers Datastar's plugin architecture (attributes, actions, watchers), signal management using getPath() and mergePaths(), mutation observation patterns with MutationObserver to prevent infinite loops, and practical testing with interactive examples. Demonstrates how data-bind establishes bidirectional binding between element values and signals with specialized handling for different input types. By @lllama (Felix Ingram) #tutorial #plugin #advanced #development #signals

Examples

  • 1a5s-datastar - Reimplementation of the "1 App 5 Stacks" project using Go, Templ, and Datastar, demonstrating high-performance web development with minimal code. Features just 321 lines of Go across 6 files plus ~125 lines of Templ, sub-millisecond query execution, 19MB memory footprint, and single binary deployment with no external dependencies. Uses pure Go SQLite implementation and standard HTTP requests (supports HTTP/2 and HTTP/3). By @delaneyj #go #demo #performance #templ #minimal

  • realworld-datastar - RealWorld application implementation built with Go, Templ, and Datastar. Provides a full-stack reference implementation demonstrating authentication, database seeding, and task-based development workflow. Requires Go 1.23+ with watch mode for development. MIT License. By @delaneyj #go #demo #realworld #templ #fullstack

  • todostar - Collaborative todo application demonstrating server-driven web development with minimal JavaScript. Built with Go, Templ templates, Datastar, TailwindCSS, and WebAwesome web components. Showcases hypermedia-first architecture with ~2,000 lines of Go code and hot-reloading via Templier. By @romshark #go #demo #collaborative #server-driven

  • multi_db - Rails 8 demonstration project showcasing multi-database architecture with SQLite where each user gets their own isolated database. Features automatic database creation on first login, migration management across user databases, Rodauth authentication, and Datastar for frontend interactions. Includes Docker/Kamal deployment configuration. Experimental exploration of per-user database isolation for SaaS applications. By @asmorris #rails #ruby #sqlite #demo #architecture #saas

  • sourced_todo - Ruby + Sinatra + PostgreSQL demonstration of Event Sourcing and CQRS patterns using the Sourced library. Features command-event flow architecture, time travel capability to view historical states, eventually consistent updates with background processing, multi-tab synchronization, and Datastar for server-driven reactive UI streaming. Uses PostgreSQL as both event store and message bus. Includes optional Slack integration. Work in progress exploring developer experience patterns. By @ismasan #ruby #sinatra #event-sourcing #cqrs #demo #real-time

  • DatastarExamples - ASP.NET Core examples demonstrating reactive web applications with Datastar across three architectural approaches: MVC (Model-View-Controller), Razor Pages, and Minimal API. Showcases server-side rendering with reactive updates using server-sent events, keeping business logic on the backend while delivering instant UI feedback. Features live search interface demonstrating real-time interactions. Live demo at datastar.rickgraner.com. By @RickTheHat #dotnet #csharp #aspnet #mvc #demo #server-driven

  • fsharp-datastar-example - Example application demonstrating web development with F# and Datastar. Built with .NET SDK 9 and Paket package manager, provides a practical tutorial for developers exploring functional web development with Datastar. Features straightforward setup and runs locally at localhost:5000. By @meiermade #fsharp #dotnet #demo #getting-started

  • Minification Measurements - Performance measurement tool demonstrating the impact of JavaScript library minification on web page load times. Compares minified vs unminified versions of HTMX, Alpine.js, Datastar, and other libraries using real-world mobile network conditions and Core Web Vitals metrics. By @delaneyj #performance #metrics #optimization

  • hifi-crud - Exploration of server-driven web applications built in Clojure using "view = f(state)" principle. Features immediate mode UI updates via Datastar SSE, backend state management, strict CQRS separation, and functional core/imperative shell architecture. Built with Datahike (Datomic-like database), Hiccup templates, and Tailwind CSS. Designed for solo developers and small teams to build scalable business applications without complex technology stacks. EUPL-1.2 License. By @Ramblurr #clojure #demo #architecture #server-driven #real-time

  • One billion cells - A Clojure implementation of the One Billion Row Challenge. By Anders Murphy #clojure #performance

  • unac - Ultimate Noughts and Crosses (Tic-Tac-Toe) web game built with Go and Datastar. Live demo at unac.threadgold.nz. By @Regaez #go #game

  • Blinksy - Real-time multiplayer demo application built with Laravel and Datastar. Showcases the capabilities of the Laravel Datastar package for building interactive, multi-user experiences. By @putyourlightson #laravel #multiplayer #real-time #demo

  • Craft CMS Datastar Demos - Interactive demonstration site showcasing Datastar integration with Craft CMS. Features four practical examples: live search, pagination, load more functionality, and filters. Built using the Datastar Plugin for Craft CMS. By @putyourlightson #craftcms #demo #php

  • Datastar Remix Jam Demos - Collection of demo applications built with Datastar and Remix. By @jmstevers #remix #react #demo

  • Explainers: Gerrymandering - Interactive educational tool demonstrating how congressional district boundaries affect electoral outcomes. Uses Datastar's reactive signals, computed properties, and data binding to visualize partisan bias across 435 U.S. House districts with dynamic national outcome simulations. Source: github.com/schreiaj/explainers. By @schreiaj #demo #educational #visualization

  • datastar-chat-example-ts - Real-time chat application demonstrating Datastar with server-side rendering. Built with TypeScript, Hono web framework, and SQLite/LibSQL database. Features user authentication, session management, and Docker containerization. Includes Tailwind CSS and DaisyUI for styling. By @Mortalife #typescript #real-time #chat #hono #demo

  • Datastar JS Interop Demo - Exploration of bidirectional integration between Datastar and third-party JavaScript libraries. Demonstrates seamless data and control flow using Google Maps API wrapped in a Web Component. Shows how to use data-bind, data-attr, and data-ref for reactive updates and method invocation with external JS libraries. By @biotz #javascript #interoperability #webcomponents #demo

  • Datastar React Interop Demo - Demonstration of bidirectional integration between Datastar and React components using Web Components as a bridge. Features Floating UI as a practical example, showing how to wrap React components for Datastar compatibility with bidirectional data flow (Datastar signals β†’ React props, React events β†’ Datastar signals). Includes generic conversion function for React-to-Web-Component transformation. By @biotz #react #javascript #interoperability #webcomponents #demo

  • Chaos - Datastar Spring MVC Game - Interactive multiplayer minigame built with Datastar and Spring MVC framework. Designed for players in the same physical room using mobile devices, features real-time chaos meter updates and audio effects using Howl.js. Demonstrates building real-time gaming experiences with Datastar and Java backend. #java #spring #multiplayer #real-time #game #demo

  • at-a-star-firehose - Real-time filterable interface for viewing the Bluesky atproto firehose. Demonstrates Datastar's reactive rendering capabilities combined with Bluesky's public data feed for real-time data visualization and filtering. Built with TypeScript and Bun. By @derekr #typescript #bluesky #real-time #demo

  • kanban-comparison - Comprehensive comparison of 10 modern web frameworks measuring real-world bundle sizes using identical Kanban board implementations. Compares Next.js, TanStack Start, Nuxt 4, Analog, Marko, SolidStart, SvelteKit, Qwik City, Astro + HTMX, and Datastar. Features rigorous statistical methods with 10 runs per page, outlier removal, and mobile device emulation (Pixel 5, 4G throttling). All frameworks achieve excellent Lighthouse performance scores (100), with Datastar demonstrating competitive bundle size in the MPA/SSE category. By @json-bateman #benchmark #comparison #performance #bundle-size

  • benchmark-datastar - Performance benchmark comparing innerHTML operations across vanilla JavaScript, jQuery, Datastar (standard and replace mode), htmx, and Idiomorph. Tests two scenarios: small dataset (100 elements) and large dataset (5,000 elements) to measure DOM manipulation efficiency. Uses Playwright for browser automation and Bun runtime for testing. Demonstrates Datastar's competitive performance in DOM updates compared to other popular libraries and frameworks. By @zachwill #benchmark #performance #comparison #dom

  • Interactive Calendar Proof of Concept - Calendar interface demonstrating Datastar signals, keyboard navigation, and animations. Features comprehensive keyboard shortcuts (arrow keys for navigation, t/y/m for today/yesterday/tomorrow, space/enter to select), signal-based hover effects and bounce animations, focus ring management, and view cycling (days/months/years). Showcases signal usage for UI state including cal-bounce-id for animations and cal-hover-id for hover effects. Proof of concept exploring signal-driven interactivity patterns. Chrome only. Created 2025-11-18. By Modern-Simulation #demo #signals #keyboard #animations #codepen

Videos & Screencasts

  • Datastar Series - Comprehensive 11-episode video tutorial series covering Datastar fundamentals. Episodes include: introduction to Datastar, Rocket's Eye overview, example flow walkthrough, hypermedia history lessons (parts 1 & 2), data attributes overview/ordering/casing/aliasing/error handling, and Server-Sent Events overview. Great for learning Datastar from basics to advanced concepts. By Lock In Code #video #tutorial #series #introduction #sse

  • Is Datastar the full-stack SSE framework of the future? - A video exploring Datastar's capabilities as a full-stack SSE framework, covering its architecture, real-time features, and potential for building modern web applications. By Everyday Superpowers #video #screencast #introduction

  • Datastar – The hypermedia framework (Podcast) - Official Datastar podcast discussing how Datastar helps build reactive web applications with the simplicity of server-side rendering and the power of a full-stack SPA framework. Episodes cover tooling, performance, signals, and framework design. #podcast #introduction #architecture

  • Datastar Presentation (Slidev) - Interactive slide deck presentation about Datastar built with Slidev. #presentation #introduction

  • Real-Time Collaboration with Sprig and Datastar - Conference session at Dot All 2025 Lisbon (September 24, 2025) exploring how to leverage Sprig and Datastar to create dynamic, real-time, multi-player experiences driven by the backend within Craft CMS sites. By Ben Croker #conference #craftcms #real-time #multiplayer #sprig

Community Collections

  • Awesome Datastar - A curated awesome list of Datastar resources including official links, blog posts, development tools, video presentations, example projects, and podcasts. Community-maintained collection for developers learning and using Datastar. By @Yacobolo #community #collection #learning

Using Datastar

  • Conductor Sam - AI-powered train travel assistant for Europe and beyond. Provides instant answers for rail journey planning, route suggestions, seat reservations, station information, and ticket purchasing. Built with Datastar for interactive conversational interface. Datastar v1.0.0-RC.5 (detected 2025-10-19). By @mortalife #ai #travel #production

  • Muto Mobility - Mobility Intelligence Platform helping companies manage all aspects of mobility including cars, bikes, budgets, contracts, and charging stations in one unified platform. From Latin "to move or change", Muto modernizes how businesses handle evolving mobility needs. Datastar v1.0.0-beta.11 (detected 2025-10-19). #mobility #business #saas #production

  • Buena Vista Winery - Historic winery website for California's second oldest winery, founded in 1857 by Agoston Haraszthy and located in Sonoma, California. Uses a framework that has Datastar as a dependency. Datastar v1.0.0-RC.5 (detected 2025-10-19). #winery #business #production

  • Pizza Ranch - Family-friendly buffet restaurant chain offering pizza, chicken, salad bar, and FunZone Arcade games. Features full menu for carryout and delivery ordering. Uses a framework that has Datastar as a dependency. Datastar v1.0.0-RC.5 (detected 2025-10-19). #restaurant #food #business #production

  • Open Squash - Leading 501(c)(3) nonprofit squash organization in New York City committed to making squash accessible and affordable for everyone. Offers world-class facilities, professional coaching, leagues, clinics, and a vibrant community for players of all ages and levels. Uses a framework that has Datastar as a dependency. Datastar v1.0.0-RC.5 (detected 2025-10-19). #sports #nonprofit #community #production

  • Electrical Wholesaler - Irish electrical wholesale supplier. Datastar main version (detected 2025-10-20). #business #ecommerce #production

  • THFC Database - Interactive comprehensive database for Tottenham Hotspur Football Club featuring detailed historical records and statistics. Provides match results, competition statistics across Premier League, FA Cup, European tournaments, player information, transfer records, and unique Scorigami feature tracking score combinations. Covers over 7,600 competitive matches with detailed filtering and historical analysis. Datastar v1.0.0-RC.5 (detected 2025-10-20). #sports #football #database #statistics #production

  • 10,000 Steps - Free evidence-based physical activity initiative by CQUniversity Australia, operating since 2001. Provides step tracking, monthly challenges, tournaments, workplace wellness programs, and community engagement features. Mobile app integrates with Apple Health and Health Connect. Over 714,000 members have logged 462+ billion steps. Funded by Health and Wellbeing Queensland. Datastar main version (detected 2025-10-20). #health #fitness #wellness #australia #nonprofit #production

  • CARM - Christian Apologetics Research Ministry providing educational resources for Christian apologetics and theology. Features articles addressing theological questions, Matt Slick Live Radio broadcasts (M-F 6PM EST), community discussion forums, online schools and courses, and shop for apologetics materials. Datastar v1.0.0-RC.5 (detected 2025-10-22). #education #community #radio #production

  • Soffio - Rust-powered content publishing platform combining static site rendering with an interactive admin interface. Provides fast, statically-rendered public pages with interactive elements and a productivity-focused admin console (admin.soffio.xfyyzy.xyz) for writing, editing, and publishing blog content. Built with Axum, Askama, SQLx, and Datastar. Features organized domain/application/infrastructure architecture. Demo database resets hourly. Open source (BSD-2-Clause). Datastar version not detected (checked 2025-11-12). By @xfyyzy. Source: github.com/xfyyzy/soffio #rust #cms #blog #content #production


Contributing

Contributions are welcome! To add a reference:

  1. Add your reference to the References section in this README
  2. Include clear descriptions and links
  3. Add attribution when applicable (author, source, etc.)
  4. Hashtags are optional but encouraged for discoverability
  5. If additional context is needed, create a markdown file in /docs
  6. Version Tracking for "Using Datastar": When submitting entries to the "Using Datastar" category, include (if possible) the Datastar version detected and the date when it was detected. This helps track framework adoption and compatibility as Datastar evolves.
  7. Submit a pull request

Community

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •