--- title: "Mention Editor Pro — Framer component · Best of Framer" description: "$5.00 · Framer component · by Md. Omor Rahman Shipon · Forms. A production-ready rich text editor" canonical: "https://framer.elliotli.dev/component/mention-editor-pro" --- [Home](/)/[Components](/components)/[Forms](/components/category/forms)/Mention Editor Pro # Mention Editor Pro A production-ready rich text editor [View on Framer](https://framer.com/marketplace/components/mention-editor-pro/?via=elliot-li) ![Mention Editor Pro preview image 1](https://framer.elliotli.dev/og/component/mention-editor-pro/114e3773525f5ca5/1600x1200.jpg) ## Summary A production-ready rich text editor ## Description **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! 🚀 ## Rank history [How rankings work →](/terms#rankings) - All · #8010 ## Details - **Author**: Md. Omor Rahman Shipon - **Price**: $5.00 - **Published**: 2026-06-12 - **Updated**: 2026-06-10 - **Added**: 2026-06-07 - **Categories**: Forms ## More across types - [Wallble: Guest Book & Wall of Love](/plugin/wallble-guest-book-wall-of-love) — Wallble · Free — Guest book & Wall of Love ## More like this - [Stay Booking Pro](/component/stay-booking-pro) — Design Foundry · $10 — Stay Planner with Dynamic Pricing - [Postcode Checker](/component/postcode-checker) — Sean Weekes · $15 — Do we cover your area? (UK - [Property Calculators](/component/property-calculators) — Sean Weekes · $12 — UK Stamp Duty, mortgage and yield - [UTM Lead Capture](/component/utm-lead-capture) — Sean Weekes · $9 — See where every lead came from