Auric Artisan Emoji

Find the right emoji. Put it straight into your code.

A local emoji workspace for Visual Studio Code: search 1,914 emoji, insert from a card or code hover, compose sequences, and choose the output your file needs.

Version 0.2.0 · VS Code 1.85+ · English / हिन्दी · No account required

Auric Artisan · Source · Report an issue

Watch the product preview · View the animated preview · Public media kit

Get started · Insert from code · Explore the studio · Output formats · Settings · Privacy

Get started

Install Auric Artisan Emoji. For a local .vsix, use Extensions → ⋯ → Install from VSIX….
Open a text file and place your cursor where the emoji should go.
Press Ctrl+Alt+J on Windows/Linux or Cmd+Alt+J on macOS for Quick Insert Emoji. Search, select, and insert.

For the full workspace, select Auric Emoji in the Activity Bar or press Ctrl+Alt+E / Cmd+Alt+E to open Emoji Studio beside your code.

What's new in 0.2.0

A matching Studio and sidebar. Theme Studio-inspired surfaces, compact branding, sticky pill navigation, and light, dark and high-contrast support.
The library comes first. Search immediately; expand Workspace overview for active-file details, quick tools and library statistics.
Actions on hover or focus. Insert, copy, or open a card's format inspector. These actions stay visible in the sidebar and on touch devices.
Insertion from code hovers. Replace a complete shortcode with an emoji, JavaScript escape or HTML entity without opening the Studio.
English and Hindi. Switch the Studio language without losing your search, filters or sequence.

See the changelog for the complete release notes.

Insert from code

Hover, preview, insert

Write a complete shortcode such as :rocket: or :waving_hand:. Hover over it and choose Insert emoji, JavaScript, or HTML.

// Before: hover over :rocket: inside the string
const launch = ":rocket:";

// After choosing Insert emoji
const launch = "🚀";

Only the hovered shortcode is replaced, in one undo step. The action uses the skin tone shown in the preview and does not add quotes, change other cursors, or rewrite surrounding code. If the document changes before you click, hover again for a fresh action.

This feature requires VS Code editor hovers and auricEmoji.hover.enabled to be enabled. Unlike Studio insertion, a failed hover edit does not fall back to the clipboard.

Shortcode completion

Type : to trigger emoji suggestions, then narrow them by name or shortcode:

:spa      → ✨ :sparkles:
:rock     → 🚀 :rocket:
:thinking → 🤔 :thinking_face:

Accept a suggestion to insert its emoji. Disable these suggestions with auricEmoji.completions.enabled.

Replace several shortcodes

Select text and run Auric Artisan Emoji: Replace Emoji Shortcodes in Selection. With no selection, the command processes the current line. Unknown tokens are left unchanged.

Ready to ship :rocket: :sparkles:
Ready to ship 🚀 ✨

Explore the Studio

Search your way. Find names, keywords, exact emoji, shortcodes, code points and common Hindi words. Try developer, thanks, U+1F680, दिल, रॉकेट or धन्यवाद. Browse nine categories, or filter to curated, tone-capable or newer emoji.

Keep useful emoji close. Library, For you, Favorites and Recent views share local state. Star a card, recall your last emoji, or use the dedicated recent/favorite Quick Picks.

Inspect before inserting. Open a card's … action or focus its emoji and press I. The inspector shows a larger preview, shortcode, code points, emoji version, skin tones, keywords, related emoji and every output format.

Work beside your file. Studio insertion targets the active or last active editor and supports multiple selections in one undo step. The explicit Insert action inserts even when the main card-click preference is Copy. If no editor is available, Studio insertion copies the result instead. Expand Workspace overview to inspect the target file and cursor information.

Choose your layout. The full Studio offers grid/list views and compact, comfortable or showcase densities. The narrow sidebar uses a compact grid with visible actions. Keyboard focus, native scrolling, forced colors and reduced motion are supported.

Skin tones

Choose the standard Yellow presentation or one of five skin tones. 330 catalog entries support tone changes. The choice flows through card previews, insertion, Quick Pick, completions and shortcode replacement. The inspector lets you preview a tone and make it your default.

Favorites and recents store emoji IDs, so changing tone does not create duplicate history entries. Glyph appearance depends on the emoji fonts available on your system.

Compose a sequence

Focus an emoji and press Space, Shift-click its preview, or enable Compose in the full Studio. Collect up to 50 emoji, including repeats, then insert or copy them together. Backspace removes the last item. The sequence is restored when the webview reloads.

Insertion uses emoji characters; copying uses your configured output format. Shortcodes, Unicode labels and CSS escapes are space-separated. Emoji, HTML entities and JavaScript escapes are joined directly.

Six output formats

The inspector previews the exact text before you copy or insert it. Choose Make default there, or change auricEmoji.copyFormat in Settings, to set the normal Copy action.

Format	Rocket example	Intended use
Emoji	🚀	Text and string contents
Shortcode	`:rocket:`	Systems that understand emoji shortcodes
Unicode	`U+1F680`	Code-point reference and documentation
HTML	`🚀`	HTML source
JavaScript	`\u{1F680}`	JavaScript/TypeScript string contents
CSS	`\1F680`	CSS string contents, such as `content`

