quill/packages/website/content/docs/installation.mdx

---
title: Installation
---

Quill comes ready to use in several convenient forms.

## CDN

A globally distributed and available CDN is provided, backed by [jsDelivr](https://www.jsdelivr.com/).
This is the most convenience way to get started with Quill, and requires no build steps or package managers.

### Full Build

For most users, the full build is the easiest way to get started with Quill.
It include the core Quill library, as well as common themes, formats, and modules.

To import the full build, you will need to include "quill.js" script and the stylesheet for the theme you wish to use.

<Sandpack
  files={{
    "index.html": `
<script src="{{site.cdn}}/quill.js"></script>
<link href="{{site.cdn}}/quill.snow.css" rel="stylesheet">

<div id="editor">
  <h2>Demo Content</h2>
  <p>Preset build with <code>snow</code> theme, and some common formats.</p>
</div>

<script>
  const quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>
    `
  }}
/>

<Hint>
Learn more about how to [customizing the toolbar](/docs/formats).
</Hint>

### Core Build

To fully customize your Quill build, you can import the core library and add only the formats and modules you need.

<Sandpack
  files={{
    "index.html": `
<link href="{{site.cdn}}/quill.core.css" rel="stylesheet">
<script src="{{site.cdn}}/quill.core.js"></script>

<div id="editor">
  <p>Core build with no theme, formatting, non-essential modules</p>
</div>

<script>
  const quill = new Quill('#editor');
</script>
    `
  }}
/>

<Hint>
Learn more about how to [make your own formats](/guides/cloning-medium-with-parchment).
</Hint>

CDN builds expose `Quill` to the global `window` object.
`Quill` provides an [`import()`](/docs/api#import) method for accessing components of the Quill library, including its formats, modules, or themes.

## npm

If your project uses bundlers such as [Webpack](https://webpack.js.org/) or [Vite](https://vitejs.dev/), it's recommended to install Quill via [npm](https://www.npmjs.com/).

```bash
npm install quill@{{site.version}}
```

Similar to the CDN approach, you can import the full build from `"quill"` or the core build from `"quill/core"`.

```js
import Quill from 'quill';
// Or if you only need the core build
// import Quill from 'quill/core';

const quill = new Quill('#editor');
```

<Hint>
If you want to use the core build, avoid importing `"quill"` directly throughout your project.
Doing so results in a full build, as `"quill"` registers the full build's formats and modules upon import.
</Hint>

`Quill.import()` is also available for the npm build to access Quill's library.
However, a more natural approach in npm enviroment is to import the formats and modules directly.

```js
import Quill from 'quill';
// Or if you only need the core build
// import Quill from 'quill/core';

import { Delta } from 'quill';
// Or if you only need the core build
// import { Delta } from 'quill/core';
// Or const Delta = Quill.import('delta');

import Link from 'quill/formats/link';
// Or const Link = Quill.import('formats/link');
```

### Styles

Quill's npm package also comes with the stylesheets for the core and themes, just like the CDN build.
Those stylesheets live in the `dist` directory.

You can import them in your JavaScript files if you have a proper bundler setup.

```js
import "quill/dist/quill.core.css";
```

Refer to [webpack-example](https://github.com/quilljs/webpack-example) for a sample project that uses Quill in a webpack project.