Edu SDKEdu SDK

React

UI components in the @edu-sdk/react package.

@edu-sdk/react renders data produced by edu-sdk.

Components

ComponentData fromProp shape
<Flashcards />createFlashcards()flashcards: Flashcard[] (use artifact.content)
<Quiz />createQuiz()questions: QuizQuestion[] (use artifact.content)
<StudyGuide />createStudyGuide()Full Artifact<StudyGuideContent>
<PracticeProblems />createPracticeProblems()problems: PracticeProblem[] (use artifact.content)
<Quiz questions={quiz.content} />
<StudyGuide studyGuide={studyGuide} />

No component for

Core APIHow to render
createNote()Render Markdown yourself (artifact.content is a string)
createLearningSet()Compose the material components from nested artifacts
createStudySession()Build a runner over blocks + materials — see Study session flow

<Quiz /> grades with gradeQuiz() internally. It does not use createQuizAttempt / completeQuizAttempt — those are for app-owned persistence.

Styling

Three levels. See Styling:

  1. Import @edu-sdk/react/styles.css for the defaults.
  2. Pass className / classNames to override parts of a component.
  3. Set CSS variables (for example --edu-quiz-background) to theme the defaults.

See Quick Start for <Quiz />, and Concepts for prop-shape rules.

On this page