Solidstar is an almost drop-in replacement of Datastar with Solid reactivity under the hood, enabling interoperability between hypermedia-driven frontend logic and Solid components.

Quick Start • Stackblitz • Comparison • Guide • API Docs • Changelog • Discord

// index.tsx
import { customElement } from "solid-element";
import { signals } from "solidstar";

customElement("my-counter", () => (
  <button onClick={() => signals.count++}>{signals.count}</button>
));

index.html

<script type="module" src="index.tsx"></script>
<div data-signals-count="0" data-text="$count"></div>
<my-counter></my-counter>

npx giget@latest gh:solidstarjs/solidstar/template#solid my-app
cd my-app
npm install
npm run dev

<script type="module" src="https://cdn.jsdelivr.net/gh/solidstarjs/solidstar@0.2.2/bundles/solidstar.js"></script>

Import solidstar/core instead of solidstar to optimize your bundle.

export * from "solidstar/core";
import { load } from "solidstar/core";
import * as Plugins from "solidstar/plugins";

// Specify the plugins you want
load(
  Plugins.Class,
  Plugins.Signals, 
  Plugins.Text
);

You can use Typescript declaration merging, to declare available signals in your app.

declare module "solidstar" {
  interface Signals {
    count: number;
    optionalText?: string;
    foo: {
      bar: number;
    }
  }
}

Solidstar's signals object is based on Solid's createMutable. Accessing undefined signals behaves slightly different compared to Datastar's implementation:

$null?.title?.length