Learning Quickstart

  1. What you're building
  2. What the starter already gives you
  3. Install the packages
  4. Wire the LMS layer
  5. Register the Learning blocks
  6. Seed a course
  7. Render the course shell
  8. Where to go next

This quickstart renders a course shell — the enrollment-gated page a student actually learns in. Three pieces: @wabbit/tome-lms (the collections),@wabbit/tome-lms-ui (the shell components), and the Learning block pack @wabbit/tome-blocks-lms-pack (course cards, lesson lists, progress bars). It assumes the block loop from Get Started is working.

What the starter already gives you

A tome-starter fork ships the LMS wired in src/payload.config.ts, the Learning blocks bridged in src/blocks/lms-pack-bridge.*, the course routes under /courses, and a seed that creates demo courses. On a starter fork you can jump to seeding a course; the wiring sections are the reference for a bare app.

Install the packages

The LMS and LMS-UI layers are capability layers — they install with just the registry line. The Learning block pack is gated, so it needs your install token in .npmrc (see Get Started):

npm install @wabbit/tome-lms @wabbit/tome-lms-ui @wabbit/tome-blocks-core @wabbit/tome-blocks-lms-pack

Wire the LMS layer

The LMS is a single-call layer: createLmsLayer returns all of its collections, which you spread into your config. Point it at your member and media collections:

import { createLmsLayer } from '@wabbit/tome-lms'

const lmsLayer = createLmsLayer({
  memberSlug: 'members',
  mediaSlug: 'media',
  // Close the public read surface on locked lessons — non-enrolled callers
  // only see unlocked lessons; enrolled members and maintainers see theirs.
  lessonReadAccess: 'enrollment-gated',
  // Optional: when @wabbit/tome-catalog is present, course + certification
  // product types register with the catalog, so courses can be sold.
  composition: { catalog: { present: true } },
})

// ...then in your config's `collections` array:
...lmsLayer.collections,

This registers the full LMS collection set — courses, topics, lessons, enrollments, completions, and the rest. Its primary collection is courses.

Register the Learning blocks

The pack ships six blocks: course-card, lesson-list,progress-bar, quiz-summary, instructor-card, and enrollment-cta. Register them the one-call way:

import { blockRegistry, bundleRegistry } from '@wabbit/tome-blocks-core'
import { register } from '@wabbit/tome-blocks-lms-pack'

register(blockRegistry, bundleRegistry)

The starter uses the bridge form: the config half (src/blocks/lms-pack-bridge.config.ts) spreads LmsPackBlocks into the Pages layout; the render half (src/blocks/lms-pack-bridge.tsx) imports CourseCard, LessonList, ProgressBar,QuizSummary, InstructorCard, and EnrollmentCta from @wabbit/tome-blocks-lms-pack/render and folds them into the render map. With @wabbit/tome-lms present, the blocks read live course data; without it they fall back to static props.

Seed a course

The starter's demo seed creates real courses in the courses collection:

npm run demo:dev

That seeds two courses — demo-course-onboarding ("Onboarding Essentials") and demo-course-advanced — with topics, lessons, and a demo student already enrolled. It's idempotent. To build one by hand, create a document in /admin under the courses collection, add topics and lessons, and set it published.

Render the course shell

Courses render through the @wabbit/tome-lms-ui shell components — CourseShellRoot wraps the page, EnrollmentCTA handles the not-yet-enrolled state, and LessonContent renders the active lesson. In the starter, the public course catalog is at /courses and a single course renders at /courses/<slug>.

Heads up — the shell is enrollment-gated. The course route redirects anonymous visitors to /login, so loading /courses/demo-course-onboarding signed-out won't show you the shell. After npm run demo:dev, sign in as the seeded demo student (demo-student@demo.local / demo1234) to see the rendered course. The catalog list at /courses is public — the same path wabbit.com uses for its own catalog.

The catalog list renders course cards from @wabbit/tome-ui card primitives (a live query on courses), while the shell page composes the lms-ui components above. The Learning blocks you registered are the author-facing way to drop course cards and enrollment CTAs onto any regular page.