TutorKit

TutorKit is a React-first toolkit for building interactive learning experiences, guided coding lessons, and curriculum-driven UIs.

It helps you create course flows with:

• lesson-based navigation
• interactive playgrounds
• challenge validation
• progress tracking
• custom theming

Main docs

The full documentation and guides are available here:

https://tutorkit.codearcade.io/

Installation

npm install tutorkit

or

pnpm add tutorkit

Basic usage

import React from "react";
import { PlaygroundProvider, type Curriculum } from "tutorkit";

const curriculum: Curriculum = {
  id: "intro-react",
  title: "Intro to React",
  lessons: [
    {
      id: "lesson-1",
      title: "Hello world",
      content: "Welcome to the lesson!",
      challenges: [],
    },
  ],
};

export default function App() {
  return (
    <PlaygroundProvider curriculum={curriculum}>
      <div>Hello from TutorKit</div>
    </PlaygroundProvider>
  );
}

Features

• curriculum and lesson structure
• embedded code exercise environments
• challenge completion flows
• local progress persistence
• theme support via tutorkit-theme

Studio and live demo

You can also try the no-code authoring and preview tools here:

• Studio: https://tutorkit-studio.codearcade.io/
• Live demo: https://tutorkit-demo.codearcade.io/

More information

For deeper examples, API docs, and authoring guidance, visit:

https://tutorkit.codearcade.io/

License

MIT