Scormly

Local-first block-based course builder with SCORM & cmi5 export

Build interactive, block-based courses right in your browser — no server, no cloud. Everything is stored in your own file system, and the finished course is exported as a SCORM 1.2 / 2004 or cmi5 (xAPI) package for any LMS.

🌐 scormly.app

Features · Quick start · How it works · Documentation · Roadmap

---

Scormly is a local-first, in-browser course builder that exports standards-compliant SCORM 1.2 / 2004 and cmi5 (xAPI) packages. No backend, no account — your data and media live in your own file system via the File System Access API, and packaging happens entirely client-side.

✨ Features

• Block-based editor — a lesson is built from content blocks with inline WYSIWYG editing, drag-and-drop reordering, and a right-click context menu.
• Rich block library:
  • Text: headings, rich-text paragraphs, lists, callouts (note / warning), code, tables, quotes.
  • Media: images, galleries, video, audio, and embeds (YouTube / Vimeo / any https page).
  • Code: your own HTML / CSS / JavaScript, or an uploaded .html page or .zip site (widgets, simulations, mini-games), shown in a frame that fits its content. Pages can use the course look — theme color, button shape, fonts and ready-made sc-* classes (the Scormly kit).
  • Navigation: a "Continue" button that reveals the rest of the lesson in parts (optionally restricted — locked until the tasks above are done), a divider, and a course outline that links to the other lessons.
  • Interactive: tabs, accordions, flashcards, a branching dialogue scenario, and quizzes (single / multiple / matching with per-answer feedback, a passing score, and a "show correct answers" toggle).
• Video controls — download is disabled by default, and any video can require watching (~95%) before the learner may continue.
• Course settings — completion rule (view all lessons vs. answer all quizzes), optional pass/fail scoring with a passing score, and a navigation mode (free, or linear where Next unlocks only once the lesson is done).
• Learner preview — a full-screen, in-app run-through with a Finish screen.
• Global project themes — Rose, Ocean, Forest, Sunset, Mono, Indigo, Crimson, Mint, Grape, Terminal — change the accent and the look of buttons/interactions with one click.
• Accessible courses — designed to help you meet WCAG 2.1 AA: full keyboard navigation, screen-reader friendly markup and announcements, WebVTT captions and transcripts, decorative-image flag, AA contrast in every theme, and a learner accessibility menu (text size, high contrast, readable spacing, reduced motion). The pre-export check flags missing alt text, captions, transcripts, embed titles and content language, and the exported player respects the LMS learner's caption and language preferences.
• Interface in five languages (English, Ukrainian, French, Spanish, German) and an SEO landing page.
• Undo / Redo with history and keyboard shortcuts (Ctrl/Cmd + Z / Y), persisted alongside the project.
• Local-first — the project and media are saved to your own folder via the File System Access API (autosave, recent projects, image optimization); no backend whatsoever.
• SCORM 1.2 / 2004 and cmi5 (xAPI) export — runs entirely client-side (JSZip). SCORM is verified on SCORM Cloud.
• Review comments — comment on any block, reply and resolve: for colleagues or as notes to self. No accounts — just your name. They live in the project's own comments.json, travel in the project .zip and never reach the exported course.
• AI-friendly — every project gets an AGENTS.md documenting project.json and all block types, so an AI assistant can read, edit, or author courses by editing the JSON directly — including pages for Widget blocks (the block's Copy instructions for AI button gives a chat assistant the same rules).
• Declarative data model — the whole course is serialized JSON (project.json) that is easy to version, import, and export.

🧱 Stack

Layer	Technology
UI	React 18 + TypeScript (strict)
Build	Vite
Styling	Tailwind CSS v4 (CSS-first, @theme)
State	Zustand (+ custom undo/redo history)
Files	File System Access API
Export	JSZip (SCORM 1.2 / 2004, cmi5)
Drag-and-drop	dnd-kit

🚀 Quick start

A modern Chromium-based browser (Chrome / Edge) is required to save to disk via the File System Access API.

git clone https://github.com/dmmat/Scormly.git
cd Scormly
npm install
npm run dev      # http://localhost:5173

Other commands:

npm run build    # type check (tsc --noEmit) + production build
npm run preview  # local preview of the production build

🛠 How it works

A course is a hierarchical JSON object: Course → Lesson[] → Block[]. Each block has an id, a type, settings, and typed data. The editor renders blocks through a dispatcher, and changes flow through a Zustand store with snapshots for undo/redo.

Export bundles a self-contained static player with the course data embedded as course-data.js (loaded via a <script> tag — LMS sandboxes reject runtime fetch of sibling files), copies the referenced media from assets/, generates the manifest, and packs everything into a single .zip with JSZip — no server required:

• SCORM 1.2 / 2004 — imsmanifest.xml + scorm.js (one runtime auto-detects the API version).
• cmi5 (xAPI) — cmi5.xml + xapi.js (the same player; it does the cmi5 launch handshake and sends xAPI statements to the LMS's LRS).

For more detail, see docs/architecture.md.

This is the beginning of the README. Read the rest at the original. Read the full README ↗