Getting Started

Sprig is a small, client-side JavaScript UI framework. It combines fine-grained signals, direct DOM helpers, .sprig single-file components, and an optional router. Vite compiles the components and builds the app; it is not a dependency of Sprig's browser runtime.

Installation status

The repository package is named sprig-framework and its manifest defines the core, form, and router package entries. To try the implementation maintained in this checkout, use the repository demo:

Run these commands from the repository root:

npm install
npm run dev

The home page's ideas card is stored locally in the current browser with the optional IndexedDB storage add-on. The repository also includes a separate, optional local Python/SQLite API example; start it in a second terminal only if you want to explore that API:

npm run dev:api

Then open the local address printed by Vite. The ideas card does not use this API and remains available without it. The sample API uses Python's standard library, listens on 127.0.0.1:8000 by default, and is for local development only—not for public deployment.

Build and test the checkout

npm run build
npm run preview
npm test

npm run dev builds the core runtime and separate form and router add-ons before starting Vite. The production build does the same before building the demo app and checking emitted declarations. TypeScript is optional for app authors; JavaScript is the framework's implementation language.

Using Sprig in an application

The checkout's demo is the supported, working integration example. Its Vite config loads the .sprig compiler plugin from the repository source, and app code imports the public runtime entries:

import { computed, effect, h, mount, signal } from 'sprig-framework';

The optional form helpers use a separate entry:

import { createForm } from 'sprig-framework/form';

The router is also an optional add-on with a separate entry:

import { createFileRouter } from 'sprig-framework/router';

For optional Web Animations API helpers, import animate or createTransition from sprig-framework/animation. See the animations guide for lifecycle and reduced-motion behavior.

For an accessible Cancel/OK prompt, import showDialog from sprig-framework/dialog; see the dialogs guide.

For a simple confirmation prompt, import showDialog from sprig-framework/dialog; see the dialogs guide.

The package exports resolve to generated files under dist/framework/, including sprig-framework.js, sprig-framework.d.ts, sprig-form.js, sprig-router.js, sprig-animation.js, and sprig-dialog.js. Build the framework before building only the app (npm run build:framework before npm run build:app); npm run dev and npm run build already handle the order. Add-ons import the core package externally so they share its reactive runtime. In this repository, vite.config.js also imports the .sprig plugin from src/framework/vite-plugin.js. That plugin is currently an internal source module, not a separately published package entry, so a fresh external Vite project cannot follow a public-package-only setup yet.

Loading the core framework entry logs This app os built with sprigJS to the console once per module instance.

Start with the reactivity and DOM guide, then explore single-file components, routing, and forms. The specifications and limits page distinguishes implemented behavior from future targets.

Production notes

Sprig currently renders in the browser; it does not provide server-side rendering or hydration. If you use history-mode routing, configure your production host to serve index.html for unknown app paths so direct visits and refreshes work. A real hosted app that needs the demo API must provide its own production-grade API, authorization, HTTPS, persistent storage, and same-origin /api routing. Vite's local proxy is not a production reverse proxy.