Why should I choose Smart UI React components?

Smart UI React components offer over 70 feature-rich components, including DataGrid, Gantt Chart, Scheduler, and Rich-Text Editor. They include Material UI & Bootstrap themes with light/dark modes, a Theme Builder for customization, and are available via npmjs.com for streamlined development. The components are touch-friendly and adaptive for desktops, phones, and tablets.

How do I get started with the Smart UI Editor?

Follow the Getting Started guide at https://www.htmlelements.com/docs/react/ and the Editor Setup documentation at https://www.htmlelements.com/docs/editor/.

Where can I find the Smart UI React components demos?

Explore tutorials and demos at https://www.htmlelements.com/react/.

react

Name: Smart UI for React
Brand: Smart UI
Rating: 4.9 (115 reviews)

React Editor | Smart UI for React - Advanced WYSIWYG Editor

Advanced WYSIWYG HTML & Markdown Editor with AI Prompt Support

Powerful WYSIWYG HTML and Markdown editing with AI prompt integration.
Create, edit, and format text, paragraphs, lists, and HTML elements effortlessly.
Intuitive configuration and robust API for seamless integration.
Built-in file and image browser for enhanced content management.
Single-line ribbon mode for a streamlined user experience.
Export to multiple formats and print functionality.
Cross-browser compatibility with modern browsers.
Multiple themes, including Material UI and Bootstrap, with customization options.
Flexible paste options: Plain text, Keep format, or Clean format.
AI-powered content suggestions and formatting assistance.

Start Free Trial View Demos License

React 19.1 is fully supported.

Overview

Smart UI React Editor is a feature-rich WYSIWYG HTML and Markdown text editor designed for modern web applications. Perfect for email clients, blog editors, or document management systems, it offers an intuitive interface with AI-powered content suggestions, inspired by Microsoft® Word and Google’s email client. Explore all features here. Get started with the React Editor Docs.

Toolbar

The Smart UI React Editor features a customizable toolbar with actions to insert, delete, or style content based on text selection, enhanced with AI-driven formatting suggestions for improved productivity.

Context Menu

The built-in context menu activates on right-click, offering customizable options based on the target element. Learn more here.

Mobile Optimized

Fully responsive, the React Editor delivers a seamless experience across desktops, tablets, and mobile devices, with AI-enhanced usability.

Security

The 'sanitized' property ensures protection against XSS vulnerabilities by preventing scripts and malicious content within the editor.

Paste Options

Prompt: Displays a dialog for selecting paste format.
Plain Text: Pastes content without formatting.
Keep Format: Retains original formatting.
Clean Format: Removes all formatting for clean text.

Find & Replace

A dialog-based Find and Replace tool allows users to search and replace text efficiently, with AI-driven match suggestions displayed in a list box.

Search Bar

A dedicated search bar enables quick text searches within the editor’s content, enhanced by AI for faster results.

Markdown Editor

Switch to Markdown mode to write and preview Markdown content, with AI-assisted formatting and export options for MD files via the exportData method.

Keyboard Shortcuts

Enhance accessibility with robust keyboard navigation. Supported shortcuts include:

