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

---
title: Configuration
---

Quill allows several ways to customize it to suit your needs. This section is dedicated to tweaking existing functionality. See the [Modules](/docs/modules/) section for adding new functionality and the [Themes](/docs/themes/) section for styling.


## Container

Quill requires a container where the editor will be appended. You can pass in either a CSS selector or a DOM object.

```javascript
const quill = new Quill('#editor');  // First matching element will be used
```

```javascript
const container = document.getElementById('editor');
const quill = new Quill(container);
```

If the container is not empty, Quill will initialize with the existing contents.

## Options

To configure Quill, pass in an options object:

<SandpackWithQuillTemplate
  files={{
    "/index.js": `
const options = {
  debug: 'info',
  modules: {
    toolbar: true,
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'
};
const quill = new Quill('#editor', options);
`}}
/>

The following keys are recognized:

### bounds

Default: `document.body`

DOM Element or a CSS selector for a DOM Element, within which the editor's ui elements (i.e. tooltips, etc.) should be confined. Currently, it only considers left and right boundaries.


### debug

Default: `warn`

Shortcut for [debug](/docs/api/#debug). Note `debug` is a static method and will affect other instances of Quill editors on the page. Only warning and error messages are enabled by default.

### formats

Default: `null`

A list of formats that are recognized and can exist within the editor contents.

By default, all formats that are defined in the Quill library are allowed.
To restrict formatting to a smaller list, pass in an array of the format names to support.

You can create brand new formats or more fully customize the content using [Registries](/docs/registries/).
Specifying a `registry` option will ignore this `formats` option.

<Sandpack
  defaultShowPreview
  activeFile="index.js"
  files={{
    'index.html': `
<!-- Include stylesheet -->
<link href="{{site.cdn}}/quill.snow.css" rel="stylesheet" />
<div id="editor">
</div>
<!-- Include the Quill library -->
<script src="{{site.cdn}}/quill.js"></script>
<script src="/index.js"></script>`,
    "/index.js": `
const Parchment = Quill.import('parchment');

const quill = new Quill('#editor', {
  formats: ['italic'],
});

const Delta = Quill.import('delta');
quill.setContents(
  new Delta()
    .insert('Only ')
    .insert('italic', { italic: true })
    .insert(' is allowed. ')
    .insert('Bold', { bold: true })
    .insert(' is not.')
);
`}}
/>

### placeholder

Default: None

Placeholder text to show when editor is empty.

<SandpackWithQuillTemplate
  files={{
    "/index.js": `
const options = {
  placeholder: 'Hello, World!',
  theme: 'snow'
};
const quill = new Quill('#editor', options);
`}}
/>


### readOnly

Default: `false`

Whether to instantiate the editor to read-only mode.

<SandpackWithQuillTemplate
  files={{
    "/index.js": `
const options = {
  readOnly: true,
  modules: {
    toolbar: null
  },
  theme: 'snow'
};
const quill = new Quill('#editor', options);
const Delta = Quill.import('delta');
quill.setContents(
  new Delta()
    .insert('Hello, ')
    .insert('World', { bold: true })
    .insert('\\n')
);

`}}
/>

### registry

Default: `null`

By default all formats defined by Quill are supported in the editor contents through a shared registry between editor instances. Use `formats` to restrict formatting for simple use cases and `registry` for greater customization. Specifying this `registry` option will ignore the `formatting` option. Learn more about [Registries](/docs/registries/).

### theme

Name of theme to use. The builtin options are `"bubble"` or `"snow"`. An invalid or falsy value will load a default minimal theme. Note the theme's specific stylesheet still needs to be included manually. See [Themes](/docs/themes/) for more information.