Popularity

8.4

Growing

Activity

7.8

Stable

Stars 11,063

Watchers 304

Forks 2,231

Last Commit 10 days ago

Monthly Downloads: 0

Programming language: JavaScript

License: MIT License

Tags: Editors

Latest version: v0.8.19

Summernote alternatives and similar libraries

Based on the "Editors" category.
Alternatively, view Summernote alternatives based on common mentions on social networks and blogs.

vuetify

9.7 9.9 Summernote VS vuetify

🐉 Vue Component Framework
Monaco Editor

9.5 9.0 Summernote VS Monaco Editor

A browser based code editor

Appwrite - The Open Source Firebase alternative introduces iOS support

Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

Promo appwrite.io

ace

9.5 9.3 L3 Summernote VS ace

Ace (Ajax.org Cloud9 Editor)
quill

9.5 9.0 L5 Summernote VS quill

Quill is a modern WYSIWYG editor built for compatibility and extensibility.
CodeMirror

9.4 9.1 L2 Summernote VS CodeMirror

In-browser code editor (version 5, legacy)
slate

9.4 9.6 Summernote VS slate

A completely customizable framework for building rich text editors. (Currently in beta.)
Quasar Framework

9.3 9.8 Summernote VS Quasar Framework

Quasar Framework - Build high-performance VueJS user interfaces in record time
Draft.js

9.2 8.2 L3 Summernote VS Draft.js

A React framework for building text editors.
Editor.js

9.1 8.9 Summernote VS Editor.js

A block-style editor with clean JSON output
trix

8.7 0.0 Summernote VS trix

A rich text editor for everyday writing
medium-editor

8.7 0.0 L4 Summernote VS medium-editor

Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.
TOAST UI Editor

8.7 8.3 Summernote VS TOAST UI Editor

🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.
TinyMCE

8.5 9.7 L4 Summernote VS TinyMCE

The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular
jsoneditor

8.1 7.3 L2 Summernote VS jsoneditor

A web-based tool to view, edit, format, and validate JSON
CKEditor 5

8.0 10.0 Summernote VS CKEditor 5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
SimpleMDE

7.8 0.0 Summernote VS SimpleMDE

A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.
buefy

7.7 8.8 Summernote VS buefy

Lightweight UI components for Vue.js based on Bulma
bootstrap-wysiwyg

7.4 0.0 Summernote VS bootstrap-wysiwyg

Tiny bootstrap-compatible WYSIWYG rich text editor.
wysihtml5

7.2 0.0 L4 Summernote VS wysihtml5

Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.
ProseMirror

6.6 4.8 L5 Summernote VS ProseMirror

The ProseMirror WYSIWYM editor
Froala Editor

6.4 3.3 Summernote VS Froala Editor

The next generation Javascript WYSIWYG HTML Editor.
bootstrap-wysihtml5

6.4 0.0 L5 Summernote VS bootstrap-wysihtml5

Simple, beautiful wysiwyg editor
pen

6.1 0.0 L3 Summernote VS pen

enjoy live editing (+markdown)
Squire

6.0 0.0 L2 Summernote VS Squire

The rich text editor for arbitrary HTML.
sweet.js

5.9 0.0 Summernote VS sweet.js

Sweeten your JavaScript.
EpicEditor

5.9 0.0 L2 Summernote VS EpicEditor

EpicEditor is an embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more. For developers, it offers a robust API, can be easily themed, and allows you to swap out the bundled Markdown parser with anything you throw at it.
vim.js

5.9 0.0 L1 Summernote VS vim.js

JavaScript port of Vim with a persistent ~/.vimrc
Trumbowyg

5.9 7.1 L3 Summernote VS Trumbowyg

A lightweight and amazing WYSIWYG JavaScript editor under 10kB
ContentTools

5.8 5.0 L4 Summernote VS ContentTools

A JS library for building WYSIWYG editors for HTML content.
editor

5.0 0.0 L2 Summernote VS editor

A markdown editor. http://lab.lepture.com/editor/
jquery-notebook

4.2 0.0 Summernote VS jquery-notebook

A modern, simple and elegant WYSIWYG rich text editor.
Mobiledoc Kit

4.0 6.2 Summernote VS Mobiledoc Kit

