# quill-toggle-fullscreen-button

> Quill module which adds a toggle fullscreen button to the Quill editor toolbar.

Latest version **0.2.0** (published 2026-08-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install quill-toggle-fullscreen-button
pnpm add quill-toggle-fullscreen-button
yarn add quill-toggle-fullscreen-button
bun add quill-toggle-fullscreen-button
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2026-08-07 |
| First published | 2022-12-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Vitaliy Kolobanov |
| Maintainers | qvart |
| Keywords | quill, quilljs, fullscreen |

## Links

- npm: https://www.npmjs.com/package/quill-toggle-fullscreen-button
- Repository: https://github.com/qvarts/quill-toggle-fullscreen-button
- Homepage: https://github.com/qvarts/quill-toggle-fullscreen-button#readme
- Issues: https://github.com/qvarts/quill-toggle-fullscreen-button/issues
- npm.io page: https://npm.io/package/quill-toggle-fullscreen-button

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 0.2.0 (latest) — 2026-08-07
- 0.1.4 — 2025-07-22
- 0.1.3 — 2024-09-27
- 0.1.2 — 2023-08-31
- 0.1.1 — 2023-08-03
- 0.1.0 — 2022-12-26
- 0.0.1 — 2022-12-22

## README

# quill-toggle-fullscreen-button

[Quill](https://github.com/quilljs/quill) module which adds a toggle fullscreen 
button to the Quill editor toolbar.

## Install

```bash
npm install quill-toggle-fullscreen-button --save
```

## Usage

First, [set up a Quill editor](https://quilljs.com/docs/quickstart/).
<br>
<br>

Next, load `quill-toggle-fullscreen-button` module through any of the options 
presented by [UMD](https://github.com/umdjs/umd).

Load script in HTML:

```html
<script src="quill.toggleFullscreenButton.js"></script>
```

Using [ES6-style `import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import):

```javascript
import QuillToggleFullscreenButton from 'quill-toggle-fullscreen-button';
```

Using CommonJS-style `require`:

```javascript
const QuillToggleFullscreenButton = require('quill-toggle-fullscreen-button');
```
<br>

Then, register the `quill-toggle-fullscreen-button` module:

```javascript
Quill.register('modules/toggleFullscreen', QuillToggleFullscreenButton);

const quill = new Quill('#editor', {
  modules: {
    toggleFullscreen: true
  }
});
```
<br>

For an example setup, see the
[example code](example), which can be run with:

```bash
npm start
```
<br>

To see the demo page, follow [this](https://qvarts.github.io/quill-toggle-fullscreen-button/) link.
<br>
<br>

## API

### Configuration

The `quill-toggle-fullscreen-button` module has the following optional configuration:

- `buttonTitle` _string_: sets the title attribute of the toolbar button
- `buttonHTML` _string_: overrides the SVG icon of the toolbar button

Provide these options when setting up the Quill editor:

```javascript
const editor = new Quill('#editor', {
  modules: {
    toggleFullscreen: {
      buttonTitle: 'Toggle fullscreen',
      buttonHTML: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
        <polyline class="ql-even ql-stroke" points="12 3 15 3 15 6" />
        <polyline class="ql-even ql-stroke" points="6 15 3 15 3 12" />
        <polyline class="ql-even ql-stroke" points="12 15 15 15 15 12" />
        <polyline class="ql-even ql-stroke" points="6 3 3 3 3 6" />
      </svg>`,
    },
  },
});
```

## License

This code is available under the [MIT license](LICENSE-MIT.txt).

---
_Source: https://npm.io/package/quill-toggle-fullscreen-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
