Vanilla JavaScript emoji picker
GitHub Project/Documentation

Demo: Native Style

Demo: Twemoji Style


Via npm:
npm install @joeattardi/emoji-button
Via yarn:
yarn add @joeattardi/emoji-button
Via jsDelivr CDN:
<script src=""></script>

Basic Usage

import EmojiButton from '@joeattardi/emoji-button';

window.addEventListener('DOMContentLoaded', () => {
  const button = document.querySelector('#emoji-button');
  const picker = new EmojiButton();

  picker.on('emoji', emoji => {
    document.querySelector('input').value += emoji;

  button.addEventListener('click', () => {

TypeScript note

Because the EmojiButton class is a default export, it requires a small tweak to import the library in a TypeScript project. There are two options:

  1. Enable the esModuleInterop compiler option and import it normally as shown in the above example
  2. Import the module using the following syntax: import EmojiButton = require('@joeattardi/emoji-button');.