Interactive Tutorial Framework

An interactive tutorial framework built with React + Vite + MDX.

中文文档

Features

• Tutorial content structure based on content/<tutorial>/config.json + steps/*.mdx
• Multi-tutorial hall mode with tutorial cards and progress overview
• Persistent progress and theme switching
• Keyboard navigation (←/→, PageUp/PageDown)
• CLI commands to serve or build tutorials quickly

Project Structure

.
├── bin/                    # executable entrypoint
├── cli/                    # CLI implementation
├── content/                # tutorial content source
├── src/                    # application source code
├── tests/
│   ├── cli/                # CLI unit tests (node:test)
│   ├── unit/               # frontend unit tests (Jest)
│   └── e2e/                # E2E tests (Playwright)
└── docs/

Installation

npm install

Usage

npm run dev

CLI

# install globally
npm install -g @wangjs-jacky/interactive-tutorial

# serve tutorials
interactive-tutorial serve /absolute/path/to/content
interactive-tutorial serve ./content --tutorial example-tutorial --port 5174 --open

# build static output
interactive-tutorial build /absolute/path/to/content --output /absolute/path/to/output
interactive-tutorial build ./content --output ./dist --tutorial example-tutorial

Common options:

• serve: --tutorial <name>, --port <number>, --host <host>, --open
• build: --tutorial <name>, --output <outputDir>

Testing

npm run test
npm run test:cli
npm run test:unit

License

MIT