spark-html-devtools
v1.1.0
Published
A tiny in-page devtools panel for spark-html — live store state, component tree, and patch activity.
Downloads
2,332
Maintainers
Readme
⚡ spark-html-devtools
A tiny in-page inspector for spark-html apps. Drop it in during development and get a ⚡ panel (bottom-right) showing:
- Stores — every named store and its live state.
- Components — the component tree (
[name]hosts) with each component's reactive state. - Patches — a counter, plus a brief amber outline on whichever component just re-rendered, so Spark's surgical reactivity is visible.
It's read-only — it never mutates your app.
import { devtools } from 'spark-html-devtools';
if (import.meta.env?.DEV) devtools(); // dev onlyInstall
bun add -d spark-html-devtoolsAPI
const stop = devtools({ open: true }); // start expanded
// …
stop(); // remove the panel + restore hooksRequires spark-html ≥ 0.21.4 (uses its inspectStores() introspection).
The Spark family
Small, single-purpose packages that share one philosophy: no compiler, no virtual DOM, no build step required — built for humans who love hand-writing their web apps. Add only what you use.
| Package | What it does |
|---|---|
| spark-html | The runtime — components, reactivity, stores, forms, scoped styles. ~14.6 kB gzip, 0 deps. |
| spark-html-bun | Dev server, bundler & preview on Bun — scoped HMR, no-build dev, post-build pipeline. |
| spark-html-router | <template route> routing — nested routes/layouts, route.query, active links. |
| spark-html-theme | Dark/light/system theming in one line — persisted, no flash. |
| spark-html-head | Reactive <title>/<meta> per route + a head store. |
| spark-html-motion | Enter/leave transitions on if/each blocks — transition="fade|slide|scale". |
| spark-html-devtools | In-page devtools — live stores, component tree, patch activity. |
| spark-html-query | Declarative async data — a self-fetching store (loading/error/data/refetch). |
| spark-html-persist | Persist stores to localStorage/sessionStorage in one line. |
| spark-html-websocket | A WebSocket as a reactive store — auto-reconnect, JSON, send(). |
| spark-prerender | Build-time SEO prerender + sitemap/robots — no SSR server. |
| spark-ssr | Full-stack SSR on Bun — the template is the backend: inferred DB, REST CRUD, auth, live updates. Precompiled + response-cached: fast by default. |
| spark-html-image | Build-time image optimization — webp/avif + responsive srcset, zero config. |
| spark-html-font | Font loading optimizer — preload + size-adjusted fallbacks, no FOUT. |
| spark-html-manifest | PWA manifest + icons + head tags (and optional service worker) from one config. |
| spark-html-offline | Offline URL imports — a service worker that caches CDN components. |
| spark-html-sri | Subresource Integrity — hash + verify assets and remote components. |
| create-spark-html-app | Scaffold a spark-html app in one command. |
| prettier-plugin-spark | Prettier for components — formats <script>/<style>, markup stays byte-for-byte. |
| spark-html-language-server | LSP — diagnostics, go-to-definition, prop autocomplete, hover docs. |
