A desktop manual creation tool for macOS — automatically capture steps as you work.
Built as a Tango alternative that runs natively on your Mac.
- Auto Step Capture — Records clicks and keyboard actions across any macOS application via Accessibility API
- Smart Screenshots — Automatically captures and crops screenshots at each step with multi-monitor support
- Drag & Drop Reorder — Rearrange steps freely with drag-and-drop (dnd-kit)
- Annotation Tools — Draw arrows, rectangles, and highlights on screenshots (Konva.js)
- AI Descriptions — Auto-generate step descriptions using GLM API
- Export — Export manuals as PDF or HTML documents
- Native Performance — Objective-C++ addon for low-level macOS event monitoring and screen capture
- macOS 14 (Sonoma) or later
- Apple Silicon (arm64) or Intel
- Node.js 18+
git clone https://github.com/mata-ken/ManualCapture.git
cd ManualCapture
npm install
cd native && node-gyp rebuild && cd ..
npm startnpm run make| Action | How |
|---|---|
| Start recording | Click Record in the main window |
| Stop recording | Click Stop or press Esc |
| Edit steps | Click any step to edit description or annotate |
| Reorder steps | Drag and drop steps in the sidebar |
| Annotate | Select a step → use annotation tools (arrow, rect, highlight) |
| Export | Click Export → choose PDF or HTML |
┌─────────────────────────────────────────────┐
│ Electron │
├──────────────────┬──────────────────────────┤
│ Main Process │ Renderer Process │
│ │ │
│ ┌────────────┐ │ ┌────────────────────┐ │
│ │ Recording │ │ │ React + Tailwind │ │
│ │ Engine │ │ │ │ │
│ ├────────────┤ │ │ ┌──────────────┐ │ │
│ │ Project │ │ │ │ Step List │ │ │
│ │ Manager │ │ │ ├──────────────┤ │ │
│ ├────────────┤ │ │ │ Step Detail │ │ │
│ │ AI Desc. │ │ │ ├──────────────┤ │ │
│ │ Generator │ │ │ │ Annotation │ │ │
│ └────────────┘ │ │ │ Canvas │ │ │
│ │ │ │ └──────────────┘ │ │
│ ┌─────┴──────┐ │ └────────────────────┘ │
│ │ Native │ │ │
│ │ Addon │ │ IPC Bridge │
│ │ (Obj-C++) │ │ │
│ └────────────┘ │ │
│ CGEventTap │ │
│ Accessibility │ │
│ Screenshot │ │
└──────────────────┴──────────────────────────┘
| Component | Technology |
|---|---|
| Framework | Electron 29 + Electron Forge |
| Frontend | React 18 + TypeScript + Tailwind CSS |
| Canvas | Konva.js (annotations) |
| Drag & Drop | dnd-kit |
| Native Addon | Objective-C++ (node-addon-api) |
| Image Processing | Sharp |
| PDF Export | PDFKit |
| AI | GLM API (step descriptions) |
| Build | Webpack + electron-forge |
MIT License