A toolkit for building WYSIWYG editors with Mobiledoc
React PDF viewer

3.8 9.8 Summernote VS React PDF viewer

A React component to view a PDF document
ckeditor-releases

3.5 5.8 L2 Summernote VS ckeditor-releases

Official distribution releases of CKEditor 4.
popline

3.5 0.0 L4 Summernote VS popline

Popline is an HTML5 Rich-Text-Editor Toolbar
raptor-editor

3.0 0.0 L5 Summernote VS raptor-editor

Raptor, an HTML5 WYSIWYG content editor!
Monod

3.0 0.0 L4 Summernote VS Monod

:notebook: Our cool, secure, and offline-first Markdown editor.
Materio Free Vuetify VueJS Admin Template

2.8 0.0 Summernote VS Materio Free Vuetify VueJS Admin Template

Production Ready, Carefully Crafted, Extensive Vuetifty Free Admin Template 🤩
php-parser

2.7 7.6 Summernote VS php-parser

:herb: NodeJS PHP Parser - extract AST or tokens
Bangle.dev

2.6 8.0 Summernote VS Bangle.dev

Collection of higher level rich text editing tools. It powers the local only note taking app https://bangle.io
esprima

2.5 0.0 Summernote VS esprima

ECMAScript parsing infrastructure for multipurpose analysis
walker.js

1.7 8.5 Summernote VS walker.js

Simple & lightweight tracking implementation layer based on attributes
URL Parser

1.7 7.9 Summernote VS URL Parser

Super fast spec-compliant URL state machine for Node.js
ppo

1.4 0.8 Summernote VS ppo

ppo is a super small and useful utils library for JavaScript 🐝🐜
Zepcode

1.3 0.0 Summernote VS Zepcode

⚗️ Zeplin extension that generates Swift snippets from colors, fonts, and layers
#<Sawyer::Resource:0x00007fbac98da410>

1.2 0.0 Summernote VS #<Sawyer::Resource:0x00007fbac98da410>

Basic operations on iterables
lawnmower

0.7 10.0 Summernote VS lawnmower

A library to build VR layouts using HTML tags
convert-plain-text-into-links

0.5 0.0 Summernote VS convert-plain-text-into-links

An npm module which replaces any plain text link within string with achor tag
react-component-widget

0.5 0.0 Summernote VS react-component-widget

Component for resizing and repositioning charts, parsing transferred data when working with Recharts library.
React Chat UI

0.5 10.0 Summernote VS React Chat UI

Build your own chat UI with React components in a few minutes. Chat UI Kit from minchat.io is an open source UI toolkit for developing web chat applications.

* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.

Do you think we are missing an alternative of Summernote or a related project?

Add another 'Editors' Library

Popular Comparisons

README

Summernote

Super simple WYSIWYG Editor.

Summernote

Summernote is a JavaScript library that helps you create WYSIWYG editors online.

Home page: https://summernote.org

Why Summernote?

Summernote has a few special features:

Paste images from clipboard
Saves images directly in the content of the field using base64 encoding, so you don't need to implement image handling at all
Simple UI
Interactive WYSIWYG editing
Handy integration with server
Supports Bootstrap 3, 4 and 5 integrations
Lots of plugins and connectors provided together

Installation and dependencies

Summernote is built on jQuery.

1. Include JS/CSS

Include the following code in the <head> tag of your HTML:

<!-- include libraries(jQuery, bootstrap) -->
<script type="text/javascript" src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<!-- include summernote css/js-->
<link href="summernote-bs5.css" rel="stylesheet">
<script src="summernote-bs5.js"></script>

2. Target a element

Then place a div tag somewhere in the body tag. This element will be replaced with the summernote editor.

<div id="summernote">Hello Summernote</div>

3. Summernote it!

Finally, run this script after the DOM is ready:

$(document).ready(function() {
  $('#summernote').summernote();
});

For more examples, please visit to homepage.

API

code - get the HTML source code underlying the text in the editor:

var html = $('#summernote').summernote('code');

For more detail about API, please refer to document.

Warning - code injection

The code view allows the user to enter script contents. Make sure to filter/sanitize the HTML on the server. Otherwise, an attacker can inject arbitrary JavaScript code into clients.