• Stars
    star
    20,517
  • Rank 1,158 (Top 0.03 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 6 years ago
  • Updated about 1 month ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A light-weight, no-dependency, vanilla JavaScript engine to drive the user's focus across the page


Driver.js

version downloads

Powerful, highly customizable vanilla JavaScript engine to drive the user's focus across the page
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

Please note that above documentation is for version 1.x which is the complete rewrite of driver.js.
For 0.x documentation, please visit this page


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 some component 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+.


Contributions

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

License

MIT © Kamran Ahmed

More Repositories

1

developer-roadmap

Interactive roadmaps, guides and other educational content to help developers grow in their careers.
TypeScript
273,916
star
2

design-patterns-for-humans

An ultra-simplified explanation to design patterns
43,344
star
3

git-standup

Recall what you did on the last working day. Psst! or be nosy and find what someone else in your team did ;-)
Shell
7,534
star
4

pennywise

Cross-platform application to open any website or media in a floating window
JavaScript
3,710
star
5

githunt

Hunt the most starred projects on any date on GitHub
JavaScript
2,751
star
6

roadmap.sh

Community driven roadmaps, articles and resources for developers
Nunjucks
2,196
star
7

jquery-toast-plugin

Highly customizable jquery plugin to show toast messages
JavaScript
1,488
star
8

brusher

Create beautiful webpage backgrounds
JavaScript
745
star
9

tab-switcher

Chrome Extension - Switch between the opened tabs in the blink of an eye
JavaScript
444
star
10

aws-cost-cli

CLI tool to perform cost analysis on your AWS account with Slack integration
TypeScript
386
star
11

itomate

Automate your iTerm layouts and session setup
Python
333
star
12

datastructures-in-javascript

Illustrated Data Structures — Video Series
JavaScript
161
star
13

kamranahmedse.github.io

Blog created using github-pages-blog-action
HTML
148
star
14

local-ses

Trap and test AWS SES emails locally
TypeScript
147
star
15

pipeline-js

Pipeline pattern implementation with the support for sync and async stages
JavaScript
146
star
16

awesome-minimal-sites

An opinionated collection of minimal yet beautiful websites.
123
star
17

github-pages-blog-action

Create good looking blog from your markdown files in a GitHub repository
CSS
81
star
18

redux-persist-expire

Expiring transformer for redux-persist
JavaScript
78
star
19

css-tailor

✂ Automatically generate CSS from your HTML classes
JavaScript
66
star
20

express-api-problem

Express package to automatically turn your exceptions to the API Problem JSON response
TypeScript
65
star
21

stylos

Webpack plugin to automatically generate and inject CSS utilities to your application
JavaScript
65
star
22

git-first

Chrome Extension – Takes you to the first commit of a GitHub repository
JavaScript
64
star
23

laravel-faulty

Automatically turn your thrown exceptions to JSON response while conforming to API problem specification
PHP
63
star
24

smasher

Smash your directories to get JSON or Array representation and vice versa.
PHP
60
star
25

laravel-modular-boilerplate

A boilerplate to create modular application in laravel 5.1
PHP
59
star
26

copy-marker

Chrome extension — Create URLs with highlighted page selection
JavaScript
52
star
27

jumper-bot

A game developed using HTML-5 canvas and Javascript
JavaScript
50
star
28

beetle

Abuse unicode to incite mayhem
Shell
49
star
29

laravel-censor

A middleware for Laravel 5.* to easily redact or replace the words from the pages you want.
PHP
42
star
30

db-playground

Easily create a sandbox environment for your database exploration.
Shell
39
star
31

github-notable-comments

Chrome Extension – Navigate through the most reacted comments in github issues and PRs
JavaScript
39
star
32

gulp-css-tailor

✂ Gulp plugin to automatically generate CSS from your HTML classes
JavaScript
38
star
33

github-diffs

Easier code reviews by collapse/expand diffs in pull requests
JavaScript
35
star
34

laraformer

Laravel 5.* package to easily introduce a transformation layer for your data
PHP
32
star
35

makers.ae

Community of makers in UAE
TypeScript
30
star
36

brainza-fps-unity3d-game

First person shooter 3d game.
ASP
29
star
37

github-actions-youtube

Codebase for my youtube video on GitHub actions
HTML
24
star
38

php-shorthand

Calculate unique shorthands for a given set of strings
PHP
24
star
39

promises-examples

Codebase accompanying my YouTube video: All about Asynchronous JavaScript
21
star
40

node-basic-auth-example

Sample implementation of Basic Authentication in Node.js
JavaScript
20
star
41

tweet-counter

Chrome Extension - Bring back the character counters in tweet boxes
JavaScript
19
star
42

mongo-playground

Single command to setup MongoDB playground with different datasets
Shell
19
star
43

node-session-auth-example

Sample implementation of Session Authentication in Node.js
JavaScript
18
star
44

gcuf-news-caster

Google Chrome Extension that shows the latest news from GCUF Website
JavaScript
16
star
45

slack-msg

Dead simple CLI tool to send messages to Slack
JavaScript
16
star
46

mongodumper

Docker image to back up MongoDB database and upload to S3
Shell
16
star
47

mondex

CLI tool to create and manage MongoDB indexes using code
TypeScript
14
star
48

walkers

A console based fan fiction RPG for The Walking Dead TV Series
PHP
13
star
49

ng-atlas

An Angular JS application that lets you tour around the globe ..free of cost ;-)
JavaScript
12
star
50

markdown-it-class

Plugin for markdown-it to allow adding classes to HTML tags.
JavaScript
8
star
51

yaml-sample

JavaScript
8
star
52

egghead-mongo-aggregation

Codebase for my "Aggregation in MongoDB" videos on Egghead
JavaScript
7
star
53

sendy

Dockerized Sendy application with one-click deployment setup for Railway.
Shell
5
star
54

mulk

Gets the country details by country name, ITU or ISO codes
JavaScript
4
star
55

astro-view-transitions-bug

JavaScript
2
star