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.

### 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')
);

`}}
/>


### 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.