前端做新手引导、功能高亮不用重复造轮子，这款爆火JS库直接收入工具箱。
作者Kamran Ahmed近日发文，driver.js 每周下载量突破100万，已有上万线上项目接入，Intel等企业产品都在使用。
对比同类组件，它上手成本极低、开箱即用，小工具站、大型SaaS后台都适配。
作者同时透露，高流量加持下很快会推送重磅版本更新，扩充更多交互能力。' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
什么是 driver.js
轻量原生JavaScript工具库，主打产品新手导览、元素高亮、场景化帮助弹窗。完整TS支持，MIT开源协议。
' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
一句话定位：为产品打造交互式引导、重点高亮、上下文帮助提示。
' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
核心优势
体积小巧 打包增量极低，不会拖慢页面加载速度。
高度自定义 遮罩、弹窗、圆角、动画、文案全可配置，完美适配项目UI风格。
框架无绑定 原生JS开箱即用，Vue、React、Svelte等框架无缝兼容。
' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
功能全覆盖
-
单独高亮页面新增功能按钮
-
多步骤新手教学导览流程
-
自定义提示弹窗与交互逻辑
-
顺滑过渡动画，体验自然
适用场景
新用户首次进入产品的分步教程 版本迭代后高亮新增功能入口 复杂后台系统添加操作帮助提示 活动页面引导用户完成转化操作' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
极简上手示例
安装
npm install driver.js
单元素高亮
import Driver from 'driver.js'import 'driver.js/dist/driver.css'const driver = new Driver()driver.highlight('#target-btn')
多步骤新手引导
import { driver } from"driver.js";import"driver.js/dist/driver.css";const driverObj = driver({showProgress: true,steps: [ { element: "#search", popover: { title: "Search", description: "Find anything in seconds." }, }, { element: "#notifications", popover: { title: "Stay updated", description: "All your alerts live here." }, }, { element: "#profile", popover: { title: "Your account", description: "Manage settings and billing." }, }, ],});driverObj.drive();
小结
开发后台、工具类、SaaS产品，需要用户引导、功能高亮，优先选用driver.js。 轻量易集成、自定义自由度高、开源免费，省去手写遮罩、分步引导的大量开发工作量。
官网直达：driverjs.com/
