# Summit.js

> The open source, AI Agent Native JavaScript framework. Add behavior directly in your HTML with signal-powered s- directives and $ magics. No build step, CSP-safe, about 16KB with focus, positioning, persistence, and masking built in.

Summit is HTML-first: behavior lives on your markup as `s-` directives and `$` magics, evaluated by a small CSP-safe interpreter. Every page below is also available as clean markdown: append `index.md` to any page URL, or load the full corpus in one request.

## Getting Started

- [Getting Started](https://velofy.github.io/summitjs/start/): Summit is a rugged, signal-powered JavaScript framework for composing behavior directly in your HTML. Learn what it is and write your first component.

## Components

- [UI Library](https://velofy.github.io/summitjs/components/): An accessible, token-themed component library you copy into your markup and theme with CSS variables. Built with Summit, for people and AI agents.
- [Button](https://velofy.github.io/summitjs/comp-button/): Buttons with solid, outline, ghost, subtle, and danger variants, plus sizes and groups.
- [Input](https://velofy.github.io/summitjs/comp-input/): Text inputs and textareas with labels, help text, addons, and validation state.
- [Select](https://velofy.github.io/summitjs/comp-select/): A styled native select bound with s-model.
- [Checkbox & Radio](https://velofy.github.io/summitjs/comp-checkbox/): Accessible checkboxes and radio groups bound with s-model.
- [Switch](https://velofy.github.io/summitjs/comp-switch/): A toggle switch bound with s-model, for on/off settings.
- [Card](https://velofy.github.io/summitjs/comp-card/): A surface for grouping content, with header, body, and footer.
- [Badge & Tag](https://velofy.github.io/summitjs/comp-badge/): Small status labels and removable tags.
- [Alert](https://velofy.github.io/summitjs/comp-alert/): Contextual feedback banners for info, success, warning, and danger.
- [Avatar](https://velofy.github.io/summitjs/comp-avatar/): User avatars with initials or images, sizes, and stacked groups.
- [Progress & Spinner](https://velofy.github.io/summitjs/comp-progress/): Progress bars, spinners, and skeleton placeholders for loading states.
- [Tooltip](https://velofy.github.io/summitjs/comp-tooltip/): A CSS-only tooltip that appears on hover and focus.
- [Dialog](https://velofy.github.io/summitjs/comp-dialog/): A modal dialog for confirmations and focused tasks, with overlay and Escape to close.
- [Dropdown Menu](https://velofy.github.io/summitjs/comp-menu/): A button-triggered menu that closes on outside click or Escape.
- [Popover](https://velofy.github.io/summitjs/comp-popover/): A click-triggered floating panel for rich content, dismissed on outside click or Escape.
- [Toast](https://velofy.github.io/summitjs/comp-toast/): Transient notifications that stack and auto-dismiss.
- [Tabs](https://velofy.github.io/summitjs/comp-tabs/): Switch between panels with an underlined or soft tab bar.
- [Accordion](https://velofy.github.io/summitjs/comp-accordion/): Collapsible sections, single or multiple open.
- [Breadcrumb](https://velofy.github.io/summitjs/comp-breadcrumb/): Show the path to the current page.
- [Pagination](https://velofy.github.io/summitjs/comp-pagination/): Navigate through pages of results.

## Techniques

- [Techniques](https://velofy.github.io/summitjs/techniques/): Presentational recipes you compose with Summit's directives and classes: animated loaders, matte glassmorphism, retro interfaces, navbar patterns, and using Tailwind.
- [Loaders & Spinners](https://velofy.github.io/summitjs/technique-animation/): A gallery of pure-CSS loaders: rings, dots, bars, shapes, animated logo marks, and skeleton screens.
- [Matte Glassmorphism](https://velofy.github.io/summitjs/technique-glassmorphism/): Frosted, low-gloss glass surfaces that blur what is behind them while staying legible in both themes.
- [Neumorphism](https://velofy.github.io/summitjs/technique-neumorphism/): Soft, extruded UI built from twin light and dark shadows on a matching surface.
- [Claymorphism](https://velofy.github.io/summitjs/technique-claymorphism/): Puffy, rounded, playful clay surfaces with soft inner and outer shadows.
- [Retro UI](https://velofy.github.io/summitjs/technique-retro/): Hard offset shadows and neon text for a retro, terminal, or arcade look.
- [Brutalism](https://velofy.github.io/summitjs/technique-brutalism/): Stark borders, loud uppercase type, and blunt offset shadows for a raw, confident look.
- [Aurora Backgrounds](https://velofy.github.io/summitjs/technique-aurora/): Slow, glowing color fields that drift behind your content for a premium hero look.
- [Glow & Spotlight](https://velofy.github.io/summitjs/technique-glow/): A soft highlight that follows the cursor across a card, driven by a tiny Summit handler.
- [Navbar Patterns](https://velofy.github.io/summitjs/technique-navbars/): Navigation bars with active links, a responsive mobile menu, and a glass variant, wired with Summit state.
- [Using Tailwind CSS](https://velofy.github.io/summitjs/technique-tailwind/): Summit for behavior, Tailwind for styling. They compose cleanly because Summit lives in attributes and Tailwind lives in classes.

## Essentials

- [Installation](https://velofy.github.io/summitjs/installation/): Add Summit with a single script tag, or install it from npm for use with a bundler.
- [Reactivity and State](https://velofy.github.io/summitjs/reactivity-state/): Declare state with s-data, derive values with getters, and add behavior with methods. Summit tracks reads and updates only what changed.
- [Templating](https://velofy.github.io/summitjs/templating/): Put state on the screen with s-text and s-html, and drive attributes, classes, and styles with s-bind.
- [Events](https://velofy.github.io/summitjs/events/): Respond to user input with s-on and its @ shorthand, including a full set of modifiers for keys, timing, and event control.
- [Forms](https://velofy.github.io/summitjs/forms/): Bind form controls to state in both directions with s-model, covering text, numbers, checkboxes, radios, and selects.
- [Lifecycle](https://velofy.github.io/summitjs/lifecycle/): Run code when a component initializes, react to DOM changes automatically, and clean up when elements leave.

## Directives

- [s-data](https://velofy.github.io/summitjs/s-data/): Declare a reactive component and its state.
- [s-bind](https://velofy.github.io/summitjs/s-bind/): Bind attributes, classes, and styles, with the colon shorthand.
- [s-on](https://velofy.github.io/summitjs/s-on/): Listen for events with the @ shorthand and a full set of modifiers.
- [s-text](https://velofy.github.io/summitjs/s-text/): Set an element's text content from an expression.
- [s-html](https://velofy.github.io/summitjs/s-html/): Set an element's innerHTML from an expression.
- [s-model](https://velofy.github.io/summitjs/s-model/): Two-way binding for form controls.
- [s-show](https://velofy.github.io/summitjs/s-show/): Toggle an element's visibility with display.
- [s-if](https://velofy.github.io/summitjs/s-if/): Conditionally render an element in the DOM.
- [s-for](https://velofy.github.io/summitjs/s-for/): Render a list, reconciled by key.
- [s-effect](https://velofy.github.io/summitjs/s-effect/): Run a side effect that re-runs when its reactive dependencies change.
- [s-init](https://velofy.github.io/summitjs/s-init/): Run an expression when the element initializes.
- [s-ref](https://velofy.github.io/summitjs/s-ref/): Name an element so you can reach it through $refs.
- [s-cloak](https://velofy.github.io/summitjs/s-cloak/): Hide markup until Summit has initialized it.
- [s-ignore](https://velofy.github.io/summitjs/s-ignore/): Skip Summit initialization for an element and its children.
- [s-teleport](https://velofy.github.io/summitjs/s-teleport/): Render an element at a different place in the DOM.
- [s-transition](https://velofy.github.io/summitjs/s-transition/): Animate elements as they enter and leave.
- [s-intersect](https://velofy.github.io/summitjs/s-intersect/): Run an expression when an element enters or leaves the viewport.
- [s-trap](https://velofy.github.io/summitjs/s-trap/): Keep keyboard focus inside an element while it is open.
- [s-anchor](https://velofy.github.io/summitjs/s-anchor/): Position an element next to a reference, flipping to stay in view.
- [s-collapse](https://velofy.github.io/summitjs/s-collapse/): Animate an element open and closed by height.
- [s-mask](https://velofy.github.io/summitjs/s-mask/): Format an input as the user types against a pattern.

## Magic Properties

- [$el](https://velofy.github.io/summitjs/magic-el/): The current DOM element.
- [$refs](https://velofy.github.io/summitjs/magic-refs/): Elements in this component marked with s-ref.
- [$store](https://velofy.github.io/summitjs/magic-store/): The reactive global store.
- [$watch](https://velofy.github.io/summitjs/magic-watch/): Run a callback when a watched expression changes.
- [$dispatch](https://velofy.github.io/summitjs/magic-dispatch/): Dispatch a custom DOM event.
- [$nextTick](https://velofy.github.io/summitjs/magic-nextTick/): Run code after the next DOM update.
- [$root](https://velofy.github.io/summitjs/magic-root/): The root element of the nearest component.
- [$id](https://velofy.github.io/summitjs/magic-id/): Generate stable, scoped unique ids.
- [$data](https://velofy.github.io/summitjs/magic-data/): The current component's reactive state object.
- [$persist](https://velofy.github.io/summitjs/magic-persist/): Reactive state backed by localStorage that survives reloads.
- [$focus](https://velofy.github.io/summitjs/magic-focus/): Move keyboard focus around from an expression.

## Globals & API

- [Summit.data](https://velofy.github.io/summitjs/globals-data/): Register a reusable named component.
- [Summit.store](https://velofy.github.io/summitjs/globals-store/): Create and read global reactive state.
- [Summit.bind](https://velofy.github.io/summitjs/globals-bind/): Register a reusable set of bindings.
- [Summit.directive](https://velofy.github.io/summitjs/globals-directive/): Register a custom directive.
- [Summit.magic](https://velofy.github.io/summitjs/globals-magic/): Register a custom magic property.
- [Summit.plugin](https://velofy.github.io/summitjs/globals-plugin/): Install a plugin that registers features in bulk.
- [Summit.start](https://velofy.github.io/summitjs/globals-start/): Start Summit and initialize the DOM.

## Reactivity

- [signal()](https://velofy.github.io/summitjs/reactive-signal/): A single reactive value you read by calling it and update with set().
- [computed()](https://velofy.github.io/summitjs/reactive-computed/): A cached value derived from other reactive state.
- [effect()](https://velofy.github.io/summitjs/reactive-effect/): Run a function reactively whenever its dependencies change.
- [reactive()](https://velofy.github.io/summitjs/reactive-reactive/): A deeply reactive object or array.
- [batch()](https://velofy.github.io/summitjs/reactive-batch/): Group writes so effects run once.
- [nextTick()](https://velofy.github.io/summitjs/reactive-nexttick/): Wait for pending reactive updates to flush.

## Advanced

- [How reactivity works](https://velofy.github.io/summitjs/advanced-reactivity/): How Summit tracks dependencies and updates the DOM.
- [The CSP-safe evaluator](https://velofy.github.io/summitjs/advanced-evaluator/): How Summit evaluates expressions without eval, safe under CSP.
- [Writing directives and plugins](https://velofy.github.io/summitjs/advanced-extending/): Build custom directives, magics, and plugins.
- [Migrating from Alpine](https://velofy.github.io/summitjs/advanced-migrating/): A guide for developers coming from Alpine.js.
- [Data Fetching](https://velofy.github.io/summitjs/advanced-data/): summitjs/net, a tiny reactive data layer whose resources expose loading, error, and data as signals that drive the DOM.

## Optional

- [Full documentation corpus](https://velofy.github.io/summitjs/llms-full.txt): every page concatenated as markdown
- [Machine-readable API manifest](https://velofy.github.io/summitjs/ai/summit.json): directives, magics, modifiers, error codes, and components as JSON
- [AGENTS.md](https://github.com/velofy/summitjs/blob/main/AGENTS.md): a drop-in brief for coding agents
- [Source on GitHub](https://github.com/velofy/summitjs)