create-svelte-scorm

Scaffold a SCORM-compliant e-learning course built with Svelte 5, SvelteKit, Tailwind CSS, and shadcn-svelte.

Quick Start

pnpm create svelte-scorm my-project

npx create-svelte-scorm my-project

You can also scaffold into the current directory:

pnpm create svelte-scorm .

What You Get

• SCORM 1.2 & 2004 support with automatic LMS detection
• Slide-based course player with linear or free navigation
• Built-in quiz system with weighted scoring and pass thresholds
• Persistent state via SCORM suspend_data with compression and auto-serialization
• Full reactivity for LMS data model (score, progress, completion status, etc.)
• Dev mode with localStorage fallback (no LMS needed)
• Pre-configured Tailwind CSS and shadcn-svelte UI components

After Scaffolding

cd my-project
pnpm run dev

Define your course in src/course.ts and add slide components under src/course/slides/.

Testing Your Course

Locally, the template creates a mocked LMS API that simulates SCORM behavior and persists data via localstorage, so local testing is seamless.

If you want to test on a real LMS, you can use a local Docker image of Moodle, or try Scorm Cloud, which offers a full-featured LMS, Debugging tools, and a generous free tier for testing.

Author Reference

For the full API documentation (course definition, player, SCORM state, quiz system, etc.), see the Course Author Reference.

Built With

• Svelte 5 - UI framework
• SvelteKit - Application framework
• Tailwind CSS - Utility-first CSS
• shadcn-svelte - UI component library
• sv-router - Client-side router
• vite-plugin-scorm - Vite Plugin for Scorm
• svelte-enhanced-video - A Video auto enhancer plugin for Svelte and SvelteKit.

Author

Rachid Boudjelida - rachidboudjelida.com

License

MIT