The M3E web component library is distributed as a set of modular packages under the scoped namespace @m3e. Each component is published independently and can be installed as needed.

For example:

npm i @m3e/button

Alternatively, install the meta-package that aggregates all components into a unified, non-tree-shakeable bundle—ideal for full-library usage.

npm i @m3e/all

Each package uses JavaScript Modules and documents their native module support. To use a package directly in a browser without a bundler, use a module script similar to the following.

<script type="module" src="/node_modules/@m3e/button/dist/index.js"></script>

In addition, you must also use an import map to include dependencies. The following is an example import map that imports all entry points for @m3e/core.

<script type="importmap">
  {
    "imports": {
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "@m3e/core": "/node_modules/@m3e/core/dist/index.js",
      "@m3e/core/a11y": "/node_modules/@m3e/core/dist/a11y.js",
      "@m3e/core/anchoring": "/node_modules/@m3e/core/dist/anchoring.js",
      "@m3e/core/bidi": "/node_modules/@m3e/core/dist/bidi.js",
      "@m3e/core/layout": "/node_modules/@m3e/core/dist/layout.js",
      "@m3e/core/platform": "/node_modules/@m3e/core/dist/platform.js"
    }
  }
</script>

For production, use minified versions (e.g. index.min.js) for faster load times.

Each package includes a Custom Elements Manifest to support enhanced editor tooling and developer experience.

To enable autocomplete and hover documentation for a package, install the Custom Elements Manifest Language Server extension. It will automatically detect the manifest bundled with this package and surface tag names, attributes, slots, and events in supported files.

Alternately, you can explicitly reference the html-custom-data.json and css-custom-data.json in your workspace settings. The following is an example for @m3e/button.

{
  "html.customData": ["./node_modules/@m3e/button/dist/html-custom-data.json"],
  "css.customData": ["./node_modules/@m3e/button/dist/css-custom-data.json"]
}