Skip to content

bobiscool/glide

Repository files navigation

glide

glide 是一个面向现代 Web 应用的用户引导库,用来构建类似 Intro.js / Shepherd 的 onboarding、功能导览和任务式引导体验。

它不是单纯的 tooltip 组件,而是一套引导运行时:

  • 支持多步骤 tour
  • 面向异步 UI,能等待目标元素出现后再展示
  • 预留分支流程、恢复继续、埋点与持久化能力
  • 核心运行时与 React 绑定层解耦
  • 自带一个本地 demo 页面,方便直接体验引导效果

当前仓库包含什么

  • packages/core glide 的核心运行时,包含 session、step、waitFor、target 解析、renderer 接口和默认 DOM renderer

  • packages/react React 绑定层,提供 GuideProvideruseGuideSession() 等能力

  • examples/react 一个可直接运行的 demo 页面,用来演示引导浮层、异步步骤、聚焦高亮和重启 onboarding

  • docs/glide 设计文档,包括产品愿景、架构、API 草案和 MVP 范围

适合什么场景

glide 适合这些场景:

  • 新用户首次 onboarding
  • 新功能发布引导
  • 任务流式产品教学
  • 需要在 React / SPA 中稳定定位异步元素的产品
  • 想做比传统引导库更现代、更可扩展的基础设施

快速启动 demo

npm install
npm run dev

然后打开:

http://localhost:5173/

页面会自动启动一段 onboarding 流程,同时右下角也提供 Restart onboarding 按钮用于重放。

开发脚本

npm run dev
npm run typecheck

当前状态

当前仓库是一个可运行的早期版本,已经具备:

  • Intro.js 风格的浮层引导 UI
  • 目标元素高亮
  • 键盘交互
  • React demo
  • 异步步骤等待

后续计划包括:

  • 拆分正式的 @glide/dom
  • 更完整的 renderer 抽象
  • 更强的定位与遮罩能力
  • 更完善的 hint 模式和测试覆盖

设计文档

详细设计见:

  • docs/glide/vision.md
  • docs/glide/architecture.md
  • docs/glide/api.md
  • docs/glide/mvp.md

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors