driver.js README

The project's README from github.com/nilbuild/driver.js. As one markdown file: README.md.

Driver.js

Powerful, highly customizable library for Product Tours and Feature Introductions
_{No external dependencies, light-weight, supports all major browsers and highly customizable}

Simple: is simple to use and has no external dependency at all
Light-weight: is just 5kb gzipped as compared to other libraries which are +12kb gzipped
Highly customizable: has a powerful API and can be used however you want
Highlight anything: highlight any (literally any) element on page
Feature introductions: create powerful feature introductions for your web applications
Focus shifters: add focus shifters for users
User friendly: Everything is controllable by keyboard
TypeScript: Written in TypeScript
Consistent behavior: usable across all browsers
MIT Licensed: free for personal and commercial use

Documentation

For demos and documentation, visit driverjs.com

So, yet another tour library?

No, it's more than a tour library. Tours are just one of the many use-cases. Driver.js can be used wherever you need some sort of overlay for the page; some common usecases could be: highlighting a page component when user is interacting with it to keep them focused, providing contextual help e.g. popover with dimmed background when user is filling a form, using it as a focus shifter to bring user's attention to some component on page, using it to simulate those "Turn off the Lights" widgets that you might have seen on video players online, usage as a simple modal, and of-course product tours etc.

Driver.js is written in Vanilla TypeScript, has zero dependencies and is highly customizable. It has several options allowing you to change how it behaves and also provides you the hooks to manipulate the elements as they are highlighted, about to be highlighted, or deselected.

Also, comparing the size of Driver.js with other libraries, it's the most light-weight, it is just ~5kb gzipped while others are 12kb+.

Developing locally

The library lives in src/. To try your changes against a set of live examples, run the playground — an Astro app in playground/ that imports the library straight from source, so edits hot-reload instantly:

pnpm install
pnpm run playground:install
pnpm dev

Each example lives in its own file under playground/src/examples/ and shows up as a page in the sidebar. To add one, drop an entry into the relevant group (highlight.ts, popover.ts, tour.ts, api.ts).

Other useful scripts:

pnpm build
pnpm test

Contributions

Feel free to submit pull requests, create issues or spread the word.

License

MIT © Kamran Ahmed

Searching Database…

26.9K ·GitHub

What is this?

Driver.js is a lightweight JavaScript library for building product tours, feature introductions, and spotlight overlays that guide user focus on a webpage.

Is it a framework or just a library?

It is a standalone library with zero external dependencies, written in Vanilla TypeScript, meant to be imported into any web app.

How do I add it to a project?

Install it as a package and import it into your JS/TS app; usage examples and full documentation are available on the driverjs.com docs site.

Do I need any other libraries to use it?

No, it has no external dependencies at all and works across all major browsers out of the box.

Is this only for tours, or can I use it for other overlays too?

It's more than a tour tool: you can use it for contextual help popovers, focus shifters, dimmed-background modals, or 'turn off the lights' style widgets, not just guided tours.

How big is it compared to other tour libraries?

Driver.js is about 5kb gzipped, compared to 12kb+ for other similar libraries, making it one of the most lightweight options.

Can I control what happens as elements get highlighted?

Yes, it exposes hooks so you can manipulate elements as they are about to be highlighted, while highlighted, or when deselected.

Is it accessible via keyboard?

Yes, everything in Driver.js is controllable by keyboard, making it user friendly for accessibility.

How can I try out examples locally?

Clone the repo and run the Astro-based playground app, which imports the library directly from source and hot-reloads on edits; examples live under playground/src/examples/.

What are similar projects?

shepherd, floating-ui, intro.js, react-dropzone, tippyjs, You-Dont-Need-JavaScript, material-ui, styled-components

Which topics is it in?

spotlight, overlay, ui, productivity, frontend, library, typescript, javascript, web, developer-tools, mit, open-source

Creator: nilbuild
Size: 8.5 MB
Stars: 26.9K
Updated: CommitOct 15 Release1.10.1Oct 15
Age: 8y
Commits · 90 Days