Factsheet
Developer Tiny Technologies Inc.
Initial release 1.0 / 11 March 2004; 21 years ago (2004-03-11)
Stable release 8.2
/ October 23, 2025; 51 days ago (2025-10-23)
/ October 23, 2025; 51 days ago (2025-10-23)
Developer Tiny Technologies Inc.
Initial release 1.0 / 11 March 2004; 21 years ago (2004-03-11)
Stable release 8.2
/ October 23, 2025; 51 days ago (2025-10-23)
/ October 23, 2025; 51 days ago (2025-10-23)
Reddit
reddit.com › r/webdev › looking for a very basic wysiwyg editor in js to include to a website
r/webdev on Reddit: Looking for a very basic WYSIWYG editor in JS to include to a website
June 14, 2024 -
Hi. I do a web based app where people can write simple messages to others. It basically supports html but the editor is just a textarea for now. Now I want to give it some very basic formatting options.
I know TinyMCE, CKEditor, Editor.js and some others, but they are all so full blown and big. I need a WYSIWYG editor with the following features:
Must have:
Working in all major Web Browsers.
Support Bold, Italic, Underline.
Enter key must end <p> paragraph, Shift+Enter must create <br> tag only.
Export HTML (or let me get HTML).
Small footprint.
Open Source (like MIT or Apache licence).
No other dependencies (like Vue, jQuery, React, Angular etc).
Not abandoned (eg ideally updated in the last 6 Months).
Nice to have but not mandatory:
Support bullet list and numbered list.
Support font selection (only one Normal and one Mono-Spaced needed).
Support text foreground color selection.
Can someone point me to such feature limited and small WYSIWYG editor please? I'm sure there is some out there, but maybe well hidden...
I found one close candidate on GitHub (https://github.com/taufik-nurrohman/rich-text-editor/), but it was not updated for 3 years now and does not support Enter key like described.
Quill
quilljs.com
Quill - Your powerful rich text editor
Quill is a free, open source WYSIWYG editor built for the modern web. Completely customize it for any need with its modular architecture and expressive API.
[AskJS] on a scale of 1-10, how hard is building a WYSIWYG editor from scratch?
8-10. There's a big reason we're all basically using the same 1-3 open source solutions, lol. TinyMCE probably being the most popular. In short it's an absolute pain in the ass. I built a small one for my activity feed and I should've just went with lexical (meta's editor, great for stuff like feed editors). The amount of time I wasted in the name of "oh, I just need it to be simple in vanilla js" really bit me hard. More on reddit.com
30
16
January 3, 2024javascript - How to make an HTML/JS WYSIWYG editor? - Stack Overflow
I've tried many different Google searches but I haven't been able to find a current tutorial (newer than 2006) on how to actually create a WYSIWYG editor. I realize there are many already, but I'm More on stackoverflow.com
javascript - How to build an own WYSIWYG editor (RTE) using Vanilla JS - Stack Overflow
I don't want to use Jquery. I want to solve this in vanilla JS. Please help me! Description: How to make selected text bold/italic/underline on clicking a button in JavaScript? Here is my HTML. ... More on stackoverflow.com
Choosing the best WYSIWYG editor: Slate vs Quill vs ProseMirror.
I'm getting into ProseMirror at the moment. Its document model is more advanced and flexible than Quill. The Quill author admitted this in some HN comments. Even today Quill cannot produce nested lists and fakes it with CSS.
So far ProseMirror is very deep and flexible, but low level and tedious. Atlassian built an utils library to help with this.
Since I'm working with Vue on my current project I haven't really spent much time at looking into Slate, but it seems very interesting and well done. I'm still evaluating ProseMirror, but I'd try Slate next if it doesn't work out for me.
More on reddit.com 1
7
April 4, 2017Where can I find the Syncfusion JavaScript Rich Text Editor demo?
You can find our JavaScript Rich Text Editor demo, which demonstrates how to render and configure the Rich Text Editor.
syncfusion.com
syncfusion.com › javascript-ui-controls › js-rich-text-editor
JavaScript Rich Text Editor | WYSIWYG HTML5 Editor | Syncfusion
How do I get started with the Syncfusion JavaScript Rich Text Editor?
A good place to start would be our comprehensive getting started documentation.
syncfusion.com
syncfusion.com › javascript-ui-controls › js-rich-text-editor
JavaScript Rich Text Editor | WYSIWYG HTML5 Editor | Syncfusion
Why should you choose Syncfusion JavaScript Rich Text Editor?
The Syncfusion JS Markdown Editor supports the following features: · Edit WYSIWYG HTML and Markdown content with a rich set of tools for modern web and mobile applications. · Easily incorporate the editor into blog editors, messages, HTML email composers, and discussion forum-like applications. · Make a floating toolbar or inline editor that allows you to select any editable element on the page and edit in place. · One of the best JavaScript Rich Text Editor in the market that offers feature-rich UI to interact with the software. · Simple configuration and API. · Supports all modern browsers.
syncfusion.com
syncfusion.com › javascript-ui-controls › js-rich-text-editor
JavaScript Rich Text Editor | WYSIWYG HTML5 Editor | Syncfusion
Videos
17:51
Create your own Notion like WYSIWYG editor with Editor.JS!! - YouTube
Create you own WYSIWYG Editor using EditorJS | React - YouTube
14:18
The Best Next-gen WYSIWYG HTML Editor (2024) - YouTube
20:27
Build your own Notion-like WYSIWYG Editor in React - YouTube
Tiny
tiny.cloud
The Most Trusted & Feature-rich WYSIWYG Rich Text Editor | TinyMCE
Install TinyMCE to add a fully-featured, sleek and intuitive rich text editor to your app – in just a few lines of code.
Editor.js
editorjs.io
Editor.js
Editor.js workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc. Each of them is an independent <sup data-tune="footnotes">1</sup> contenteditable element (or more complex structure) provided by Plugin and united by Editor's Core.", } , ... "It works more stable then in other WYSIWYG editors.
GitHub
github.com › JefMari › awesome-wysiwyg-editors
GitHub - JefMari/awesome-wysiwyg-editors: A curated list of awesome WYSIWYG Editors.
SCEditor - A lightweight WYSIWYG BBCode and XHTML editor. Scribe - Deprecated A rich text editor framework for the web platform, with patches for browser inconsistencies and sensible defaults. 😴 · Squire - An HTML5 rich text editor, which provides powerful cross-browser normalisation, whilst being supremely lightweight and flexible. SunEditor - Pure javascript based WYSIWYG html editor, with no dependencies.
Starred by 3.8K users
Forked by 242 users
Froala
froala.com › home
WYSIWYG HTML Editor | Rich Text Editor Online
April 4, 2025 - Froala's WYSIWYG Editor is a beautiful JavaScript web editor that's easy to integrate for developers and your users will fall in love with its clean design.
CKEditor
ckeditor.com
WYSIWYG HTML Editor with Collaborative Rich Text Editing
Native integrations with the most popular libraries will save you time, money and effort. CKEditor 5 is compatible with any JavaScript framework.
Reddit
reddit.com › r/javascript › [askjs] on a scale of 1-10, how hard is building a wysiwyg editor from scratch?
r/javascript on Reddit: [AskJS] on a scale of 1-10, how hard is building a WYSIWYG editor from scratch?
January 3, 2024 -
Trying to understand how big of a challenge that is. Thank you :)
Top answer 1 of 22
44
8-10. There's a big reason we're all basically using the same 1-3 open source solutions, lol. TinyMCE probably being the most popular. In short it's an absolute pain in the ass. I built a small one for my activity feed and I should've just went with lexical (meta's editor, great for stuff like feed editors). The amount of time I wasted in the name of "oh, I just need it to be simple in vanilla js" really bit me hard.
2 of 22
21
https://github.com/facebook/lexical https://github.com/tinymce/tinymce https://github.com/ckeditor/ckeditor5 These are all massive projects for a WYSIWYG editor. A text editor by itself is a decent challenge, but when you go into WYSIWYG territory it's probably one of the most complex UI/UX challenges there is.
Summernote
summernote.org
Summernote - Super Simple WYSIWYG editor
Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.
Syncfusion
syncfusion.com › javascript-ui-controls › js-rich-text-editor
JavaScript Rich Text Editor | WYSIWYG HTML5 Editor | Syncfusion
October 12, 2025 - Examine and edit the HTML code directly in the source code and View the preview result (HTML live editor). The WYSIWYG Rich Text Editor for JavaScript offers a variety of toolbar options that are fully customizable.
HubSpot
blog.hubspot.com › website › best-wysiwyg-html-editor
20 Best WYSIWYG HTML Editors for 2025
April 22, 2025 - Froala is a lightweight WYSIWYG HTML editor written in JavaScript. It includes built-in rich text capabilities and extensions via Froala's API and server-side SDKs.
Top answer 1 of 3
72
Javascript WYSIWYG editors do not use a textarea (at least not externally, it is likely that behind the scenes there is a textarea that is populated with the code that makes up the WYSIWYG content so that it can be posted in a form).
Rather, there are two properties that are used to make an editable area in a webpage: designMode, which applies to a whole document, or contentEditable, which applies to a specific element. Both properties were originally Microsoft innovations, but have been adopted by all major browsers (contentEditable is now part of HTML5).
Once a document (in terms of rich text editors this generally means embedding an iframe with designMode set into your page) or element is made editable, formatting is done by using the execCommand method (for which there are a number of different modes -- bold, italics, etc. -- which are not necessarily the same across all browsers. See this table for more info).
In order to pass content from the editable element to the server, generally the innerHTML of the editable element, is loaded into a textarea, which is posted. The makeup of the HTML generated depends on the browser.
Resources:
- http://blog.whatwg.org/the-road-to-html-5-contenteditable
- http://www.mozilla.org/editor/ie2midas.html
2 of 3
11
I have a good idea take this code to make a cool WYSIWYG editor-
To make a nice editor I have made a code with JavaScript that will open a new window containing the result-
Let's start with the Body-
<body>
<textarea style="height:400px;width:750px;overflow:auto;"onblur="x=this.value"></textarea>
<br />
<button onclick="ShowResult()">see result!</button>
</body>
Now we continue with the JavaScript-
function ShowResult()
{
my_window = window.open("about:blank", "mywindow1");
//By the above line code we have opened a new window
my_window.document.write(x);
//Here we have added the value of the textarea to the new window
}
Let's see the code on-whole:-
<html>
<script type="text/javascript">
function ShowResult()
{
my_window = window.open("about:blank", "mywindow1");
my_window.document.write(x);
}
</script>
<body>
<textarea style="height:400px;width:750px;overflow:auto;" onblur="x=this.value">
</textarea><br />
<button onclick="ShowResult()">see result!</button>
</body>
</html>
If i can help you in any way i am very happy doing that.
Thank you for asking this question and for increasing my curiosity towards JavaScript.
RichTextEditor
richtexteditor.com
WYSIWYG HTML Editor | Javascript Rich Text Editor | RichTextEditor
The #1 WYSIWYG Editor updated with new features, redesigned UI · Rich Text Editor is a full-featured Javascript WYSIWYG HTML editor. It enables content contributors easily create and publish HTML anywhere: on the desktop and on mobile
TinyMCE
tiny.cloud › blog › open-source-wysiwyg-html-editor
10 Best Open Source WYSIWYG Editors in 2025 | TinyMCE
December 23, 2024 - Discover Best Open Source WYSIWYG Editors for easy web content creation. Compare features, usability, and integration options for your perfect match!
Top answer 1 of 3
5
I think it is a possible solution.
- I wrote a function to not replicate the code.
- You can modify it to fit your problem and also I apply the function to just italic, bold and underline the css style. The align buttons will not work, you have to implement the logic but it's very similar as this function
- You can try apply another function to remove the style when click again in the button.
As said before, the textarea not allow modify style of some part of the text, so I'm using
spanto avoid issues. I trydivbut I got some unlike behaviors.
function addEventEditionButton(btnId,cssProperty, cssPropertieValy) {
let buttonTarget = document.getElementById(btnId);
buttonTarget.addEventListener("click", function () {
let selection = window.getSelection().getRangeAt(0);
let selectedText = selection.extractContents();
let span = document.createElement("span");
try{
span.style[cssProperty] = cssPropertieValy;
}catch(e){
console.trace(e);
}
span.appendChild(selectedText);
selection.insertNode(span);
});
}
addEventEditionButton("bold", "fontWeight", "bold");
addEventEditionButton("italic", "fontStyle", "italic");
addEventEditionButton("underline", "textDecoration", "underline");<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <link rel="stylesheet" href="./style/style.css" /> -->
<link
rel="stylesheet"
href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
crossorigin="anonymous"
/>
<title>TextEditor</title>
<style>
.input-container {
border: 1px solid black;
width: 223px;
height: 103px;
overflow: scroll;
}
</style>
</head>
<body>
<header>
<h1>Text Editor</h1>
</header>
<main>
<div class="functionality">
<div class="container">
<button class="btn" id="bold"><i class="fas fa-bold"></i></button>
<button class="btn" id="italic"><i class="fas fa-italic"></i></button>
<button class="btn" id="underline">
<i class="fas fa-underline"></i>
</button>
<button class="btn" id="align-left">
<i class="fas fa-align-left"></i>
</button>
<button class="btn" id="justify">
<i class="fas fa-align-justify"></i>
</button>
<button class="btn" id="align-right">
<i class="fas fa-align-right"></i>
</button>
</div>
</div>
<div contenteditable class="input-container">
<span name="text-input-c1" id="text-input"></span>
</div>
</main>
</body>
<script src="./stackoverflow.js"></script>
</html>Be aware in this HTML chages:
<div contenteditable class="input-container">
<span name="text-input-c1" id="text-input"></span>
</div>
2 of 3
3
My suggestion:
const formatText = (tag) => {
var start = textarea.selectionStart,
end = textarea.selectionEnd,
len = textarea.value.length,
text = textarea.value.substring(start, end);
if (text) textarea.value = textarea.value.substring(0, start) + `<${tag}>${text}</${tag}>` + textarea.value.substring(end, len);
}form {
display: flex;
flex-direction: column;
}
textarea {
width: 100%;
height: 100px;
margin-bottom: 20px;
}
button {
margin-bottom: 20px;
}<form id="form">
<textarea id="textarea">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean venenatis justo ante, sed condimentum dui lobortis nec. Morbi ut aliquam turpis. Aliquam elementum urna diam. Morbi ullamcorper dolor ipsum, quis porttitor tortor bibendum nec. Donec imperdiet neque nec est faucibus, ac congue ligula hendrerit. Cras quis metus ullamcorper, commodo est vel, elementum nulla. In hac habitasse platea dictumst. Morbi posuere pulvinar tellus, quis tincidunt felis condimentum at. Maecenas eu molestie lorem. Nullam finibus luctus mauris, ut tincidunt diam ultrices id. Curabitur vitae vehicula mi, et tincidunt nulla. Sed vitae rhoncus sem, quis aliquet quam. Etiam dignissim lacus eget ex dictum scelerisque. Quisque id ornare odio, non placerat odio.
</textarea>
<button type="button" onclick="formatText('i');">Italic</button>
<button type="button" onclick="formatText('b');">Bold</button>
<button type="button" onclick="formatText('u');">Underlined</button>
</form>Select the text you want italic/bold/underlined, and click on the button.
Snappify
snappify.com › blog › best-wysiwyg-editors
6 Best WYSIWYG Editors Developers Need to Try Right Now (2024)
September 23, 2024 - An easy-to-use editor for content ... Pricing starts from $67 per month. Froala is a fast and lightweight WYSIWYG HTML and JavaScript editor that excels at performance and ease of use....
Liveblocks
liveblocks.io › blog › which-rich-text-editor-framework-should-you-choose-in-2025
Which rich text editor framework should you choose in 2025? | Liveblocks blog
February 6, 2025 - Looking to integrate a WYSIWYG editor into your JavaScript app? This comparison dives into the best frameworks available, including Tiptap, Lexical, BlockNote, and Slate.
GitHub
github.com › froala › wysiwyg-editor
GitHub - froala/wysiwyg-editor: The next generation Javascript WYSIWYG HTML Editor.
The next generation Javascript WYSIWYG HTML Editor. - froala/wysiwyg-editor
Starred by 5.4K users
Forked by 675 users
Languages CSS 60.1% | HTML 36.6% | PHP 3.3%
CSS Script
cssscript.com › home › wysiwyg editor
Latest Free WYSIWYG Editors In JavaScript - CSS Script
Latest and free WYSIWYG HTML Rich Text Editors in Vanilla JavaScript.
Lexical
lexical.dev
Lexical
A set of editor states represent the current and pending states of the editor at any given time. Lexical is designed for everyone. It follows best practices established in WCAG and is compatible with screen readers and other assistive technologies. Lexical is minimal. It doesn't directly concern itself with UI components, toolbars or rich-text features and markdown. The logic for these features can be included via a plugin interface. Lexical is available as a JavaScript framework for use in web browsers, as well as a Swift framework for native iOS development.