Summernote
A JavaScript library that adds a simple rich-text (WYSIWYG) editor to web pages.
- Stars
- 11.8k
- Forks
- 2.2k
- Licence
- MIT
- Language
- JavaScript
- Last update
- 7 months ago
- Type
- Library
What it is
Summernote is a JavaScript library that lets a website show a rich-text editor, the kind with bold, lists and formatting buttons, in place of a plain text box. You add a script and a stylesheet to a page, place an empty div, and call one function to turn it into an editor. It is built on jQuery and works with Bootstrap 3, 4 and 5.
- Add a formatted comment or description box to a web form
- Let staff write blog or article content inside a web admin page
- Read the editor's HTML with a single API call and save it to your database
Great for
- Web developers adding a simple formatted-text editor to an existing site
- Teams already using jQuery or Bootstrap who want a drop-in editor
- Admin panels or CMS-style forms where users write formatted content
- Projects that need an MIT-licensed editor with no fees
Not ideal for
- Projects that do not use jQuery, since the README says Summernote is built on it and that adds a dependency
- Anyone needing built-in server-side HTML sanitizing, since the README warns that the server must filter the HTML itself
- Non-developers looking for a finished writing app; this is a component to embed, not a standalone program
How to get it
- 1
Install with a package manager
You'll need: jQuery · Bootstrap (optional, for Bootstrap-styled editor)
Clone the repository
git clone https://github.com/summernote/summernote.git - 2
Run it
- Include jQuery, Bootstrap and the summernote JS and CSS files in your page's head tag
- Add a div with an id, for example <div id="summernote">Hello Summernote</div>
- Call $('#summernote').summernote() inside $(document).ready
- Read the content with $('#summernote').summernote('code')
- 3
Get the most out of it
- Use the project website examples at summernote.org/examples for working setups
- Use the basic API documented at summernote.org/getting-started to read and set content
- Browse the awesome-summernote list for plugins and connectors
- Always sanitize submitted HTML on the server, as the README advises
Downloads
Strengths
- Simple setup: include JS and CSS, add a div, and initialize it
- MIT licensed and free to use
- Works with Bootstrap 3, 4 and 5 and has a plugin ecosystem listed in a companion repository
Trade-offs
- Depends on jQuery, which may be unwanted in modern projects
- The README warns that user-entered HTML can contain scripts, so you must sanitize content on the server
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| summernote (this) | 11.8k | Library | beginner | 7 months ago | Web developers adding a simple formatted-text editor to an existing site |
| trix | 20k | Library | intermediate | 9 days ago | Developers adding a rich text box to a Rails or other web app |
| wangEditor | 18.3k | Library | intermediate | 2.1 years ago | Developers adding a rich text input to a website |
| tiptap | 38.9k | Library | intermediate | 4 days ago | Developers building a custom text editor into a web product |
| pell | 12k | Library | beginner | 2.5 years ago | Web developers who need a simple rich text box in a form or admin page |
| milkdown | 12k | Library | advanced | 4 days ago | Developers adding a rich markdown editing box to a web app |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.