Studio Guide

The TutorKit Studio (apps/studio) provides a powerful visual interface to author your courses without writing raw JSON by hand.

You can also use the hosted studio here:

• https://tutorkit-studio.codearcade.io/

The live demo is here:

• https://tutorkit-demo.codearcade.io/

Curriculum Builder

The Curriculum Builder is where you construct the structure of your course.

1. Global Settings: Start by setting your Curriculum Title, Description, and any global dependencies (e.g., react or framer-motion).
2. Managing Lessons: Use the sidebar to add, duplicate, or delete lessons.
3. Editing Files: For each lesson, define the initial files the user will see in their editor. You can create multiple files (like App.tsx, index.css).
4. Creating Challenges: Add challenges to test the user's progress. Provide markdown instructions, optional hints, and write the JavaScript validation function right in the browser.
5. Live Preview: The right side of the screen shows a live instance of the Playground component, instantly reflecting the changes you make to your curriculum.
6. Export: Once you are happy with your curriculum, click the "Export JSON" button to download it.

Theme Builder

The Theme Builder allows you to customize the visual appearance of the Playground component.

1. Colors: Modify primary, background, surface, and text colors. The preview updates in real-time.
2. Typography: Change the font families and base font sizes.
3. Spacing & Radii: Adjust the padding, margins, and border radii to match your brand's aesthetics.
4. Export: Click "Export Theme" to download the JSON representation of your customized theme.

Using Exported Data

Once you have downloaded your curriculum.json and theme.json, you can import them into your own application and pass them to the tutorkit Playground component!