Discord-style Custom Emojis
akskokki124 downloadsType :shortcode: to render your own custom emoji image anywhere, just like chatting in Discord/Slack. The underlying note stays as plain text.
- Overview
- Scorecard
- Updates2
Type :shortcode: and it turns into your own custom emoji image as you type. The note itself still just contains the plain text underneath; the image is a simple client-side swap that behaves like a Discord/Slack emoji.
Why
I'm sort of addicted to my Discord/Slack emotes; they're just part of the way I think when typing now. I wanted an easy way to express myself in the same way in Obsidian notes. Icon Shortcodes and similar plugins do far more than that (icon packs, pickers, a bunch of settings) and it was just too much for me while lacking some of the simple polish and customisation I wanted. This just renders :shortcode: as a custom image, as soon as you finish typing it.
Features
:shortcode:becomes the image the moment you finish typing it.- Typing
:pops up a fuzzy-matched suggestion list, so:pehafindspeepoHappy. Uses the same fuzzy matcher as Obsidian's quick switcher. - Can render in all editing and reading views, but the contents of the file remain as
:shortcode:. Can be configured to render as text in Source/Live Editing views. - Clicking an emoji puts your cursor where you'd expect, and arrow keys/backspace treat it as one unit instead of a run of hidden characters.
- Animated GIFs work fine, not just static images.
- No network calls and no bundled emoji sets. Every image comes from a folder in your own vault.
Setup
Enable the plugin.
Drop image files into the
emojisfolder in your vault root (created automatically the first time the plugin loads). The filename becomes the shortcode:emojis/peepoHappy.png→:peepoHappy:emojis/catJam.gif→:catJam:
Supported formats:
png,gif,jpg,jpeg,webp,svg,avif.Start typing
:anywhere in a note.
Shortcode matching is case-sensitive, so :cat: and :Cat: can be two different emoji. The autocomplete search is case-insensitive though, so you can just type in lowercase and still find them.
Settings
- Emoji folder – where your images live (default
emojis) - Image height – CSS height for rendered emoji (default
28px) - Show typeahead suggestions – toggle the autocomplete popup on or off
- Render while editing – Always, Live Preview only, or Never (Reading mode always renders regardless)
- Refresh now – force a rescan of the emoji folder
Changes in the emoji folder get picked up automatically. There's also a "Refresh custom emojis" command if you want to force it.
What this isn't
No icon-pack browser, no bundled emoji sets, no remote/URL-based images, no picker UI beyond the inline autocomplete. For a fuller icon management system, Icon Shortcodes is probably what you want instead. This one's meant to stay small.
It also isn't built to play nice with other plugins that use the same :shortcode: syntax (Icon Shortcodes, Emoji Shortcodes, and similar). Running more than one of those at once means they're competing over the same colon-wrapped text. Stick to one.
Development
Plain JavaScript, no build step. main.js is exactly what Obsidian loads, using require() for the Obsidian API and CodeMirror 6 (@codemirror/view, @codemirror/state, @codemirror/language), both of which Obsidian exposes at runtime without needing a bundler.
License
MIT — see LICENSE.