steppp

easy, lightweight multi-step experiences.

Steppp is a small library for quickly creating multi-step forms, carousels, and other experiences. It emphasizes a flexible developer experience and a small bundle footprint.

Head Straight to the Docs

A Simple, Progressive Example

Use Steppp to build a simple multi-step experience with a predictable, linear flow.

Step #1

With two API approaches, Steppp allows you to quickly spin up multi-step forms, carousels, and other experiences with ease and a lightweight footprint.

Step #2

Step #3

Thank You!

A Non-Linear Example

Using either Steppp's declarative or imperative API to take users through a non-linear flow driven by some action.

Step #1

Go to a step:

Step #2

Go to a step:

Step #3

Go to a step:

An Example with a Wild Transition

Steppp relies on the Web Animations API, which means you can take full control of how steps enter and exit.

Step #1

With two API approaches, Steppp allows you to quickly spin up multi-step forms, carousels, and other experiences with ease and a lightweight footprint.

Step #2

Step #3

Thank You!

Two API Approaches

A Declarative Approach

Attach certain attributes to your markup and write zero JavaScript to get a basic instance up and running. 

<div id="steppp">
  <div data-steppp-wrapper>
    <section data-steppp-active>first</section>
    <section>second</section>
    <section>third</section>
  </div>

  <button data-steppp-forward>
    Forward
  </button>
  <button data-steppp-backward>
    Backward
  </button>
</div>

<script src="path/to/steppp.js"></script>

An Imperative Approach

For more fine-tuned control, use Steppp's intuitive JavaScript API to set up a multi-step experience. 

// After setting up your markup...

import Steppp from "steppp";
const element = document.getElementById("targetElement");
const { forward, backward, moveTo } = Steppp(element);

document.querySelector("#forward").addEventListener("click", () => {
  forward();
});

document.querySelector("#backward").addEventListener("click", () => {
  backward();
});

document.querySelector("#moveToStepA").addEventListener("click", () => {
  moveTo("step_a");
});

Ready to Get Started?

Head to the Docs