# Tiptap

This guide covers how to add WProofreader spelling, grammar, and style checking to Tiptap editor version 3. It applies to both Cloud and self-hosted deployments.

[See live demo](https://demos.webspellchecker.com/wproofreader-tiptap.html)

### Prerequisites

You'll need an active WProofreader subscription or trial. [Sign up for a free trial or choose a plan](https://wproofreader.com/sdk#pricing). 

For the Cloud version, you'll need a Service ID. You can find it on the Credentials page in the admin panel after signing up. For self-hosted, you'll need the endpoint of your WProofreader application (protocol, host, port, and path) to specify in the configuration parameters.

{% hint style="info" %}
The Tiptap extension is available as an npm package ([@webspellchecker/wproofreader-tiptap](https://www.npmjs.com/package/@webspellchecker/wproofreader-tiptap)) and the source is on [GitHub](https://github.com/WebSpellChecker/wproofreader-tiptap).
{% endhint %}

### Choose your integration method

Tiptap has a dedicated WProofreader extension available as an npm package. This is the recommended approach for most Tiptap projects.

| Method                 | Best for                                                                                                                               |
| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| Tiptap extension (npm) | Most Tiptap projects. Installs as a native Tiptap extension and integrates directly into the editor setup.                             |
| npm SDK                | Projects that use multiple editors and want a single shared WProofreader dependency, or setups where the Tiptap extension isn't a fit. |
| Script-based           | Quick setup without a build process. Add the config and script to your HTML page.                                                      |

### Tiptap extension (npm)

#### Installation

Install the extension:

```
npm install @webspellchecker/wproofreader-tiptap
```

#### Configuration

Import the WProofreader extension and add it to the `extensions` array in your Tiptap editor setup:

```js
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import WProofreader from '@webspellchecker/wproofreader-tiptap';

new Editor({
  element: document.querySelector('.editorElement'),
  extensions: [
    StarterKit,
    WProofreader.configure({
      wproofreader: {
        /* WProofreader config */
      }
    })
  ],
  content: '<p>Hello World!</p>'
})
```

Pass the WProofreader configuration inside the `wproofreader` field. For a full list of available options, refer to the [Configuration options](/v6.12.0/integrations/initialization/configuration-options.md).

For the cloud version, add your Service ID:

```js
wproofreader: {
  serviceId: 'your-service-ID'
}
```

`serviceId` is required to connect to the cloud version of WProofreader.

For self-hosted deployments, specify the connection parameters for your WProofreader application instead:

```js
wproofreader: {
  serviceProtocol: 'https',
  serviceHost: 'your_host_name',
  servicePort: '443',
  servicePath: 'wscservice/api',
  srcUrl: 'https://your_host_name/wscservice/wscbundle/wscbundle.js'
}
```

### NPM SDK integration

The WProofreader SDK npm package is a universal integration method that works with any editor, including Tiptap. It's a good fit for projects that use multiple editors and want a single shared WProofreader dependency.

For setup instructions, refer to the [Initialize using npm SDK guide](/v6.12.0/integrations/initialization/initialization-options/initialize-using-npm-sdk.md). It covers installation, configuration, and usage with `autoSearch` and `init()`.

### Script-based integration

If you don't use a build process, you can integrate WProofreader using the script-based approach with `autoSearch`. This detects Tiptap's editable area automatically when a user focuses on it. For setup instructions, refer to the [Initialize using autoSearch](/v6.12.0/integrations/initialization/initialization-options.md#initialize-using-autosearch) guide.

If you want proofreading to start on editor load without waiting for focus, use `init()` with Tiptap's `tiptapCreated` event. For full setup instructions, refer to the [Initialize using init()](/v6.12.0/integrations/initialization/initialization-options.md#initialize-using-init-method) guide. When using this method with Tiptap, pass the editor's DOM node as the container:

```js
document.addEventListener('tiptapCreated', (event) => {
  WEBSPELLCHECKER.init({
    container: event.detail.editor.view.dom
  });
});
```

For self-hosted deployments, replace `serviceId` with the server connection parameters and update the script `src` to point to your server:

```html
<script>
window.WEBSPELLCHECKER_CONFIG = {
  autoSearch: true,
  autoDestroy: true,
  serviceProtocol: 'https',
  serviceHost: 'your_host_name',
  servicePort: '443',
  servicePath: 'wscservice/api'
};
</script>
<script src="https://your_host_name/wscservice/wscbundle/wscbundle.js"></script>
```

### What's next

After integration, you can customize WProofreader further:

* [Configuration reference](https://webspellchecker.com/docs/api/wscbundle/Options.html) for the full list of options (default language, UI localization, check types, custom dictionaries, and more).
* [Features](/v6.12.0/features/spell-and-grammar-check.md) overview to explore custom dictionaries, style guide rules, AI writing assistant (AIWA), and other capabilities.
* [Demos](https://demos.webspellchecker.com/) to see working examples with Tiptap and other editors.

### FAQ

#### How does WProofreader work alongside Tiptap AI?

Tiptap AI covers generative writing assistance powered by a large language model. WProofreader complements it with deterministic, rule-based spelling, grammar, and style checking that runs as you type. If you work in a regulated domain where LLM output can't be the sole quality gate, or where consistent, auditable corrections matter, WProofreader adds a reliable second layer without replacing the AI toolkit.

#### Does WProofreader work with Tiptap version 2?

The dedicated npm extension supports Tiptap version 3. For Tiptap version 2, use the script-based integration with `autoSearch` or `init()`.

#### What's the difference between WProofreader and Tiptap's built-in spell check?

Tiptap relies on the browser's native spell check, which offers basic spelling check only. WProofreader adds grammar, style, and punctuation checking, spelling autocorrect, text autocomplete, automatic language detection, and custom dictionaries.

#### What does `srcUrl` do in the self-hosted configuration?

In the npm extension, `srcUrl` tells WProofreader where to load the `wscbundle.js` script from your server. It's required for self-hosted deployments because there's no CDN script tag in the page.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wproofreader.com/v6.12.0/integrations/rich-text-editors/tiptap.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.