---
title: "Migrate from CKEditor 4 to Tiptap"
description: "Learn how to migrate your existing CKEditor 4 editor to Tiptap. Complete guide covering content migration, setup, and feature mapping."
canonical_url: "https://tiptap.dev/docs/guides/migrate-from-ckeditor4"
---

# Migrate from CKEditor 4 to Tiptap

Learn how to migrate your existing CKEditor 4 editor to Tiptap. Complete guide covering content migration, setup, and feature mapping.

Migrating from CKEditor 4 to Tiptap is straightforward and offers significant benefits in terms of modern architecture and flexibility. This guide will walk you through the migration process step by step.

## Content migration

### HTML content compatibility

CKEditor 4 stores content as HTML, which makes migration to Tiptap seamless. Tiptap can directly use HTML content without any conversion:

```ts
// Your existing CKEditor 4 content
const existingContent =
  '<p>Hello <strong>world</strong>!</p><ul><li>Item 1</li><li>Item 2</li></ul>'

// Use directly in Tiptap
const editor = new Editor({
  content: existingContent,
  extensions: [StarterKit],
})
```

While HTML works perfectly, we recommend converting it to Tiptap's JSON format for better performance and readability. For batch conversion of existing content, use the [HTML utility](https://tiptap.dev/docs/editor/api/utilities/html.md) to convert HTML to JSON programmatically.

## Editor setup

### Installation

First, install Tiptap and its dependencies:

```bash
npm install @tiptap/core @tiptap/starter-kit
```

