Skip to content
Get packs

Guide · Open source

How to use Summernote: setup, code and API basics

Updated · written with AI from the project's own documentation and checked against our catalogue data

Summernote is a JavaScript library that replaces a plain text box on a web page with a rich-text editor that has bold, lists and other formatting buttons. This guide walks through adding the files to a page, creating the element the editor replaces, starting the editor, and reading the HTML it produces. By the end you will have a working editor on a page and know the one security step you must not skip.

Summernotesummernote/summernote · ★ 11.8k · MIT

Quick start

  1. 1Include jQuery, Bootstrap and Summernote. Add the script and link tags for jQuery, Bootstrap and the summernote-bs5 files in the head of your page.
  2. 2Add a div. Place a div with an id, such as summernote, in the body of the page.
  3. 3Initialize the editor. Call $('#summernote').summernote() inside a document ready handler.
  4. 4Read the content. Use $('#summernote').summernote('code') to get the HTML the user wrote.
  5. 5Sanitize on the server. Filter or sanitize the HTML on your server before saving or displaying it.

What you need before you start

Summernote is built on jQuery, so your page needs jQuery loaded before Summernote. Bootstrap is optional. Summernote works with Bootstrap 3, 4 and 5, and the Bootstrap-specific files give the editor Bootstrap styling.

This guide assumes you are adding the editor to a web page you already build. Summernote is a component to embed, not a standalone writing program.

  • jQuery (required)
  • Bootstrap 3, 4 or 5 (optional, for Bootstrap-styled editor)

Include the JS and CSS files

Place the following code in the head tag of your HTML. It loads jQuery and Bootstrap from a CDN, then the Summernote stylesheet and script. The README's example uses the Bootstrap 5 build of Summernote, named summernote-bs5.css and summernote-bs5.js.

<!-- 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/bootstrap@5.0.2/dist/css/bootstrap.min.css" /> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <!-- include summernote css/js--> <link href="summernote-bs5.css" rel="stylesheet"> <script src="summernote-bs5.js"></script>

Place a div where the editor should appear

Put a div tag somewhere in the body of the page. Summernote replaces this element with the editor. The text inside the div becomes the editor's starting content.

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

Start the editor with one function call

Once the page is ready, select the div with jQuery and call summernote() on it. Wrapping the call in a document ready handler makes sure the element exists before Summernote tries to replace it.

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

Read the HTML content with the API

The editor stores its content as HTML. To get that HTML, call summernote with the code argument. The README notes that Summernote provides a wider set of APIs, which are described in the project documentation under basic API.

  • For more examples, see the project website at summernote.org/examples.
  • For more detail on the API, see the documentation at summernote.org/getting-started/#basic-api.
var html = $('#summernote').summernote('code');

Filter the HTML on the server before saving

The README warns that the code view lets a user enter script content. Summernote does not protect your server from this, so you must filter or sanitize the HTML on the server before you store or display it. Without this step, an attacker can inject JavaScript that runs in other users' browsers.

Images are embedded in the content using base64 encoding, so no separate image store is needed. Keep this in mind when you think about the size of the content you save.

  • Sanitize the HTML on the server every time you save user content.
  • Do not trust the value returned by summernote('code') without filtering.

What people use it for

  • Adding a formatted-text field to an existing jQuery or Bootstrap website.
  • Writing content in an admin panel or CMS-style form.
  • Letting users write formatted posts or descriptions in a web form.
  • Building a project that needs an MIT-licensed editor with no fees.

Frequently asked questions

Is Summernote free to use?

Summernote is licensed under the MIT license, according to the README. The MIT license is a permissive open-source license. Check the license file in the repository for the full terms.

Do I need jQuery to use Summernote?

Yes. The README says Summernote is built on jQuery, and the setup example loads jQuery before Summernote. If your project does not use jQuery, that is a dependency you will have to add.

Does Summernote work with Bootstrap 5?

Yes. The README says Summernote is compatible with Bootstrap 3, 4 and 5, and the example uses the summernote-bs5 files with Bootstrap 5.

How do I get the HTML from the Summernote editor?

Call $('#summernote').summernote('code') on the element you turned into an editor. This returns the underlying HTML as a string.

Is Summernote secure to use on its own?

The README warns that the code view allows script content, so the server must filter or sanitize the HTML. Summernote does not do server-side sanitizing for you.

What are alternatives to Summernote?

The project lists Quill, TinyMCE, CKEditor and Trix as comparable projects. Choose based on your stack, licence needs and features, since this guide does not compare them in detail.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Summernote suits web developers who already use jQuery or Bootstrap and want a free, MIT-licensed editor they can drop into a form or admin panel. It is a poor fit for projects without jQuery, for teams that cannot add server-side HTML sanitizing, or for anyone who wants a finished writing app rather than a component.

Install options & downloads