Core Concepts

TutorKit revolves around a simple but flexible JSON schema that describes your course content. Understanding this structure is key to mastering the platform.

Curriculum

A Curriculum is the top-level object that represents an entire course or tutorial.

• Title & Description: Metadata for the curriculum.
• Dependencies: Global npm dependencies required for the code environment (e.g., {"react": "^18.2.0"}). These apply to every lesson unless overridden.
• Lessons: An array of Lesson objects that make up the course.

Lesson

A Lesson is a single step or module within the curriculum.

• ID & Title: Unique identifier and display name.
• Files: The starting codebase for the lesson. It maps file paths to their string content.
• Dependencies: Lesson-specific dependencies that merge with or override global ones.
• Playground Config: Sandpack-specific settings (like overriding the template environment).
• Challenges: An array of actionable tasks the user must complete to finish the lesson.

Challenges & Validations

Challenges are what make TutorKit interactive. They test the learner's understanding by requiring them to write specific code.

A Challenge consists of:

• Instructions: A markdown string telling the user what to do.
• Hint (Optional): A markdown string with clues, hidden behind a "Reveal Hint" button.
• Validation: A stringified JavaScript function that receives an object of file contents and returns a boolean.

How Validation Works

The tutorkit component evaluates the validation string securely in the browser.

// Example validation function string
"function validate(files) { return files['App.tsx'].includes('<h1>Hello World</h1>'); }"

When a user clicks the "Check" button for a challenge, TutorKit passes the current state of the Sandpack editor files to this function. If it returns true, the challenge is marked as complete. Once all challenges in a lesson are complete, the user can advance to the next lecture.