Arkpad
Resources

Migration Guide

Migrating from Tiptap, Slate, or older Arkpad versions.

From Tiptap

Key Differences

ConceptTiptapArkpad
Editor classnew Editor({...})new ArkpadEditor({...})
Command APIeditor.chain().toggleBold().run()editor.runCommand('toggleBold') or editor.commands.toggleBold()
React hookuseEditoruseArkpadEditor
Content componentEditorContentArkpadEditorContent
Extension create()Top-level importExtension.create() from core

Command Migration

- editor.chain().toggleBold().focus().run()
+ editor.commands.toggleBold()
+ editor.focus()

Extensions are structured similarly but use Arkpad's Extension Factory pattern:

// Tiptap
import { Extension } from "@tiptap/core";

// Arkpad
import { Extension } from "@arkpad/core";

From Old Arkpad API

- import { createArkpadEditor } from '@arkpad/core'
+ import { ArkpadEditor } from '@arkpad/core'

- const editor = createArkpadEditor({ ... })
+ const editor = new ArkpadEditor({ ... })

React Component Migration

- import { ArkpadEditorComponent } from '@arkpad/react'
+ import { useArkpadEditor, ArkpadEditorContent } from '@arkpad/react'

- <ArkpadEditorComponent content="..." />
+ const editor = useArkpadEditor({ content: "..." })
+ <ArkpadEditorContent editor={editor} />

From Slate

Architecture Comparison

AspectSlateArkpad
SchemaCustomProseMirror-based, strict
ExtensionsPluginsClass-based Extension Factory
CommandsCustom functionsNamed commands with proxy
ReactBuilt-in hooksFramework-agnostic core + React package

Key Migration Steps

  1. Replace Slate <Editable> with Arkpad's <ArkpadEditorContent>
  2. Convert custom Slate plugins to Arkpad extensions using Extension.create()
  3. Replace Transforms API with Arkpad's editor.runCommand() pattern

From Draft.js / Quill

FeatureDraft.js / QuillArkpad
ArchitectureMonolithicModular, headless
Custom blocksComplexSimple Extension.create() API
TypeScriptPartialFirst-class
FrameworkReact-onlyAny framework

The main shift is from a monolithic editor to Arkpad's modular extension system. Start with the Quick Start guide and refer to the Extension Factory for custom features.