Playground Component

The tutorkit package provides the main Playground React component. This component orchestrates the file explorer, code editor, live preview, and challenge tracking.

Installation

If you are using TutorKit in an external repository, you would install the package. In the context of the monorepo, simply add it to your app's dependencies:

{
  "dependencies": {
    "tutorkit": "workspace:*"
  }
}

Basic Usage

To use the Playground, you need to provide it with a curriculum object. You can optionally provide a theme object.

import { Playground } from "tutorkit";
import myCurriculum from "./curriculum.json";
import myTheme from "./theme.json";

export default function CoursePage() {
  return (
    <div style={{ height: "100vh", width: "100vw" }}>
      <Playground 
        curriculum={myCurriculum} 
        theme={myTheme} 
      />
    </div>
  );
}

Props

• curriculum (Curriculum): The JSON object representing your course structure.
• theme (ThemeValues | optional): A custom theme object. If omitted, a default dark theme is used.
• cacheLocal (boolean | optional): Whether to persist the user's progress and active files to localStorage. Defaults to true. Set this to false if you want to reset state on every mount (useful in the Studio preview).

Customization

The Playground is designed to take up the full width and height of its parent container. Make sure you render it inside a wrapper div with explicit dimensions.

Behind the scenes, the Playground automatically handles layout resizing between the instructions panel, code editor, and browser preview.