I Built a Lightweight Onboarding Checklist Library in TypeScript

I've just released Stepr Checklist v0.1.0, a small, framework-agnostic TypeScript library for adding onboarding checklists to web applications.

It's open source, has no runtime dependencies, and works with vanilla JavaScript, React, Vue, or pretty much anything else that runs in a browser.

Try the live demo

Why another onboarding library?

A while ago, I built Stepr, a small library for guided product tours.

But product tours are only one part of onboarding.

Sometimes users need to complete several tasks to get started with an application:

• Create their profile
• Set up their first project
• Invite a teammate
• Explore an important feature
• Verify their email address

A guided tour can show people where things are. A checklist helps them keep track of what they've actually done.

So I decided to build a companion library.

Meet Stepr Checklist

The idea is simple: your application decides when a task is complete.

Clicking a checklist item doesn't automatically mark it as done. It might open a form, start a product tour, or navigate somewhere.

Only when the user actually completes the action does your application update the checklist.

For example:

import { createChecklist } from '@stepr/checklist';

The library provides a visual checklist widget and a separate, DOM-free state controller for applications that want to build their own UI.

What's included in v0.1.0?

Framework-agnostic: No React or Vue dependency. Use it wherever you need it.

No runtime dependencies: The library stays small and focused.

Optional persistence: Checklist progress can be saved using localStorage.

Customizable styling: CSS custom properties make it possible to adapt the widget to your application's design.

Accessibility: The widget includes semantic controls, keyboard support, accessible progress information, and reduced-motion considerations.

Localization: Customize the widget's interface text through the messages option.

It's an early 0.x release, and there are still things to improve. In particular, screen-reader testing and testing on real mobile devices remain on the list.

Try it yourself

I built an interactive demo with a fictional project management application.

You can edit a profile, create a project, invite a teammate, and try a guided tour. The checklist updates when those actions are completed.

You can also experiment with the API and see how progress persistence works.

Open the interactive demo

Install it with:

npm install @stepr/checklist

Part of the Stepr family

Stepr Checklist is a separate library from Stepr.

You can use either one independently, but they also work well together: one guides users through an interface, while the other tracks their onboarding progress.

Both projects are open source and available on GitHub.

• Stepr Checklist on GitHub
• Stepr on GitHub

What's next?

For now, I want to keep the library small and useful rather than adding features just for the sake of it.

I'd love feedback from developers building onboarding experiences.

What would you want from a lightweight checklist library? Is there anything missing that would make it useful in your projects?

Tags: #typescript #javascript #opensource #webdev