DoubleDot Emoji Picker

A userscript that displays an emoji picker when you type : followed by text in any input field.

Compact view

Grid view

Mirrors & Issue Tracker

• Main repo: code.x3ro.dev/x3ro/doubledot-emoji-picker
• Mirror: codeberg.org/x3ro/doubledot-emoji-picker
• Issue tracker: codeberg.org/x3ro/doubledot-emoji-picker/issues (the main repo does not allow public registrations, so please report issues on Codeberg)

Installation

1. Install Violentmonkey for your browser (Tampermonkey/Greasemonkey may also work but are untested)
2. Download and install the latest userscript

Usage

1. Type : followed by letters in any text field (e.g., :smile, :thumbs-up)
2. The picker appears with matching emojis
3. Select an emoji:
   • Click on it
   • Use arrow keys to navigate, then press the configured trigger key (Tab, Enter, or both — see Settings)
   • Press Escape to close without selecting

Skin tone variants

For emojis that support skin tones (👋, 👍, 🧑‍🚒, …), once you have chosen a skin tone it is inserted directly without opening the selector again.

To open the selector:

• Right-click the emoji, or
• Shift + trigger key when the emoji is selected

The selector shows the base (default) emoji followed by the five skin tone variants.

• Click a variant or use Left/Right arrow keys to navigate, then confirm with the trigger key
• Press Escape to close just the selector (press again to close the picker)
• Typing any character confirms the focused variant and passes the typed character through to the input
• Your choice is saved per emoji — next time it will already display in your preferred skin tone

The trigger only activates when : is at the start of text or after a space, so URLs and other text containing colons won't trigger it.

You can also search without dashes — :thumbsup will match :thumbs-up. Search also matches emoji tags (e.g. :omg finds 🙈).

Picker views

The picker has two layouts: Compact (a single scrollable row of 6 emojis with a collapsible toolbar, default) and Grid (multi-row). Press Ctrl+Space while the picker is open to toggle between them. You can also set your preferred default in Settings.

Colon-less mode

Enable Colon-less mode in Settings to trigger the picker by typing any word that matches an emoji slug — no leading : required. A configurable minimum word length (default: 5) prevents false positives on short common words. The trigger key for colon-less mode can be configured independently (defaults to Tab to avoid interfering with Enter/newline behavior).

Custom keywords

Open Settings → Custom keywords to attach your own search terms to any emoji. For example, add lgtm approve to 👍 and searching :lgtm will surface it.

Features

• Works everywhere - <input>, <textarea>, and contentEditable elements
• Up-to-date emojis - Bundled directly from the Unicode standard
• Skin tone variants - Inline selector for emojis that support skin tones; preference saved per emoji
• Colon-less mode - Optionally trigger the picker without a leading : by typing any matching word
• Custom keywords - Attach your own search terms to any emoji via Settings
• Theme - Light, dark, or automatic (follows system preference)
• Configurable trigger key - Choose Tab, Enter, or both to insert; colon-less mode has its own independent setting
• Blocklist / Allowlist - Control which sites the picker appears on using URL patterns with wildcard support
• Compact view - Switch to a single-row layout with an expanding toolbar that collapses to an ellipsis at rest; toggle with Ctrl+Space while the picker is open, or set as default in Settings
• Quick settings access - Type :doubledot in any field to open settings, even on blocked pages

Controlling Which Sites the Picker Appears On

Open Settings (gear icon) to switch between two modes:

Blocklist mode (default) — the picker appears everywhere except the listed URLs. Click the ban icon in the picker header to add the current page.

Allowlist mode — the picker only appears on the listed URLs. Click the plus icon in the picker header to add the current page.

In both modes you can choose how specific the pattern should be:

• https://example.com/foo/bar/* — match only this path
• https://example.com/* — match the entire site

Tip: Type :doubledot in any text field to open settings, even on pages where the picker is disabled.

Building from Source

Requires just.

npm install     # Install dependencies (run once)
just build      # Output: dist/doubledot-emoji-picker.user.js
just dev        # Development mode with hot reload
just release    # Interactively bump version, build, and copy to release/

License

GNU GPLv3