velofy summit.js
This page is running on the Summit build inlined below

The framework AI agents get right the first try.

Summit.js composes behavior directly in your HTML. One script, no build step, no virtual DOM, no eval. From velofy: AI Native builders out of Gurgaon, India.

Loading states, included
16KB gzipped runtime 0 dependencies 0 build steps CSP safe, no eval MIT licensed
Proof, not promises

What you read is what it does

The pane on the left is the code. The pane on the right is that exact markup, hydrated by the Summit runtime inlined in this page. Click the toggle.

velofy.co/summit-demo
<!-- exactly what runs on the right -->
<div s-data="{ open: false }">
  <button @click="open = !open">Toggle</button>
  <p s-show="open">Hello from Summit</p>
</div>

Hello from Summit

Nothing up my sleeve. Press it.

No bundler produced this demo. The framework read the attributes and wired it up, the same way it would for your agent's output.
The loader arsenal

Advanced loaders, pure CSS, zero main-thread cost

Summit ships a full gallery of loading states. Every one below is the framework's own class, inheriting this page's monochrome ink tokens automatically.

Ring

Dual ring

Dashed

Arc sweep

Orbit

Wave

Equalizer

Typing

Pulse

Ripple

Grid

Flip

Bounce

Logo pulse

Logo draw

Logo orbit

Skeleton screens

Content arrives without a jump

The skeleton mirrors the shape of what is coming, so the layout holds still. The swap you just made is one boolean in s-data, which is the whole point.

Why agents ship with it

Small surface, sharp tools

A closed set of s- directives and $ magics. One obvious way to do most things, which is exactly what a model does best.

Fine-grained signals

Change one value and only its exact dependents update. No diffing, no re-render.

CSP-safe evaluator

Expressions are interpreted, never evaled. Generated markup runs under a strict CSP.

Keyed list rendering

Lists reconcile by key, so reorders move DOM nodes instead of rebuilding them.

Cached computed getters

Derived values memoize until a dependency changes. Free performance, no ceremony.

Copy-in UI library

Accessible, token-themed components you paste and own. This page uses them everywhere.

Machine-readable docs

llms.txt indexes every page and AGENTS.md briefs your agent. Built to be read by machines.

How it works

Three steps, no third act

1. Drop in one script
<script src="https://cdn.jsdelivr.net/npm/summitjs/dist/summit.min.js" defer></script>
2. Write behavior in HTML
<div s-data="{ count: 0 }">
  <button @click="count++">+1</button>
  <span s-text="count"></span>
</div>
3. Ship

No bundler, no build. It works under a strict CSP, and your agent can read every page of the docs as markdown.

Questions

Asked, answered

About 16KB gzipped for the full runtime: signals, directives, evaluator, list rendering. The copy of it powering this page is inlined below, unminify it if you like.
Yes. Expressions are interpreted by Summit's own evaluator, never passed to eval or new Function. This page is served under a CSP that blocks both, and everything on it works.
Behavior lives on the element it affects, so an agent edits one place and sees the result. A small closed vocabulary means one obvious way to do most things, and llms.txt plus AGENTS.md let the agent read the whole framework in one fetch.
Nothing. MIT licensed, open source by nature. More velofy repos are opening soon.