Tessera

The wiring is standard. The design is yours.

Tessera handles what the LMS cares about: tracking, completion, scoring, navigation, and saved state. There is no required look, layout, or component set.

<script>
  import { useQuestion } from 'tessera-learn';

  let clicked = $state([]);

  // registers with scoring, tracking, and resume
  const q = useQuestion({
    id: 'trip-hazards',
    response: () => ({ type: 'choice', response: clicked, correct: ['cable', 'box'] }),
    reset: () => (clicked = []),
    restore: (saved) => (clicked = saved),
  });
</script>

<!-- your markup, your styles -->
<button onclick={q.submit} disabled={q.submitted}>Check</button>

Built-in or custom, every component uses the same hooks. A drag-and-drop, hotspot, or branching scenario scores, tracks, and resumes exactly like a multiple-choice question.

Every build gets checked

Every build flags structure and accessibility problems, so they get fixed while you work.

# build it, render it, audit it
pnpm check product-101

# pass or fail against the ruleset you pick:
# WCAG 2.0 A, 2.0 AA, or 2.1 AA

The audit renders every page in a real browser and checks for accessibility and structural issues.

Send it to any LMS

Run pnpm export <course> and get a package you can upload today. One course, every standard.

Emit custom xAPI statements from any component when completion and score are not enough.

Read the docs

From your first install to how the SCORM and xAPI runtimes work underneath.