Discord-style Custom Emojis

approved

by akskokki

Type :shortcode: to render your own custom emoji image anywhere, just like chatting in Discord/Slack. The underlying note stays as plain text. - This plugin has not been manually reviewed by Obsidian staff.

↓ 92 downloadsUpdated 21d agoMIT
Install in ObsidianView on GitHub

Discord-style Custom Emojis

Demo

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.

Obsidian Downloads

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 :peha finds peepoHappy. 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

  1. Enable the plugin.

  2. Drop image files into the emojis folder 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.

  3. 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.

For plugin developers

Search results and similarity scores are powered by semantic analysis of your plugin's README. If your plugin isn't appearing for searches you'd expect, try updating your README to clearly describe your plugin's purpose, features, and use cases.