ed-components ยท GitHub license npm version

A set of web-components for education.


Not ready for production yet. These components are used for research.

Wrapper components

Single answer components


Importing all elements

Components are published as npm packages, you can easily import all components and register it with the ed-components file including side-effects.

import  "https://esm.sh/@ed-components/ed-components/ed-components";

You can also install locally with npm i @ed-components/ed-components and then in your code.

import  "@ed-components/ed-components/ed-components";

A registerComponents function is also provided.

import  registerElements from "https://esm.sh/@ed-components/ed-components";

With local package:

import  registerElements from "@ed-components/ed-components";

You also can register the elements you use and rename them. See dedicated pages for each component.


Via CSS custom properties (variables) inspired by bootstrap.

User interface layout

Ideas comes from Edx licensed CC-BY-SA.

The learner view of a problem from edx CC-BY-SA

  1. Problem text.
  2. Response field.
  3. Rendered answer.
  4. Submit.
  5. Attempts.
  6. Save.
  7. Reset.
  8. Show Answer.
  9. Feedback.

Feedbacks view in edx


Programming guide

  1. Element class names are on the form EdXyzElement and have a static method define that allow to register element in the custom registry with default name ed-xyz. See webcomponents.guide.
  2. The documentation of components follows Custom Element manifest JSDoc.

Testing with Web Test Runner

All components are tested from the components directory.

To execute all tests npm run test, in watch mode: npm run test:watch.

To execute test for a single component, pass the test group to wtr:

npm run test -- --group ed-survey