Getting Started

Summit is a small JavaScript framework for composing behavior directly in your markup. You sprinkle a handful of s- attributes onto plain HTML and Summit brings it to life. No build step, no components to import, no JSX. If you know HTML, you already know most of Summit.

Under the hood it runs on a fine-grained signal engine, so when a value changes Summit updates only the exact piece of DOM that depends on it. Expressions are parsed and interpreted rather than handed to eval, so Summit works under a strict Content-Security-Policy with nothing extra to configure.

#Your first component

Here is a complete, working counter. With the Summit script on the page, this markup needs no other setup.

<div s-data="{ count: 0 }">
  <button @click="count--">-</button>
  <output s-text="count">0</output>
  <button @click="count++">+</button>
</div>

s-data declares a piece of state. @click (shorthand for s-on:click) runs an expression when the button is clicked. s-text keeps the <output> in sync with count. When you click, only that one number re-renders.

#Why Summit

• Fine-grained reactivity. A real signal engine tracks exactly which expressions read which values, so updates are surgical rather than re-rendering whole subtrees.
• CSP-safe by default. Expressions run through a hand-written interpreter. No eval, no new Function, no unsafe-eval in your policy.
• Tiny and buildless. The whole runtime is roughly 16KB gzipped. Drop in one script tag and it starts on its own.
• Familiar. A small, closed set of s- directives and $ magic properties, plus the @ and : shorthands. If you have used an HTML-first framework before, this will feel like home, with the rough edges filed off.

#Where to go next

• Installation covers the script tag, npm, and bundlers.
• Reactivity and State explains s-data, computed values, and methods.
• The Directives and Magic Properties sections are a complete reference for every attribute and helper.