Open-source web rich text editor (WYSIWYG) for formatting text, images, and content in the browser. Works with vanilla JavaScript, Vue, and React.
Mindmap
mindmap
root((repo))
What it does
WYSIWYG editor
Format text
Insert images
Compose content
Tech stack
TypeScript
JavaScript
Vue support
React support
Use cases
Blog platforms
Content management
Email composers
Document editors
Key features
Browser-based
Open source
Live demo
Full docs
Things people build with this
USE CASE 1
Build a blog platform where users can write and format posts with images directly in the browser.
USE CASE 2
Add a rich text editor to a content management system so editors can compose articles without HTML knowledge.
USE CASE 3
Create an email composer that lets users format messages and insert images before sending.
USE CASE 4
Embed a document editor in a web app for collaborative note-taking or content creation.
Tech stack
TypeScriptJavaScriptVueReact
Getting it running
Difficulty · easyTime to first run · 5min
Use freely for any purpose including commercial, as long as you keep the copyright notice.
In plain English
wangEditor is an open source web-based rich text editor written in TypeScript. A rich text editor (often called WYSIWYG, "what you see is what you get") lets users format text, add images, and compose content in a browser, similar to a word processor. It works with plain JavaScript as well as with Vue and React projects. Documentation and a live demo are available on the project's website.
Copy-paste prompts
Prompt 1
Show me how to integrate wangEditor into a React component so users can write and format blog posts.
Prompt 2
How do I customize the toolbar in wangEditor to only show bold, italic, and image upload buttons?
Prompt 3
I want to get the HTML content from wangEditor after a user finishes editing, what's the API for that?
Prompt 4
Can I use wangEditor in a Vue 3 project? Show me a basic setup example.
Prompt 5
How do I add custom styling or CSS to match my app's design when using wangEditor?