Khan Explainer skill
A skill for Khan Academy style explainer videos: a pen draws on a board while a voice speaks, one scene file renders to MP4
- 157 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Installation downloads npm packages and the Chromium browser, and rendering runs local scripts
- The real-audio mode processes your audio and video files and asks for macOS permissions
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/khan-explainerDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Installation downloads npm packages and the Chromium browser, and rendering runs local scripts
- The real-audio mode processes your audio and video files and asks for macOS permissions
This is third-party code. Review the repository files before installing.
What it does
Khan Explainer is a Claude Code skill that makes Khan Academy style teaching videos: a hand draws while a voice explains. You describe the video, Claude writes a scene file and one command renders the MP4. Everything runs on your Mac with an HTML canvas, Playwright, ffmpeg and the built-in `say` voice, with no API keys, accounts or editor. There are three modes. A blackboard lesson draws a diagram stroke by stroke as it is explained. A draw-over-UI tutorial adds arrows, circles and numbered steps over your screenshots. The real-audio mode takes a YouTube video or podcast and produces vertical shorts where the board is drawn to the speaker words and the speaker can be cut out and placed in front of the board. All modes look like chalk on a blackboard or marker on a whiteboard, landscape or vertical. A scene is a list of beats, each one spoken clause plus its drawing. The renderer speaks a beat first, measures its length and fits the drawing to it, so the pen keeps pace with the words and nobody types timestamps.
Who it is for. Teachers, course authors and product teams who need short explainer videos and tutorials with no recording studio or paid services.
Good fit when
- You need to explain a term such as an AI agent in half an hour with a video of board drawings
- A release needs a tutorial with arrows and circles drawn over interface screenshots
- A long podcast should become vertical shorts with a board drawn to the speaker words
- You need videos with no API keys or subscriptions, entirely local on a Mac
Not a fit when
- You need Windows or Linux: the skill targets macOS and uses the `say` voice
- You need live-action editing with footage and transitions: it only does board drawings
- You need a professional narrator voice: by default it uses the macOS system voice
Example request
Make a 30-second Khan Academy style video on what an AI agent is, chalk on a blackboard, vertical formatLimitations
You need macOS, Node.js 20 or newer and ffmpeg (`brew install ffmpeg`). After cloning to `~/.claude/skills/khan-explainer`, run `npm install` and `npx playwright install chromium` in the `scripts` folder, which downloads a browser for rendering. The `kokoro_tts.py` script offers an alternative voice but its dependencies install separately.
Rendering depends on computer speed and scene size. The macOS system voice sounds noticeably synthetic, and the repository has examples for Arabic and other languages, but quality depends on installed voices. Real speech is cut out and overlaid with `cutout.swift`, and that mode needs Swift and macOS permissions.
How to disable. Delete the `~/.claude/skills/khan-explainer` folder. The Chromium downloaded for Playwright lives in the Playwright cache and can be removed with the command from the Playwright docs.
FAQ
How do I install the skill?
Clone the repository into `~/.claude/skills/khan-explainer`, then run `npm install` and `npx playwright install chromium` in the `scripts` folder.
Do I need API keys?
No, everything runs locally: an HTML canvas, Playwright, ffmpeg and the built-in macOS `say` voice. No accounts or editor either.
How does the pen stay in sync with the voice?
The renderer speaks each beat first, measures its length and fits the drawing to it. You never type timestamps.
Which formats are supported?
Chalk on a blackboard or marker on a whiteboard, landscape and vertical video. The mode switches with a flag or even mid-video.
Can I make videos in other languages?
`examples/` has samples for Arabic and several other languages. Quality depends on the voices installed in macOS.
Discussion
No questions or reviews yet.
Related
SkillsA skill makes a video from a script where diagrams and captions are drawn stroke by stroke as the narrator speaks.
A skill that turns narration text into a 20-second chunky-pixel explainer at 1920×1080 with voice-over and an editable project.
A Claude Code skill for narrated explainers with a cartoon presenter, lip sync to your voice, poses on cue words and your brand
A skill that turns a script into an explainer video: drawings are sketched by hand, text types out, no image generators needed.
A Claude Code and Codex skill that turns a topic into a narrated motion-graphics explainer video on Remotion with subtitles and chapters
A skill that turns your narration and real assets into a 20–60 second video in the style you pick, rendered locally as MP4.
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Khan Explainer (this card) | no | 157 | |
| whiteboard-teacher-video | no | 546 | makes videos for teachers without a real-speaker mode or draw-over-screenshot tutorials |
| vox-explainer | no | 220 | Vox style explainers, with no board and pen |
README in short
The author describes the skill as a way to make Khan Academy style videos for free: a scene is written in JavaScript and the renderer fits drawings to the voice-over. The repository contains examples (AI agents, Arabic, multiple languages, a UI tutorial), render scripts and font tests.
README badge
Original SKILL.md
---
name: khan-explainer
description: Use when the user wants a Khan Academy style explainer video, a blackboard or whiteboard lesson, a hand-drawn chalk-talk animation, a short narrated video that teaches a concept ("explain X in a video", "explainer video", "teach X in 30 seconds"), or a tutorial that draws hand-written arrows, circles and captions over product screenshots ("draw over the UI", "annotated walkthrough"), or clips cut from a YouTube video or podcast where the speaker's real audio plays under a blackboard drawn to it ("khanify this video", "clip this with the Khan visual"), especially when it must be free, local, and use no paid APIs or keys. macOS only.
---
# Khan Explainer
A pen draws while a voice explains. Three modes, one renderer:
- **Blackboard lesson.** A diagram drawn on a black board, Khan Academy style.
- **Draw-over-UI tutorial.** Arrows, circles and numbered captions drawn over product screenshots.
- **Real-audio clip.** A real person's voice, cut from a video, with the board drawn to their words. See "Real-audio clips".
One scene file in, one MP4 out, in seconds. Free and local: HTML canvas, Playwright, macOS `say`, ffmpeg. No keys.
Every mode renders as chalk on a blackboard or marker on a whiteboard, landscape or vertical.
Made by Haider Farooq ([github.com/haiderfarooq3](https://github.com/haiderfarooq3/khan-explainer)). Free for anyone to use and change (MIT).
**Core principle: the voice drives the clock.** A scene is a list of beats. A beat is one spoken clause plus the drawing that happens while it is said. The renderer speaks each beat first, measures it, and fits that beat's drawing to it. Never hardcode seconds or guess when a word lands.
## Workflow
1. **Script the beats.** One idea per beat, split at commas and full stops. Check the length formula below.
2. **Plan the picture.** Lesson: lay out the whole board. Tutorial: capture the stills and their rectangles. Each has a section below.
3. **Write `scene.js`** in a scratch folder. Copy `examples/ai-agents.js` for a lesson or `examples/ui-tutorial.js` for a tutorial.
4. **Render:** `node ~/.claude/skills/khan-explainer/scripts/render.js scene.js out.mp4`
5. **Read the `sheet` image it prints.** It shows the board at the end of every beat. The same folder holds every beat full-size as `b000.jpg`, `b001.jpg` and so on. Open those to check that a ring really sits on a small button. Fix every `WARN` (text off the board, or one label on another), overlap and spill,