npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details


  • User packages



Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.


Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner




Library for creating flexible multistep forms.




wɪzə(r)d Forms

CodeFactor npm

Bored of these old fashioned HTML Forms that put all the elements on the same page?

Good you're here!

wɪzə(r)d Forms will help you building your own multistep Forms with full control over everything. Custom Controls? No Problem. Append new pages by AJAX Calls? You can achive this in just a few lines of code.

Getting started



npm install @steinrein/wizerd-forms


Download the repository and include the production ready code from the dist folder in your project.

Include the script in your code:

<script src="path/to/wizerdforms.bundle.js"></script>

Basic Usage

import { WizerdForm } from '@steinrein/wizerd-forms';

const element = document.querySelector('.wizerdform');
const options = {};

const $WizerdForm = new WizerdForm( element, options );



Methods from WizerdForm


Set an instance of a wɪzə(r)d Form. This Method will apply classes to all form elements, move the form to it's startIndex and set all Form controls


Destroy an instance. The form will go back to basic.


Return all Form Elements


Return all Form Element values as an object with key => value pairs, holding the name and the value of the elements.


Get a WizerdFormPage by it's index. Will return false if there is no page with the given index.

const index = 2;

Same as getPageByIndex but will always return the current Page.


Jump directly to another page by it's index. The Method will return false if pageIndex is less than zero.

const jumpTo = 3;

Navigate the form by a given value of pages to travel. Using a negative number in the first parameter will result in navigating to previous pages. The second parameter can be used to proceed navigating without validating the current Page.

const goToNext = _ => {
const goToPrev = _ => {
// Skip validation
const goToNextNoValidation = _ => {
	$WizerdForm.navigate(1, true);
const goToPrevNoValidation = _ => {
	$WizerdForm.navigate(-1, true);

Add a new WizerdFromPage by string. This method can be used to create pages from AJAX Calls or other callbacks.

const newPageStr = `
	<label>my new Page</label>
	<input type="text" name="myNewField" value="" required />
const insertOnIndex = 1;

$WizerdForm.addPage(newPageStr, insertOnIndex);

Replace the content of an existing Page.

const replacePageOnIndex = 2;
const replaceWith = `
	<label>Replacement Page</label>
	<input type="text" name="replacedField" value="" required />

$WizerdForm.replacePage(replacePageOnIndex, replaceWith);

Using addFormControl you can create accessible form controls.

const nextButton = $WizerdForm.addFormControl(
	'ctrNext', 	// Reference
	'button',		// TagName
		type: "button",
		onClick: (e) => {console.log('new index ' + wizerdForm.index)}
	}, // Attributes
	'next' // Children

You can also create children with nodes like:

const nextButton = $WizerdForm.addFormControl(
	'ctrNext', 	// Reference
	'div',		// TagName
		className: 'button',
		onClick: (e) => {console.log('new index ' + wizerdForm.index)}
	}, // Attributes
			tagName: 'span'
			props: {},
			children: [
					// ...Nest as many Child Elements as you want

Using removeControl you can remove a form control that was previously added through addFormControl by it's reference.


Special Event Handlers can be specified through the on Method. Currently wɪzə(r)d Forms supports the following:

  • input, change: fires whenever an input changes
  • error: fires when validation fails
  • navigate: fires on navigation
  • submit: fires on form submit
$WizerdForm.on('navigate', (evt) => {
	console.log('Navigation event fired!');

Methods from WizerdFormPage


Add options.activePageClass to a page.


Add options.hiddenPageClass to a page.


Return all Form Elements from a Page


Return all Form Element values from a Page as an object with key => value pairs, holding the name and the value of the elements.


Validate a Page.