Emoji Mart desktop popup

Modern emoji picker popup app for desktop, based on the amazing Emoji Mart web component.

🍾 Built as a popup: quick invocation through your system custom shortcuts, and disappears when not needed, does not stay as a standalone window, does not run in the background
🔎 Search text box automatically focused and ready to type when invoked
⌨️ Can use the keyboard to navigate and select emojis
🧠 Remember your favorite emojis
⚔️ Cross-platform, can be installed natively on Linux, MacOS, or Windows (although only tested on Linux at the moment)
🧑‍🚀 Uses modern and flexible technologies (TSX for the UI, Rust for the cross-platform compilation, what else?), making it easier to maintain and build upon in the future
✒️ On x11 the selected emoji is automatically pasted to your currently focused app, instead of being added to the clipboard! (it allows to uses emojis without losing what was copied before).
⚠️ Auto-paste can be enabled also on Wayland, but require to open permissions of /dev/uinput, which is not recommended for security.

🆕 This project just had its first release, it should be already usable, but you might face bugs as it is not yet battle tested (especially regarding auto-paste). Please report any weird behavior in the GitHub issues! And feel free to contribute, the codebase is quite small and understandable.

Built with Tauri, Svelte, TypeScript, and Vite.

📥️ Installation

🐧 Linux

flatpak install io.github.vemonet.EmojiMart

⌨️ The easiest way to use Emoji Mart is to invoke it with a custom system keyboard shortcut, create one to register the command that starts the emoji picker:

flatpak run io.github.vemonet.EmojiMart

👣 More info on defining shortcuts in GNOME Shell here

Go to Settings > Keyboard > View and Customize Shortcuts > Custom Shortcuts

Or you can do it from the terminal, but you will need to adapt it if you already have existing custom shortcuts registered

# Check existing shortcuts list:
gsettings get org.gnome.settings-daemon.plugins.media-keys custom-keybindings

# Create shortcut 0 triggered with Super+E
gsettings set org.gnome.settings-daemon.plugins.media-keys custom-keybindings "['/org/gnome/settings-daemon/plugins/media-keys/custom-keybindings/custom0/]"
gsettings set org.gnome.settings-daemon.plugins.media-keys.custom-keybinding:/org/gnome/settings-daemon/plugins/media-keys/custom-keybindings/custom0/ name 'Emoji Mart'
gsettings set org.gnome.settings-daemon.plugins.media-keys.custom-keybinding:/org/gnome/settings-daemon/plugins/media-keys/custom-keybindings/custom0/ command 'flatpak run io.github.vemonet.EmojiMart'
gsettings set org.gnome.settings-daemon.plugins.media-keys.custom-keybinding:/org/gnome/settings-daemon/plugins/media-keys/custom-keybindings/custom0/ binding '<Super>e'

🌓 Emoji Mart will try to use your system theme, but you can also set a specific theme using the --theme argument when starting the app, possible values are dark, light, and auto:

flatpak run io.github.vemonet.EmojiMart --theme light

👣 If you are using Wayland on GNOME we recommend to enable new windows to be centered, otherwise the popup will appear on the top left corner. If you are using Mutter, the default window composer for GNOME, you can do so by running the following command:

gsettings set org.gnome.mutter center-new-windows true

⚠️ Enable auto-paste on Wayland

To enable auto-paste to work on Wayland you will need to give your user permission to read/write to the user input. It is not recommended in regard of security, and Emoji Mart will still work by copying the emoji to your clipboard if you don't make this change. But it is currently the only way we found to automatically paste on Wayland, please let us know if you know of a better way in the issues!

Add this udev rule which will enable your user to access /dev/uinput:

echo "KERNEL==\"uinput\", MODE=\"0660\", GROUP=\"$(id -gn)\", TAG+=\"uaccess\"" | sudo tee -a /etc/udev/rules.d/99-uinput.rules
# Then reload the rules (or reboot):
sudo udevadm control --reload-rules

Alternatively, but not recommended, you can also use the .AppImage file

This is not recommended, as the apps takes longer to startup than with the flatpak, and not all dependencies are included to auto-paste.

