Use the OpenLearning widget creation tool to scaffold a new project:
# Create a new widget project
pnpm create @openlearning/widget my-widget
# Navigate to the project
cd my-widget
# Install dependencies
pnpm install
# Start development server
pnpm dev
# Build for production
pnpm build
The widget framework provides React components and hooks for building interactive learning widgets with learner and setup views.
Course-ready widgets built with the OpenLearning framework:
Navigate and explore a code project shown in a file tree structure.
A demo project showcasing the widget framework in action
Create interactive guided walkthroughs of an image with step-by-step instructions.
Author rich markdown content with support for GFM, math, and diagrams
Explore interactive code examples step-by-step with markdown explanations