Skip to main content

Installation

All PicMo packages are available on the NPM registry, and are also distributed as UMD modules which can be added to any site with a simple <script> tag. Resources can be served locally or loaded from a CDN.

Using the UMD distributions​

The UMD distributions for each module will expose a global object containing all of the same exports that are included in the NPM package.

The add-on packages include picmo as a peer dependency - it is not bundled with them. In an npm project, you will need to install picmo along with any add-on packages. When using the UMD distributions, the main picmo module must be loaded first since the other modules reference it by its global name picmo.

Using the ESM distributions from the browser​

If your browser supports ES Modules, you can import PicMo or its add-ons with an import statement in a JavaScript file. This file must be added with a script tag with type set to module.

picmo​

From NPM​

npm install picmo

From a CDN (UMD)​

The UMD for picmo exposes a global picmo object containing all exports.

<script src="https://unpkg.com/picmo@latest/dist/umd/index.js"></script>

From a CDN (ESM)​

import { createPicker } from 'https://unpkg.com/picmo@latest/dist/index.js';

@picmo/popup-picker​

From NPM​

npm install @picmo/popup-picker

From a CDN (UMD)​

The UMD for @picmo/popup-picker exposes a global picmoPopup object containing all exports.

<script src="https://unpkg.com/@picmo/popup-picker@latest/dist/umd/index.js"></script>

From a CDN (ESM)​

import { createPopup } from 'https://unpkg.com/@picmo/popup-picker@latest/dist/index.js?module';

@picmo/renderer-twemoji​

From NPM​

npm install @picmo/renderer-twemoji

From a CDN (UMD)​

The UMD for @picmo/renderer-twemoji exposes a global picmoTwemoji object containing all exports.

<script src="https://unpkg.com/@picmo/renderer-twemoji@latest/dist/umd/index.js"></script>

From a CDN (ESM)​

import { TwemojiRenderer } from 'https://unpkg.com/@picmo/renderer-twemoji@latest/dist/index.js?module';