Stellar is a local-first CSS generator with an interactive web editor.
stellar serve serves your generated CSS and exposes a /live-refresh
SSE endpoint that pushes stylesheet updates via Datastar.
stellar serve # http://localhost:7331$ curl localhost:7331/live-refresh
event: datastar-patch-elements
data: elements <link id="stellar-css" rel="stylesheet" href="http://localhost:7331/assets/css/stellar/...">Add a placeholder <link> with an id and a data-init to open the SSE
connection:
<head>
<link id="stellar-css">
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-RC.8/bundles/datastar.js"></script>
</head>
<body>
<div data-init="@get('http://localhost:7331/live-refresh')"></div>
</body>Datastar morphs the <link> by id, the browser fetches the stylesheet.
When the config changes, Stellar pushes a new hash. No reload.
Thanks for sharing!
Official instructions for setting up live refresh using a Rocket component are now also available at https://data-star.dev/pro/download#stellar-css