An offline single-file HTML editor that transforms traditional slides into a "Base Layer + AI Interaction Layer" web courseware — offline, zero-install, zero-server. Works with local WorkBuddy to generate interactive H5 content with one click.
Try it online · Download · Discussions · 中文
🌐 Try it online (no download needed, open in browser): CourseForge Live Basic editing, PPT import, built-in interactive widgets (quiz / vote / drag-drop) work out of the box; "Generate via WorkBuddy" requires running WorkBuddy locally.
Download the app: Grab the single CourseForge.standalone.html from GitHub Releases (~1.4 MB, no account, no installer, no internet). Open it in any modern browser and it is the editor. There are no installation steps because there is nothing to install.
10-second quick start: Open it → pick a template or import your PPT → drag an "🌐 HTML Interaction Container" onto any page where you want interactivity → click "Generate via WorkBuddy" or "Insert Built-in Widget". Works offline.
Hand it to students: Click "🚀 Export Courseware Pack" to get a single HTML file. Send it over USB or a messaging app — the recipient double-clicks and it plays. Runs without internet, nothing to install.
Educators' courseware has long been stuck between two extremes:
- PPT is easy to edit but can't move — Want to add a quiz, simulation, or camera detection? PPT can't do it. You'd need separate web pages and windows.
- Web interactivity is flexible but uncontrollable — Handing the entire courseware to AI leads to layout chaos, version confusion, and unpredictable output. Teachers end up afraid to modify anything.
CourseForge takes the middle path with a layered architecture:
- Base Layer (fixed, controllable): Imported PPT text/charts/images (or rasterized pages). Unaffected by AI, always editable.
- Interaction Layer (replaceable): AI-generated HTML containers are independent layers — add/delete/modify/clear/regenerate at will. One-click delete won't damage the main content.
It does NOT stuff complex PPT conversion logic into the AI assistant — WorkBuddy is responsible for only one thing: generating interactive HTML snippets. Courseware editing, PPT parsing, and layout are all handled by this offline editor. Simple for teachers, unified control, low iteration cost.
| Feature | Description |
|---|---|
| Standardized PPT Import | Unified parsing kernel (pptxjs) with global rules for fonts/sizes/layers; one-click style normalization across different PPTs. |
| Layered Courseware Model | Base layer (PPT content) + interaction layer (HTML containers) fully decoupled. AI error = delete one widget, main content untouched. |
| Drag-and-Drop Canvas | PPT-like UX: left sidebar thumbnails for page management, central canvas drag layout, every element is a layer. |
| AI-Powered Interactivity | Select container → call local WorkBuddy → describe requirements → generate interactive H5 → preview & confirm; supports regenerate / replace / clear / duplicate. |
| Built-in Offline Widgets | Quiz / vote / drag-drop — compliant H5 widgets work offline, no internet or WorkBuddy needed. |
| Secure Local Communication | Editor ↔ WorkBuddy via local WebSocket (127.0.0.1). AI only receives and returns HTML fragments, never holds the full courseware. Data never leaves your machine. |
| Project / Export Separation | "Save Project" = JSON (for re-editing); "Export Courseware Pack" = single HTML (interactions inlined as iframe srcdoc, for offline distribution). |
| True Single File | CourseForge.standalone.html inlines all JS/CSS with zero external dependencies. Double-click to run. Perfect for mass distribution. |
CourseForge's interactive content is generated by local WorkBuddy via local WebSocket communication (localhost only, default ws://127.0.0.1:7788).
Editor sends request:
{
"type": "generate",
"requestId": 1,
"prompt": "Create a 3-question multiple-choice quiz about buoyancy",
"theme": { "primary": "#2563eb", "bodyFont": "Microsoft YaHei" },
"size": { "w": 340, "h": 200 }
}WorkBuddy returns self-contained HTML fragment (inline CSS/JS, loadable offline via srcdoc):
{ "type": "result", "requestId": 1, "title": "Buoyancy Quiz", "html": "<!doctype html>…self-contained HTML…" }- When WorkBuddy is not connected, a built-in Mock Generator returns usable quiz/vote/drag-drop games by keyword matching — try first, integrate later.
- Widgets follow
WIDGET_SPEC.md: accept--cf-*theme variables, respond tocf:activate/deactivatelifecycle, emitcf:event. - Full integration guide for AI assistants:
docs/agents.md.
course-editor/index.html is the main editor (Fabric.js drag canvas + layered rendering), PPT parsing uses browser-side pptxjs, interaction containers load WorkBuddy-generated H5 via controlled iframe sandbox; build_singlefile.js inlines dependencies into CourseForge.standalone.html; workbuddy-bridge.js is the reference implementation for the WorkBuddy-side WebSocket server. See course-editor/README.md for details.
- Interaction iframes default to
sandbox="allow-scripts allow-forms allow-popups allow-modals allow-same-origin"; camera/microphone requires teacher's explicit opt-in via container properties, which appendsallow-same-originandallow="camera; microphone". - AI-generated content lives only in independent containers, never written to the base layer; one-click clear on error, no pollution of main content.
- Editor↔WorkBuddy communication is localhost-only (
127.0.0.1); interaction material is returned immediately after generation. The AI never holds complete courseware data and nothing goes to the cloud. - Exported packs inline interactive H5 as
iframe srcdocwith no external CDN references — which means offline playback, and also that no third-party script loads behind your back.
Known trade-offs (we'd rather tell you first):
- AI-generated HTML is executable code. We sandbox it, but the moment a teacher ticks "allow same-origin", that isolation opens up. Only enable it when you genuinely need camera or local storage.
- PPT import is browser-side parsing, not pixel-perfect rendering. Complex animations, SmartArt, and embedded video will be lost or distorted. For complex decks, use rasterized import (on the roadmap) or pre-convert slides to images.
- Editing is desktop-first. Phones and tablets view and present fine, but drag-and-drop layout is awkward on touch.
- No real-time collaboration, no version history. Project files are local JSON; versioning is up to your own cloud drive or Git. That is the price of the offline single-file approach, and we are not planning to change it.
First, the good news: you don't need to build anything to use this. Open course-editor/index.html and it runs. The source is the product — there is no compile step.
The build does exactly one thing: inline everything from libs/ into the HTML so you get a single distributable file.
cd course-editor
node build_singlefile.js # → CourseForge.standalone.html (~1.4 MB, zero external deps)Node 20+ is all you need. No backend to stand up, no npm dependencies to install, no services to run. Edit index.html, re-run the command, and the single-file build is back in sync.
| Document | What's in it |
|---|---|
course-editor/README.md |
The developer entry point — editor architecture, data model, WebSocket protocol, and how to extend it. |
course-editor/WIDGET_SPEC.md |
Widget spec v0.1 — read this before writing your own: --cf-* theme variables, the cf:activate/deactivate lifecycle, and cf:event reporting. |
docs/agents.md |
The guide for AI agents — drop this single page into any model's context and it knows what format of interactive HTML to produce. |
docs/borrowing-bento.md |
Competitive analysis ledger — a point-by-point breakdown of what's worth borrowing from bento, tagged shipped / planned / deliberately skipped, with reasons. |
CHANGELOG.md |
Version history — what changed and what got fixed in each release. |
CONTRIBUTING.md · SECURITY.md |
How to contribute code / how to report a security issue privately (never as a public issue). |
Where the code lives: course-editor/ is the app itself (index.html is the editor, libs/ holds offline dependencies, widgets/ the built-in components, build_singlefile.js the packer, workbuddy-bridge.js a reference WebSocket server); docs/ is documentation; assets/ holds repo imagery. There is no third-party build system anywhere, so the tree is quick to read.
CourseForge is aiming at something specific: a courseware tool teachers can afford, control, and take with them — works without internet, works without an account, and the files it produces will still open a decade from now. Any direction that requires the cloud, a login, or an installer is out of scope by design.
Where things stand:
✅ Shipped — layered courseware model (base + interaction layers), PPT import, drag-and-drop canvas, built-in offline widgets, single-file export, example gallery, page thumbnails, in-editor present mode.
🚧 In flight — Document-as-file: embed the project JSON inside exported packs so a double-click reopens them in the editor, killing the "exported and now I can't edit it" problem.
📋 Planned (ordered by value, no dates promised)
| Direction | Problem it solves |
|---|---|
| Rasterized PPT import | LibreOffice Headless renders each slide to PNG as the base layer, so complex layouts stop breaking |
| Native chart elements | A zero-dependency chart engine — inline SVG charts with no code and no CDN at export time |
window.courseforge API |
Lets WorkBuddy graduate from "making widgets" to "orchestrating a whole deck" |
| Autosave & recovery | Silent IndexedDB cache so a stray tab close doesn't cost you an hour |
| Widget template library | Turn good H5 widgets into reusable templates you can import and export |
| Print / PDF export | Teachers still hand out paper |
⚪ Deliberately not doing — real-time collaboration, cloud accounts, auto-update channels. All three require an always-on server, which contradicts the offline-and-in-your-control premise.
Want to push one of these up the list? Tell us your teaching scenario in Discussions → Ideas. Real classroom use cases are the primary input to how we prioritize.
This project drew inspiration from the following excellent open-source projects during its design and development:
| Project | Referenced For | License |
|---|---|---|
| nyblnet/bento | Editor UI patterns (thumbnail preview, example gallery, present mode), slash command menu, theme tokens design philosophy | MIT |
| pptxjs | Browser-side PPTX parsing & rendering core | MIT |
| Fabric.js | Canvas drag, layer management, object serialization | MIT |
| jQuery | DOM manipulation & event handling | MIT |
| D3.js | Data visualization binding (charts/timeline etc.) | BSD-3-Clause |
| JSZip | PPTX ZIP package parsing | MIT / GPLv3 |
Copyright Notice: If you reference CourseForge's code or design ideas in your project, please retain a link to this repository and include the above attribution. Respect original work — let's grow the educational tools ecosystem together.
Not sure where to post? Match what you're trying to do:
| You want to… | Go here |
|---|---|
| ❓ Ask for help — can't get it running, import looks wrong, widget won't render | Discussions → Q&A |
| 💡 Suggest a feature — "it would be great if…" | Discussions → Ideas |
| 🎨 Show what you built — a deck others can learn from | Discussions → Show and tell |
| 💬 Just talk — teaching scenarios, thoughts on AI courseware | Discussions → General |
| 🐛 Report a bug — with reproduction steps | Open an issue (steps + screenshot + browser version) |
| 🔒 Report a security issue | Use the private channel in SECURITY.md — never a public issue |
📣 We especially want to hear from teachers. You don't need to write code — describing exactly where lesson prep breaks down is the most valuable input there is. Real classroom pain outranks any feature that merely looks clever.
Fork and open a Pull Request — see CONTRIBUTING.md for the full conventions.
Planning something substantial? Open an issue or discussion before you build it. This project has a few hard architectural constraints (offline-capable, zero external dependencies, base layer decoupled from interaction layer). Without aligning first, you might finish the work only to have it rejected on positioning grounds — a waste for everyone. Small fixes (typos, obvious bugs, doc improvements) need no discussion; just send the PR.
If CourseForge helps your teaching, consider buying the author a coffee! Every bit of encouragement fuels continued development.
Scan with WeChat · Every tip motivates 🙏
CourseForge is open source under the MIT License — © 2026 The CourseForge authors. Bundled runtime components (jQuery, D3, JSZip, pptxjs, Fabric.js) retain their respective open-source licenses.