Adding Quill to Your Build Pipeline

Each version of Quill is built and ready to use from a variety of sources, including NPM or its CDN. However there may be use cases where you would like to build Quill from source, as part of your application's build pipeline. If this desire has not occurred to you, don't sweat it! Using pre-built versions is the easiest way to use Quill.

Quill is built using Webpack and this guide is mostly targeted towards Webpack users. However some principles may translate to other build environments.

A minimal working example of everything covered in this guide can be found at quill-webpack-example.

Webpack

You will need to add Webpack and appropriate loaders as development dependencies to your app. The Typescript compiler is necessary if you want to build Parchment from source as well.

• Quill source code - babel-core, babel-loader, babel-preset-es2015
• Parchment source code - ts-loader, typescript
• SVG icons - html-loader

Your Webpack configuration file will also need to alias Quill and Parchment to point to their respective entry source files. Without this, Webpack will use the pre-built files included in NPM, instead of building from source.

Entry

Quill is distributed with builds quill.js and quill.core.js. The purpose of the entry files for both builds, quill.js and core.js, is to import and register necessary dependencies. You will likely want a similar entry point in your application that includes only the formats, modules, or themes that you use.

import Quill from 'quill/core';

import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow';

import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import Header from 'quill/formats/header';


Quill.register({
  'modules/toolbar': Toolbar,
  'themes/snow': Snow,
  'formats/bold': Bold,
  'formats/italic': Italic,
  'formats/header': Header
});


export default Quill;

Stylesheets

There is not as much to benefit from building from source in the realm of stylesheets, since rules can be so easily overwritten. However, css-loader's tilde prefix may be useful to include Quill styles in a your application css file.

@import "~quill/dist/quill.core.css"

// Rest of your application CSS

Example

Take a look at quill-webpack-example for a minimal working example.