@openlearning/create-widget

Scaffold a new OpenLearning widget project with all necessary boilerplate.

Usage

npm create @openlearning/widget@latest my-widget

Or with pnpm:

pnpm create @openlearning/widget my-widget

What It Creates

The scaffolding tool generates a complete widget project structure:

my-widget/
├── src/
│   ├── components/
│   │   ├── LearnerView.tsx
│   │   └── SetupView.tsx
│   ├── entries/
│   │   ├── learner.tsx
│   │   └── setup.tsx
│   ├── data.ts
│   ├── types.ts
│   ├── DevApp.tsx
│   ├── devMain.tsx
│   └── index.css
├── learner.html
├── setup.html
├── index.html (dev server)
├── package.json
├── tsconfig.json
├── vite.config.ts
├── eslint.config.js
└── README.md

Next Steps

After creating a new widget:

cd my-widget
pnpm install
pnpm dev

Then edit the components in src/components/ to implement your widget's learner and setup interfaces.

Project Structure

• src/components/ - React components for learner and setup views
• src/entries/ - Widget entry points (created automatically by framework)
• src/types.ts - Define your widget's config type
• src/data.ts - Default configuration for your widget
• html/ - Production HTML templates
• index.html - Development server entry point

The framework handles all parent communication, config state management, and DOM rendering automatically.

Development

pnpm dev    # Start dev server
pnpm build  # Build for production

Framework

This tool uses @openlearning/widget-framework for all widget functionality. See its documentation for details on the parent message protocol, hooks, and component props.