Run this command to download the .AppImage, and create a desktop file for it:

curl -Ls https://raw.github.com/vemonet/EmojiMart/main/install.sh | bash

Or manually download the .AppImage file from the latest release, and install it.

If you are using x11 you will need to make sure xdotool is installed on the system, e.g. for fedora:

sudo dnf install libxdo-devel

🍎 MacOS

Download the .dmg for the latest release, and install it.

Then create a custom shortcut for the command: flatpak run io.github.vemonet.EmojiMart to invoke it quickly.

🪟 Windows

Download the .exe for the latest release, and install it.

Then create a custom shortcut for the command: flatpak run io.github.vemonet.EmojiMart to invoke it quickly.

📋️ Notes

The app currently does not run in the background. It could be invoked slightly faster with a built-in shortcut, and running in the background, but that increases the chances of people starting many phantom processes without knowing. When running in the background and invoked using the built-in shortcut the window is not properly focused. Alternatively when installed with flatpak starting it without letting it run in the background is fast enough for using it like this directly, and does not have any issue with focusing.

Letting the user register custom system shortcuts, instead of having the app registering the shortcut for the user, prevents bugs and conflicts with other shortcuts. Which enable the users to choose from a larger amount of shortcuts.

Inspired by:

github.com/tom-james-watson/Emote my favorite GTK emoji picker
github.com/Simon-Laux/tauri-emoji-mart-app who combined tauri with emoji-mart, difference are that we use Svelte instead of React, and the popup design has been improved.

Icon credits: duniaonme653898 on Vecteezy

☑️ Todo

Select multiple emoji when pressing a specific key, e.g. when pressing shift
On x11: improve the process to add the emoji to the clipboard/paste/close the app. Currently there is an issue with xdotool clearing the clipboard when called from tauri
On wayland: add auto-paste on Wayland with ydotool, this will require some permission wizardry from the user to enable access to /dev/uinput in the flatpak container(cf. flatpak/flatpak#4137), and might also require to run in the background (for the ydotoold daemon)
Check if working properly on MacOS
Check if working properly on Windows
Add auto-paste on Windows and MacOS when the compatibility between Enigo and Tauri is resolved (cf. enigo-rs/enigo#15 and tauri-apps/tauri#6421)

🛠️ Development

Recommended IDE Setup: VS Code + Tauri + rust-analyzer

Requirements: yarn v1 (v3 is not supported by flatpak to generate npm sources)

See pre-requesites to run tauri: https://tauri.app/v1/guides/getting-started/prerequisites

🧶 Install

Additional dependencies for Linux to enable auto-paste on x11:

sudo dnf install libX11-devel libxdo-devel

Install dependencies:

make install

If you are developing on Wayland you will need to install extra dependencies (e.g. ydotool to auto-paste):

make install-wayland

🛩️ Run

In development mode, with automatic reload when the code changes:

make dev

To see logs and debug: right click on the app window, and select Inspect Element

📦️ Build

To build the Flatpak package checkout this repository: github.com/vemonet/flathub/tree/io.github.vemonet.EmojiMart

Build .AppImage and .deb packages, or .dmg/.exe depending on your OS:

make build

On Linux, you can install the previously built EmojiMart.AppImage as desktop app:

make desktop-local

✅ Format

Run automatic formatting and linting of the codebase:

make fmt

⏫ Upgrade dependencies

You might want to upgrade the latest versions of:

Tauri app: tauri.app
EmojiMart web component: npmjs.com/package/emoji-mart and npmjs.com/package/@emoji-mart/data

To automatically upgrade dependencies with yarn and cargo you can run:

make upgrade

🏷️ New release

To publish a new release, follow this process:

Changed the version in: package.json, src-tauri/Cargo.toml and src-tauri/tauri.conf.json, you can use this script to do it automatically for a specific new version:
```
make version=0.1.2 bump
```
Merge the main branch to the release branch, and push the release branch to GitHub.
A GitHub Action workflow will automatically build the artefacts for the different platforms, create a new release on GitHub, and update the version in the flathub repo, which will trigger a new build/release on flathub.