Insert Link: Ctrl + K
Insert Image: Ctrl + Shift + I
Insert Table: Ctrl + Shift + E
Undo: Ctrl + Z
Redo: Ctrl + Y
Copy: Ctrl + C
Cut: Ctrl + X
Paste: Ctrl + V
Bold: Ctrl + B
Italic: Ctrl + I
Underline: Ctrl + U
Strikethrough: Ctrl + Shift + S
Uppercase: Ctrl + Shift + U
Lowercase: Ctrl + Shift + L
Superscript: Ctrl + Shift + =
Subscript: Ctrl + =
Indent: Ctrl + ]
Outdent: Ctrl + [
Source Code/Preview Mode: Ctrl + Shift + H
Full Screen Mode: Ctrl + Shift + F
Justify Center: Ctrl + E
Justify Full: Ctrl + J
Justify Left: Ctrl + L
Justify Right: Ctrl + R
Clear Format: Ctrl + Shift + R
Ordered List: Ctrl + Shift + O
Unordered List: Ctrl + Alt + O

Dialogs

Built-in dialogs for inserting and editing hyperlinks, tables, images, and videos provide a seamless content management experience, with AI suggestions for link and media insertion.

Single-line Ribbon

The simplified single-line ribbon mode offers a compact toolbar for efficient web app integration, optimized with AI-driven layout suggestions.

Tables

Comprehensive table editing tools include:

Table Dialog for easy creation
Add rows above/below
Add columns left/right
Delete rows/columns
Table header and alternate row styling
Table resizing and alignment
Dashed borders and colored headers

More Features

Video Support

Embed videos from local storage or YouTube, alongside images, tables, and hyperlinks for rich content creation, with AI-assisted media embedding.

Iframe Mode

Isolate the editor’s content in an iframe to prevent style and script leaks, ensuring clean and secure content management.

Themes

Choose from Material UI, Bootstrap, and custom themes with light and dark modes for a tailored experience, optimized with AI-driven theme suggestions.

Globalization

Format numbers, dates, and currencies to suit various locales, enhancing global usability with AI-driven localization.

Localization

Customize every string using 'locale' and 'messages' properties for a localized user experience, enhanced by AI translation suggestions.

Right-to-Left Support

Optimized rendering for RTL languages, improving UX for Arabic, Hebrew, and more, with AI-optimized layout adjustments.

Build Modern React Apps with Smart UI

Empower your applications with enterprise-grade features like accessibility, internationalization, theming, RTL support, localization, and AI-powered content creation.

Learn More

Outstanding Performance

Optimized for speed and modularity, the React Editor delivers exceptional performance across devices and browsers while maintaining a lightweight footprint, with AI-driven optimizations.

More About This

Cross-Device & Browser Compatibility

Responsive design with Material UI and Bootstrap ensures a consistent, high-quality experience across all devices and modern browsers, enhanced by AI-driven adaptability.

More About This

Editor for Other Frameworks

The Smart UI Editor is available for multiple frameworks, ensuring flexibility for your development needs.

Transform Your Apps with Smart UI Components

Discover how our components power modern, visually appealing applications with AI-enhanced features.

Admin Dashboard Template with a sleek contrast between navigation and content areas. Features dashboards, forms, client lists, and user profiles.

View Demo
Bootstrap-based Admin Dashboard Template showcasing dashboards, forms, client lists, and user profiles.

View Demo
Project Tracker Template to manage workflows, track tasks, and monitor project status for teams and managers.

View Demo
Doctors Dashboard Template integrating Editor, ListBox, and Calendar for a cohesive healthcare application.

View Demo
Modern Admin Dashboard Template with dashboards, forms, client lists, and user profiles for a sleek user experience.

View Demo

What Our Customers Say

Hear from developers and businesses using Smart UI React components.

National Instruments partnered with HTMLElements to integrate Smart UI into LabVIEW NXG and SystemLink, delivering high-performance controls for engineering applications. The flexibility, adherence to W3C standards, and long-term sustainability make HTMLElements a trusted partner. Learn more.

Mark Black

Software Product Owner

National Instruments
With over 30 years as a developer, I’m impressed by jQWidgets’ thorough pre-sales support, elegant components, and consistent API. The active support forum and regular updates make it a standout choice for professional development.

Jamie Dalmer

Software Developer

Frequently Asked Questions

Why Choose Smart UI React Components?

Over 70 React components, including DataGrid, Gantt Chart, Scheduler, and Rich-Text Editor.
Material UI & Bootstrap themes with light/dark modes and a Theme Builder for customization.
Available via npmjs.com for streamlined development.
Touch-friendly and adaptive for desktops, phones, and tablets.
AI-powered features for content suggestions and formatting assistance.

How Do I Start with the Smart UI Editor?

Follow the Getting Started guide and the Editor Setup documentation.

Can I Try the Smart UI React Editor?

Where Are the Smart UI React Demos?

Explore tutorials and demos here.

Is the Smart UI React Editor Suitable for Rich Text Editing?

Yes, it’s a feature-complete WYSIWYG editor supporting both HTML and Markdown content editing with AI-powered content suggestions.

What Is the Price of the Smart UI React Editor?

A single developer license costs $399.00 USD, including all Smart UI and jQWidgets components, one year of support, and updates. Discounts are available for volume licensing, academic pricing, and upgrades. See the license page for details.

Can I Use Smart UI React Components for Free?

This is a commercial product requiring a paid license, but a free community license with select components is available. Learn more here.

Does the Smart UI React Editor Support AI Prompt Integration?

Yes, the editor includes AI-powered content suggestions and formatting assistance, enhancing productivity and content creation.

React Editor: Advanced WYSIWYG HTML & Markdown Editor with AI

React Editor