Surge
Surge is a tiny, ultra-lightweight JavaScript library that adds a surge of reactivity to your HTML — all in just 1kb (minified and gzipped).
No virtual DOM. No build step. No dependencies. Just drop it in and go.
Ever wonder why it takes 50kb of JavaScript, a virtual DOM, and a mountain of boilerplate just to build a counter?
With Surge, it doesn’t.
<main data-surge>
<button data-action="increment">Increase by 1</button>
<h1 data-value="count">0</h1>
</main>
<script>
surge({
increment: $ => $.count++
})
</script>
Surge embraces the simplicity of the web and the power of HTML-first development. It supercharges your HTML with a sprinkle of declarative magic using data-* attributes — no JSX, no diffing and no dependencies. Just clean, semantic HTML — with a surge of reactiviey.
⚡️ Two-way binding — Update your data or your UI, and both stay in sync ⚡️ Action binding with parameters — Easily wire logic to events like click, input, or submit ⚡️ LocalStorage support — Persist state with zero config ⚡️ Reactive HTML insertion — Dynamically add content and Surge wires it up automatically
Surge doesn't fight the browser — it works with it. HTML is your template and JavaScript is your logic. Surge brings them together in a powerful way then gets out of your way to let you build. And it's so small you'll hardly even know it's there.
Surge is built with simplicity in mind. Whether you’re prototyping, enhancing a static site, or building a micro-app, Surge gives you the power to be productive — without the weight of a full framework.