前端做新手引导、功能高亮不用重复造轮子，这款爆火JS库直接收入工具箱。

作者Kamran Ahmed近日发文，driver.js 每周下载量突破100万，已有上万线上项目接入，Intel等企业产品都在使用。

对比同类组件，它上手成本极低、开箱即用，小工具站、大型SaaS后台都适配。

作者同时透露，高流量加持下很快会推送重磅版本更新，扩充更多交互能力。

什么是 driver.js

轻量原生JavaScript工具库，主打产品新手导览、元素高亮、场景化帮助弹窗。完整TS支持，MIT开源协议。

 

官网：https://driverjs.com/

一句话定位：为产品打造交互式引导、重点高亮、上下文帮助提示。

核心优势

体积小巧 打包增量极低，不会拖慢页面加载速度。

高度自定义 遮罩、弹窗、圆角、动画、文案全可配置，完美适配项目UI风格。

框架无绑定 原生JS开箱即用，Vue、React、Svelte等框架无缝兼容。

功能全覆盖

• 单独高亮页面新增功能按钮
• 多步骤新手教学导览流程
• 自定义提示弹窗与交互逻辑
• 顺滑过渡动画，体验自然

适用场景

新用户首次进入产品的分步教程 版本迭代后高亮新增功能入口 复杂后台系统添加操作帮助提示 活动页面引导用户完成转化操作

极简上手示例

安装

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。 轻量易集成、自定义自由度高、开源免费，省去手写遮罩、分步引导的大量开发工作量。

官网直达：https://driverjs.com/