Picmo — Popup Picker

Show a Picmo picker in a toggle panel (popup pattern) and read emoji:select.

—

Click the button to open the popup.

Important JavaScript

Picmo’s createPopup helper is awkward on CDN loads. This lesson builds a popup panel with createPicker and toggles hidden — same idea, reliable in the workbook.

const { createPicker } = await import(
  "https://cdn.jsdelivr.net/npm/picmo@5.8.5/+esm"
);
const picker = createPicker({ rootElement: panel, showVariants: false });
panel.hidden = true;

trigger.addEventListener("click", function (event) {
  event.stopPropagation();
  panel.hidden = !panel.hidden;
});

picker.addEventListener("emoji:select", function (selection) {
  preview.textContent = selection.emoji;
  panel.hidden = true;
});