Installation

Summit ships two ways: a zero-build script you drop into any page, and an npm package for projects that use a bundler. Both give you the same runtime.

#Script tag

The fastest path. Add one tag to your <head> and Summit starts on its own once the DOM is ready. Use defer so it runs after the document is parsed.

<script src="https://cdn.jsdelivr.net/npm/summitjs@1/dist/summit.min.js" defer></script>

That is the entire setup. Any s- attributes already in the page come alive, and so does anything you add later, because Summit watches the DOM for changes.

The @1 range follows the latest 1.x release on npm. Pin an exact version in production, for example summitjs@1.0.0, so a new release can never change your site without you knowing.

#npm

For projects with a build step, install the package:

npm install summitjs

Import the Summit global, register anything you need, then start it yourself. Nothing runs until you call start().

import Summit from "summitjs";

Summit.data("counter", () => ({
  count: 0,
  increment() {
    this.count++;
  },
}));

Summit.start();

The package ships ES modules, a CommonJS build, and TypeScript types, so editor autocomplete and type checking work out of the box.

#Content-Security-Policy

Summit never calls eval or new Function. Expressions in your markup are parsed and interpreted by Summit itself, so a strict policy needs no 'unsafe-eval':

Content-Security-Policy: script-src 'self'

That policy assumes you serve summit.min.js from your own origin. If you load it from a CDN, add that origin to script-src, for example script-src 'self' https://cdn.jsdelivr.net. Either way, no 'unsafe-eval' is needed.

#Starting manually

The script-tag build starts automatically. If you would rather control the moment yourself, for example to register custom directives first, call Summit.start() and it will only run once:

<script src="https://cdn.jsdelivr.net/npm/summitjs@1/dist/summit.min.js"></script>
<script>
  Summit.directive("sparkle", (el) => {
    el.style.transition = "opacity .3s";
  });
  Summit.start();
</script>

See Summit.start for the details.