Rich Text Mention Editor for Framer — @mention, #tags & Emoji Picker
Build Slack-style messaging inputs in minutes. Rich Text Mention Editor brings @mention autocomplete, #tag chips, and a full emoji picker to your Framer projects — no external dependencies, no configuration headaches.
What makes it different
Most Framer input components are basic. This one works like the editors your users already love — Slack, Linear, Notion. Type @ and a smart dropdown instantly filters your team list by name or role. Type # and tag chips appear inline. Open the emoji picker, search by keyword, or just type :) and watch it convert automatically.
Core features
@mention autocomplete with fuzzy search — filters people by name and role in real time. Mentions render as inline avatar chips with initials and custom colors.
#tag autocomplete — type # to trigger a filterable tag dropdown. Tags insert as styled inline chips. Fully customizable via props.
Emoji picker — 5 categories (Smileys, Nature, Food, Objects, Gestures) with live keyword search. Hover any emoji to preview its name.
Emoji shortcut conversion — :) becomes 😊, <3 becomes ❤️, B) becomes 😎 — 10 shortcuts built in, converts automatically as you type.
Formatting toolbar — Bold, Italic, Underline, Strikethrough, Bullet list, Numbered list. Everything a modern input needs.
Send callback — onSend returns full HTML, plain text, an array of mentioned people, and an array of tags. Plug it straight into your backend.
Built for production
Zero external dependencies — runs entirely on browser contenteditable and Selection API. No npm installs, no bundle bloat.
Full dark mode support — every color uses CSS variables. Looks perfect on any background, in any theme.
Fully typed props — clean TypeScript interface, all options exposed in Framer's property panel for no-code customization.
Keyboard accessible — full arrow-key navigation in dropdowns, Enter or Tab to select, Escape to dismiss.
Perfect for
Team messaging tools and internal communication apps, project management boards with @assign and task comments, customer support platforms and agent reply editors, social products with reactions and mentions, AI chat interfaces with variable and prompt insertion, CRM note editors with @client tagging, learning platforms with discussion boards, and any SaaS product where users communicate in context.
What's included
1 Framer code component — React and TypeScript, fully self-contained. 5 sample team members pre-loaded so it looks great on canvas instantly. 10 default tags including bug, feature, urgent, design, review, blocked, done, wip, api, and mobile. 10 emoji shortcut mappings pre-configured. Complete prop documentation with types and defaults.
Thank you for your purchase!
You just leveled up your Framer toolkit. If you have any questions, run into issues, or want to share what you built — I'd love to hear from you. Happy building! 🚀
Rich Text Mention Editor for Framer — @mention, #tags & Emoji Picker
Build Slack-style messaging inputs in minutes. Rich Text Mention Editor brings @mention autocomplete, #tag chips, and a full emoji picker to your Framer projects — no external dependencies, no configuration headaches.
What makes it different
Most Framer input components are basic. This one works like the editors your users already love — Slack, Linear, Notion. Type @ and a smart dropdown instantly filters your team list by name or role. Type # and tag chips appear inline. Open the emoji picker, search by keyword, or just type :) and watch it convert automatically.
Core features
@mention autocomplete with fuzzy search — filters people by name and role in real time. Mentions render as inline avatar chips with initials and custom colors.
#tag autocomplete — type # to trigger a filterable tag dropdown. Tags insert as styled inline chips. Fully customizable via props.
Emoji picker — 5 categories (Smileys, Nature, Food, Objects, Gestures) with live keyword search. Hover any emoji to preview its name.
Emoji shortcut conversion — :) becomes 😊, <3 becomes ❤️, B) becomes 😎 — 10 shortcuts built in, converts automatically as you type.
Formatting toolbar — Bold, Italic, Underline, Strikethrough, Bullet list, Numbered list. Everything a modern input needs.
Send callback — onSend returns full HTML, plain text, an array of mentioned people, and an array of tags. Plug it straight into your backend.
Built for production
Zero external dependencies — runs entirely on browser contenteditable and Selection API. No npm installs, no bundle bloat.
Full dark mode support — every color uses CSS variables. Looks perfect on any background, in any theme.
Fully typed props — clean TypeScript interface, all options exposed in Framer's property panel for no-code customization.
Keyboard accessible — full arrow-key navigation in dropdowns, Enter or Tab to select, Escape to dismiss.
Perfect for
Team messaging tools and internal communication apps, project management boards with @assign and task comments, customer support platforms and agent reply editors, social products with reactions and mentions, AI chat interfaces with variable and prompt insertion, CRM note editors with @client tagging, learning platforms with discussion boards, and any SaaS product where users communicate in context.
What's included
1 Framer code component — React and TypeScript, fully self-contained. 5 sample team members pre-loaded so it looks great on canvas instantly. 10 default tags including bug, feature, urgent, design, review, blocked, done, wip, api, and mobile. 10 emoji shortcut mappings pre-configured. Complete prop documentation with types and defaults.
Thank you for your purchase!
You just leveled up your Framer toolkit. If you have any questions, run into issues, or want to share what you built — I'd love to hear from you. Happy building! 🚀
