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

Prerequisites

You'll need an active WProofreader subscription or trial. Sign up for a free trial or choose a plan.

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.

The Tiptap extension is available as an npm package (@webspellchecker/wproofreader-tiptap) and the source is on GitHub.

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:

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.

For the cloud version, add your Service ID:

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:

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. 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 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() guide. When using this method with Tiptap, pass the editor's DOM node as the container:

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:

<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 for the full list of options (default language, UI localization, check types, custom dictionaries, and more).

• Features overview to explore custom dictionaries, style guide rules, AI writing assistant (AIWA), and other capabilities.

• Demos 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.