RoosterJS: Fluent UI Rich-Text Editor

Key insights

• Ejaz Hussain demoed a custom rich-text editor in a Viva Connections and SharePoint Framework community call on 15 May 2025.
  The build replaces TinyMCE with a solution using RoosterJS, Fluent UI, and an SPFx web part to match Microsoft design and platform expectations.
  
• The editor uses RoosterJS as the core engine to run inside a single HTML div, giving fast editing, robust content sanitization, and plugin support.
  This framework-independent approach simplifies embedding rich text across apps and components.
  
• The demo shows a working SPFx web part with a polished toolbar and a customizable ribbon for formatting, plus direct source editing and embedded media handling.
  These features let users insert images, video, and inspect or edit raw HTML when needed.
  
• The UI follows Fluent UI patterns for a consistent, accessible experience, including support for dark mode and high-contrast themes.
  The design improves usability and aligns the editor with Outlook, Word, and other Microsoft apps.
  
• Developers can tune behavior and look via centralized configuration files and per-instance options, making the editor extensible for business needs.
  The solution supports adding custom commands, ribbon buttons, and integrations such as AI-assisted writing features like Copilot when available.
  
• This editor is a modern replacement for legacy controls and aligns with model-driven apps and Power Platform trends by being lightweight, secure, and forward-compatible.
  Teams planning migration get better performance, accessibility, and customization compared with the deprecated classic editor.
  

Overview of the demo

In a recent community call presentation, Microsoft showcased a new approach to in-app editing that centers on a custom rich-text editor built with Fluent UI and RoosterJS. The video, presented by Ejaz Hussain, walks through a working SharePoint Framework web part that aims to replace legacy editors such as TinyMCE in client projects. Consequently, the demo focuses on practical integration details, user experience, and developer controls that matter for both content authors and engineering teams. Overall, the session mixes hands-on examples with explanations of design choices and extensibility points.

Core technologies and what they bring

The editor relies on RoosterJS for editing and sanitization, while Fluent UI provides the look and feel consistent with Microsoft products. Because RoosterJS is framework-independent and runs inside a single HTML element, developers gain fine-grained control over content operations and cleaning rules. Meanwhile, the Fluent UI layer helps preserve a familiar and accessible interface that aligns with Outlook, Word, and other Microsoft experiences.

Moreover, the demo highlights modern UX considerations such as dark mode and high contrast support, which improve accessibility and consistency across platforms. The session also mentions an integrated Copilot-style assistance, aimed at improving clarity and grammar directly inside the editor. These combined technologies aim to deliver a lightweight yet powerful editing surface that balances performance and polish.

Demo highlights and customization

Ejaz demonstrates a working SharePoint Framework web part with a customizable ribbon, embedded media support, and a source view for HTML editing. He shows how developers can tune toolbar options and behavior through configuration files so that the editor adapts to different business needs without changing core code. As a result, organizations can standardize global settings while still allowing per-instance tweaks where necessary.

The presentation makes clear that the integration is practical: the web part runs as a typical SPFx component and exposes configuration hooks for developers. In addition, the demo addresses common content scenarios such as paste handling, image embedding, and HTML sanitization, which are often pain points when replacing legacy editors. Thus, the examples provide a useful starting point for teams planning migration or custom development.

Trade-offs and practical challenges

Replacing an established editor like TinyMCE raises trade-offs that teams must weigh carefully. On one hand, the RoosterJS-based editor offers stronger sanitization and a modern design system, which can reduce security risks and improve accessibility; on the other hand, migration requires reworking custom plugins, templates, and workflows that depend on the old editor. Therefore, planning and testing are essential to minimize disruption for content creators.

Furthermore, adding AI-driven features like integrated Copilot assistance brings benefits but also introduces complexity in privacy, performance, and moderation. Teams must decide whether to enable such features globally, restrict them to certain users, or implement local controls to comply with policies. In the same vein, the desire for deep customization must be balanced against maintenance overhead, as more bespoke extensions increase long-term support costs.

Implications for developers and organizations

The demonstration underscores that a framework-independent editing engine combined with a consistent design language can simplify long-term maintenance. Developers gain the ability to craft secure, lightweight editors that match corporate UI standards, while organizations benefit from consistent authoring experiences across applications. However, this advantage only materializes if teams invest in configuration management and developer guidelines from the start.

Additionally, the demo suggests a migration path for teams looking to phase out older editors: start with parity for core features, then progressively enable advanced capabilities such as media embedding and AI assistance. By doing so, organizations can manage risk while incrementally improving author productivity and content quality. Ultimately, success depends on clear testing, a rollback plan, and close collaboration with content stakeholders.

Conclusion and next steps

The video presents a convincing case for modernizing in-app editing by combining RoosterJS and Fluent UI, and it demonstrates practical ways to implement a customizable editor in a SharePoint Framework web part. While the approach offers clear benefits in terms of performance, sanitization, and design consistency, teams should carefully consider migration effort, plugin compatibility, and privacy implications related to AI features. Consequently, a staged rollout and robust testing remain essential for a smooth transition.

For organizations exploring this path, the demo provides actionable examples and configuration patterns to reproduce and extend. In short, the session serves as a useful reference for both technical leads and content teams planning to modernize their editing stack while keeping user experience and governance at the forefront.

Keywords

rich text editor RoosterJS, Fluent UI rich text editor, RoosterJS WYSIWYG editor, Fluent UI editor for React, customizable rich text editor RoosterJS, accessible rich text editor Fluent UI, open-source RoosterJS editor, RoosterJS integration with Fluent UI