These are text representations, not complete code snippets. Add the surrounding syntax your language requires; JavaScript code-point escapes, for example, are not JSON escapes.

English and हिन्दी

Use the Studio's Auto / English / हिन्दी switch, the Choose Interface Language… command, or auricEmoji.interfaceLanguage.

auto follows VS Code's display language: Hindi locales use Hindi; other locales use English.
en and hi choose the Studio language explicitly.
Native Command Palette, Settings and host notifications follow the VS Code display language.
Emoji names, shortcodes and code points retain their catalog spelling. Hindi search terms help you find them.

Keyboard and commands

Studio: Ctrl+Alt+E / Cmd+Alt+E. Quick Insert: Ctrl+Alt+J / Cmd+Alt+J.

Keyboard controls inside Emoji Studio

Key	Action
`/` or `Ctrl/Cmd+K`	Focus search
Arrow keys on an emoji preview	Navigate the grid
`Enter` on a preview	Run the configured click action
`Shift+Enter` on a preview	Copy
`Space` on a preview	Add to the sequence
`Backspace` outside text inputs	Remove the last sequence item
`F` on a preview	Toggle favorite
`I` on a preview	Open or close the inspector
`Esc`	Dismiss the open panel or clear the sequence
`?`	Open the keyboard map

Tab to a card's action buttons to insert, copy or inspect directly. Text inputs retain normal editing behavior.

All Command Palette actions

Search Auric Artisan Emoji in the Command Palette:

Open Emoji Studio
Quick Insert Emoji
Insert Recent Emoji
Insert Favorite Emoji
Copy Last Emoji Again
Replace Emoji Shortcodes in Selection
Clear Emoji History
Focus Emoji Search
Choose Interface Language…

Clearing history removes recents and last-emoji recall; favorites are retained.

Settings

Search @ext:auric-artisan.auric-artisan-emoji in VS Code Settings. These are the defaults:

{
  "auricEmoji.interfaceLanguage": "auto", // auto | en | hi
  "auricEmoji.clickAction": "insert", // insert | copy | insertAndCopy
  "auricEmoji.insertSpacing": "auto", // none | space | auto
  "auricEmoji.copyFormat": "emoji", // emoji | shortcode | unicode | html | javascript | css
  "auricEmoji.preferredSkinTone": "none", // none | medium | light | mediumLight | mediumDark | dark
  "auricEmoji.gridDensity": "comfortable", // compact | comfortable | showcase
  "auricEmoji.showNames": true,
  "auricEmoji.closeStudioAfterInsert": false,
  "auricEmoji.maxRecents": 48,
  "auricEmoji.hover.enabled": true,
  "auricEmoji.completions.enabled": true,
  "auricEmoji.statusBar.enabled": true
}

For exact string contents with no extra whitespace, set insertSpacing to none. The default auto separates adjacent words; space appends a space. Editor-hover replacement leaves surrounding whitespace unchanged.

Troubleshooting

No hover action? Use a complete catalog shortcode with both colons, such as :rocket:. Check both VS Code's editor-hover setting and auricEmoji.hover.enabled.
A hover no longer inserts? Keep the target editor visible and writable, then hover again. An action becomes stale when the document changes and cannot be reused after insertion.
Insert copied instead? Open a writable text editor and position its cursor before returning to the Studio. Check your card-click preference and the target in Workspace overview.
Missing or different-looking glyphs? Rendering uses your system emoji fonts; newer emoji may not be supported by older fonts.
Remote or virtual file? Editing depends on the file-system provider and the document being writable. Not every provider supports every editor integration.

Privacy

The emoji catalog and Studio assets are bundled. The extension has no telemetry, account requirement or runtime package dependencies, and does not execute workspace code or fetch remote content for its interface. Website links open externally only when selected.

Favorites, recents and preferences use VS Code state/settings; the webview also remembers interface state and sequences. Document contents are not persisted as history. Editor-hover actions temporarily retain the hovered shortcode and its document/range in a bounded in-memory cache to validate an explicit edit.

The webview uses a restrictive content security policy. Hover links allow only the extension's insertion command, with single-use tickets and document/version checks.

Development

Use Node.js 24+ for the development toolchain used here. From this extension directory:

npm install
npm run vscode:prepublish
npm run vsix

Prepublish builds the catalog and artwork, validates assets and metadata, and runs the tests. vsix runs prepublish again and creates auric-artisan-emoji-0.2.0.vsix.

For a browser preview, run node tests/serve.js and open the printed local address. Add ?mode=sidebar or ?lang=hi. This uses the real webview markup with a simulated editor host; it does not edit real files. node tests/browser-check.cjs additionally requires @playwright/test and its Chromium browser in this or a parent workspace.

Before publishing, install the VSIX in a clean VS Code profile and test real editor insertion and hovers. Packaging does not publish or install the extension.

Support and license

Security policy · Third-party attribution · Publishing checklist