Frameworks
Where each framework binding stands and how the shared core works
Emoteer is built so the same data, search and state live in a framework-agnostic core. Each framework binding is a thin layer on top.
Current status
| Binding | Package | Status |
|---|---|---|
| React | @emoteer/react | stable |
| Svelte | @emoteer/svelte | stable |
| Vue | @emoteer/vue | soon |
The shared core
@emoteer/core exports everything framework bindings reuse:
- Emoji dataset — full Unicode catalog, category metadata, skin-tone variants
- Shortcode index — fast prefix match and keyword search
- State machines — picker navigation, autocomplete triggers, input conversion
You can use it directly in framework-agnostic environments (workers, server-side rendering, CLI tools):
import { createPickerMachine, searchEmotes } from '@emoteer/core';
const results = searchEmotes({ query: 'grin', limit: 10 });React
Currently the flagship binding. Everything you see in Components is available today.
Svelte
@emoteer/svelte ships the same component set as React, built for Svelte 5 (runes). The surface is identical — compound primitives (<EmoteList.Root>, <ReactionButton.Popover>, …), typed props, and the same data-part styled defaults. See the per-recipe Svelte code in Recipes via the React/Svelte toggle.
Vue
The Vue binding will expose the same primitives as composable tags and template slots. The internal state machines are already framework-agnostic so the work is mostly DX and template syntax.
Requesting a framework
Open an issue with the framework name and a short description of the use case. Bindings with real consumers get prioritized.