Source

Text in.
Emotes out.

Drop expressive 7TV emotes into any React text flow. Typed, composable, animated, and genuinely safe across client and server environments.

Try the live demo
npm install react-7tv
LIVERainTime
RainTime
LIVEPETPET
PETPET
LIVEClap2
Clap2
STILLpeepoHappy
peepoHappy
LIVEPartyParrot
PartyParrot
10 emotes
:PETPET:
[emote: RainTime]
React 19✳Zero runtime dependencies✳SSR safe✳Animated + static✳ESM + CommonJS✳React 19✳

Live playground

One component.
Your syntax.

Type a message, search aliases, click to insert, switch grammars, and stop motion. Every match stays a normal React node.

Live text lab
React output

RainTime Shipping on Friday? PETPET Absolutely.

animated WebP · responsive srcSet
Find + insert an emote
✓ RainTime✓ PETPET
10 of 10 aliases · click to insert

Small surface, deep control

From zero to expressive in three moves.

01

Choose your source

Load a remote emote set, fetch on the server, or pass controlled data.

<SevenTVProvider emoteSetId="global">
02

Choose your grammar

Use plain aliases, delimiters, case folding, or bring a tokenizer.

syntax={delimitedSyntax(":")}
03

Wrap the text

Nested inline content is preserved while matching strings become images.

<SevenTVText>{message}</SevenTVText>

Bring your framework

Same API.
Everywhere React lives.

Explore all examples →
ViteClient SPA↗Next.jsServer + Client↗React RouterLoader SSR↗AstroReact island↗

Ready when chat is

Give every message
a little more life.

npm install react-7tvRead the API overview →