Quill themes not working

Question

Quill themes not working

14.3k Views Asked by user2620460 At 04 April 2025 at 16:54

I'm a happy amateur trying to build my own website, and thought I'd use Quill as a nice texteditor for articles and stuff. When going through the starting example, it simply doesn't work.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.quilljs.com/1.1.9/quill.js"></script>
    <link href="https://cdn.quilljs.com/1.1.9/quill.snow.css" rel="stylesheet">
    <script src="https://cdn.quilljs.com/1.1.9/quill.core.js"></script>
    <link href="https://cdn.quilljs.com/1.1.9/quill.core.css" rel="stylesheet">
  </head>
  <body>
    <div id="editor">
      <p>Hello World!</p>
      <p>Some initial <strong>bold</strong> text</p>
      <p><br></p>
    </div>
<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>
  </body>
</html>

It gives me the following error message in the console:

quill Cannot import themes/snow. Are you sure it was registered?

Console Error message screenshot

What am I missing? Where and how am I supposed to register it?

Quick edit:
Should also say I tried with bubble instead (and of course changed the CSS in the head). When I tried with modules I got the same error message for each module as well.

Original Q&A

There are 4 best solutions below

**jhchen** · Answer 1

You are including Quill twice and the second time is a reduced version without themes. Just include the main library:

<script src="https://cdn.quilljs.com/1.1.9/quill.js"></script>
<link href="https://cdn.quilljs.com/1.1.9/quill.snow.css" rel="stylesheet">

**Vadim Plisko** · Answer 2

So I guess your last loading script is quill core without build in theme. Next code taken from quill website:

    <!-- Main Quill library -->
<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>

<!-- Theme included stylesheets -->
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">

<!-- Core build with no theme, formatting, non-essential modules -->
<link href="//cdn.quilljs.com/1.3.6/quill.core.css" rel="stylesheet">
<script src="//cdn.quilljs.com/1.3.6/quill.core.js"></script>

And it clearly states in comment "Core build with no theme"

In order for you to load quill:

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- Include the Quill library -->
    <script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
    <!-- Include stylesheet -->
    <link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
</head>

**Michael Seltenreich** · Answer 3

Here's a working version on codepen

All it uses is:

<link href="https://cdn.quilljs.com/1.2.2/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.2.2/quill.js"></script>

and for my container I used:

<div id="myDiv"></div>

The initialization script is the simplest:

var quill = new Quill('#myDiv', {theme: 'snow'});

No errors.

**Hellen Fiallos** · Answer 4

Core should go before everything else to work.

<!-- Core build with no theme, formatting, non-essential modules -->
<link href="//cdn.quilljs.com/1.2.3/quill.core.css" rel="stylesheet">
<script src="//cdn.quilljs.com/1.2.3/quill.core.js"></script>

<!-- Main Quill library -->
<script src="//cdn.quilljs.com/1.2.3/quill.js"></script>
<script src="//cdn.quilljs.com/1.2.3/quill.min.js"></script>

<!-- Theme included stylesheets -->
<link href="//cdn.quilljs.com/1.2.3/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.2.3/quill.bubble.css" rel="stylesheet">

Quill themes not working

There are 4 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in QUILL

Trending Questions

Popular # Hahtags

Popular Questions