glide 是一个面向现代 Web 应用的用户引导库,用来构建类似 Intro.js / Shepherd 的 onboarding、功能导览和任务式引导体验。
它不是单纯的 tooltip 组件,而是一套引导运行时:
- 支持多步骤
tour - 面向异步 UI,能等待目标元素出现后再展示
- 预留分支流程、恢复继续、埋点与持久化能力
- 核心运行时与 React 绑定层解耦
- 自带一个本地 demo 页面,方便直接体验引导效果
-
packages/coreglide的核心运行时,包含 session、step、waitFor、target 解析、renderer 接口和默认 DOM renderer -
packages/reactReact 绑定层,提供GuideProvider、useGuideSession()等能力 -
examples/react一个可直接运行的 demo 页面,用来演示引导浮层、异步步骤、聚焦高亮和重启 onboarding -
docs/glide设计文档,包括产品愿景、架构、API 草案和 MVP 范围
glide 适合这些场景:
- 新用户首次 onboarding
- 新功能发布引导
- 任务流式产品教学
- 需要在 React / SPA 中稳定定位异步元素的产品
- 想做比传统引导库更现代、更可扩展的基础设施
npm install
npm run dev然后打开:
页面会自动启动一段 onboarding 流程,同时右下角也提供 Restart onboarding 按钮用于重放。
npm run dev
npm run typecheck当前仓库是一个可运行的早期版本,已经具备:
- Intro.js 风格的浮层引导 UI
- 目标元素高亮
- 键盘交互
- React demo
- 异步步骤等待
后续计划包括:
- 拆分正式的
@glide/dom包 - 更完整的 renderer 抽象
- 更强的定位与遮罩能力
- 更完善的 hint 模式和测试覆盖
详细设计见:
docs/glide/vision.mddocs/glide/architecture.mddocs/glide/api.mddocs/glide/mvp.md