Tiptap supports all modern frontend UI frameworks like React and Vue. Follow the framework-specific installation instructions in our [installation guides](https://tiptap.dev/docs/editor/getting-started/install.md).

### Basic editor setup

Replace your CKEditor 4 initialization with Tiptap:

```ts
// CKEditor 4 (before)
CKEDITOR.replace('editor', {
  toolbar: [
    { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline'] },
    { name: 'paragraph', items: ['NumberedList', 'BulletedList'] },
    { name: 'links', items: ['Link', 'Unlink'] },
  ],
  height: 300,
})

// Tiptap (after)
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const editor = new Editor({
  element: document.querySelector('#editor'),
  extensions: [StarterKit],
  content: '<p>Hello World!</p>',
})
```

## Extensions

### Understanding Tiptap's extension system

Tiptap uses a modular extension system that replaces CKEditor 4's plugin architecture. Each feature is an independent extension that can be configured and customized.

The [StarterKit](https://tiptap.dev/docs/editor/extensions/functionality/starterkit.md) is a bundle of all the basic extensions, and you can add or remove other extensions as needed.

Explore all available extensions in our [extensions guide](https://tiptap.dev/docs/editor/extensions/overview.md), or [create your own](https://tiptap.dev/docs/editor/extensions/custom-extensions.md) to support custom functionality and HTML elements.

### Common CKEditor 4 plugin equivalents

| CKEditor 4 Plugin | Tiptap Extension                        | Notes                  |
| ----------------- | --------------------------------------- | ---------------------- |
| `basicstyles`     | `Bold`, `Italic`, `Underline`           | Included in StarterKit |
| `list`            | `BulletList`, `OrderedList`, `ListItem` | Included in StarterKit |
| `link`            | `Link`                                  | Included in StarterKit |
| `image`           | `Image`                                 | Available separately   |
| `table`           | `Table`                                 | Available separately   |
| `sourcearea`      | `CodeBlock`                             | Included in StarterKit |
| `format`          | `Heading`                               | Included in StarterKit |
| `blockquote`      | `Blockquote`                            | Included in StarterKit |
| `justify`         | `TextAlign`                             | Available separately   |
| `colorbutton`     | `TextStyle`, `Color`                    | Available separately   |
| `font`            | `TextStyle`, `FontSize`                 | Available separately   |
| `indentlist`      | Built into list extensions              | Included in StarterKit |
| `horizontalrule`  | `HorizontalRule`                        | Included in StarterKit |

### Extension configuration

```ts
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import Image from '@tiptap/extension-image'
import Table from '@tiptap/extension-table'
import TableRow from '@tiptap/extension-table-row'
import TableHeader from '@tiptap/extension-table-header'
import TableCell from '@tiptap/extension-table-cell'
import TextAlign from '@tiptap/extension-text-align'
import Underline from '@tiptap/extension-underline'

const editor = new Editor({
  extensions: [
    StarterKit,
    Underline,
    Image.configure({
      inline: true,
      allowBase64: true,
    }),
    Table.configure({
      resizable: true,
    }),
    TableRow,
    TableHeader,
    TableCell,
    TextAlign.configure({
      types: ['heading', 'paragraph'],
    }),
  ],
})
```

### Custom extensions

For CKEditor 4 custom plugins, create custom Tiptap extensions. See our [custom extensions guide](https://tiptap.dev/docs/editor/extensions/custom-extensions.md) for detailed instructions.

## UI implementation

### Toolbar implementation

CKEditor 4's toolbar configuration translates to custom UI components in Tiptap:

```tsx
// CKEditor 4 toolbar config
toolbar: [
  { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline'] },
  { name: 'paragraph', items: ['NumberedList', 'BulletedList'] },
  { name: 'links', items: ['Link', 'Unlink'] },
]

// Tiptap equivalent (React example)
function Toolbar({ editor }) {
  if (!editor) return null

  return (
    <div className="toolbar">
      <button
        onClick={() => editor.chain().focus().toggleBold().run()}
        className={editor.isActive('bold') ? 'active' : ''}
      >
        Bold
      </button>

      <button
        onClick={() => editor.chain().focus().toggleItalic().run()}
        className={editor.isActive('italic') ? 'active' : ''}
      >
        Italic
      </button>

      <button
        onClick={() => editor.chain().focus().toggleUnderline().run()}
        className={editor.isActive('underline') ? 'active' : ''}
      >
        Underline
      </button>

      <button
        onClick={() => editor.chain().focus().toggleBulletList().run()}
        className={editor.isActive('bulletList') ? 'active' : ''}
      >
        Bullet List
      </button>

      <button
        onClick={() => editor.chain().focus().toggleOrderedList().run()}
        className={editor.isActive('orderedList') ? 'active' : ''}
      >
        Numbered List
      </button>

      <button
        onClick={() => {
          const url = window.prompt('URL')
          if (url) {
            editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
          }
        }}
        className={editor.isActive('link') ? 'active' : ''}
      >
        Link
      </button>

      <button
        onClick={() => editor.chain().focus().unsetLink().run()}
        disabled={!editor.isActive('link')}
      >
        Unlink
      </button>
    </div>
  )
}
```

### Pre-built UI components

For faster development, consider using Tiptap's pre-built UI components:

- Explore our [UI components](https://tiptap.dev/docs/ui-components/getting-started/overview.md) for ready-to-use toolbar and menu components
- Check out practical examples in our [default text editor example](https://tiptap.dev/docs/examples/basics/default-text-editor.md)

## Migration checklist

1. Install Tiptap packages
2. Replace CKEditor 4 initialization with Tiptap setup
3. Map CKEditor 4 plugins to Tiptap extensions
4. Migrate toolbar configuration to custom UI components
5. Test content compatibility
6. Convert existing content to JSON format (recommended)
7. Implement custom extensions for any missing functionality
8. Update event handlers and API calls
9. Test image upload and handling if used
10. Verify table functionality if used
11. Test user interactions

## Next steps

- Explore the [extension overview](https://tiptap.dev/docs/editor/extensions/overview.md) to discover all available extensions
- Learn about [custom extensions](https://tiptap.dev/docs/editor/extensions/custom-extensions.md) for advanced customization
- Check out our [examples](https://tiptap.dev/docs/examples.md) for implementation inspiration
- Review the [performance guide](https://tiptap.dev/docs/guides/performance.md) for optimization tips