The open source, AI Agent Native JavaScript framework.
<script src="https://velofy.github.io/summitjs/summit.min.js" defer></script>
<div s-data="{ open: false }">
<button @click="open = true">Expand</button>
<span s-show="open">
Content...
</span>
</div>Everything that makes HTML-first behavior lovable, rebuilt on a modern core.
A real signal engine updates only the exact DOM that changed. Big lists and busy pages stay fast.
Expressions run through a hand-written interpreter. No eval, no unsafe-eval.
One script tag and you are live, with focus, positioning, and persistence already inside. Authored in TypeScript, shipped with full types.
s-for reconciles by key, moving nodes instead of rebuilding them. State stays put.
15 directives, 9 magics, the @ and : shorthands. Know the idiom, know Summit.
Accessible, token-themed components you copy into your markup and keep. Explore the UI Library.
Every widget below is powered by the same script this page loads.
Counter · s-data
To-do · s-for + s-model
Nothing left to climb.
Tabs · s-show + :class
Reads track, writes trigger, and only the effects that touched a value re-run.
Expressions are parsed and interpreted, so a strict Content-Security-Policy just works.
The whole runtime, interpreter included, is about 16KB gzipped, with focus trapping, floating positioning, persistence, and input masking already built in.
Form · two-way binding, live
Prefix s-, with @ for events and : for binding.
s-datacomponent scopes-texttext contents-htmlinner HTML:bindattributes@oneventss-modeltwo-ways-showvisibilitys-ifconditionals-forkeyed listss-effectreactive runs-transitionenter/leaves-teleportmove in DOMs-refelement handles-initon inits-cloakanti-flickerBuilt in the spirit of Alpine's HTML-first ergonomics, then pushed further where it counts.
| Capability | Summit | Classic HTML-sprinkle runtimes |
|---|---|---|
| Reactivity | Fine-grained signals | Effect re-runs, coarser |
| Strict CSP (no unsafe-eval) | Default | Separate limited build |
| Keyed list reconciliation | Built in | Limited |
| Cached computed getters | Yes | Recomputed each read |
s-if on any element | Yes | Template tag only |
| TypeScript types shipped | Yes | Partial |
| Focus trap, floating menus, persist, masking | Built in | Separate plugins |
| Bundle size (gzip) | ~16KB, batteries included | ~16KB core, plugins extra |
Add the script, write the markup. That is the whole setup.
# Drop-in, no build. It auto-starts.
<script src="https://velofy.github.io/summitjs/summit.min.js" defer></script>
# Or with a bundler
npm install summitjs