Playground

Experiment with Arkpad's editor right here. Edit the content, switch extensions, and see how it behaves in real-time.

Basic Editor

A minimal editor with the Essentials bundle:

Editor with Toolbar

A full-featured editor with formatting controls:

Full StarterKit Example

The complete StarterKit with all available extensions:

Try Your Own Content

Here's a blank editor ready for you to experiment:

Code Example

Here's the code used to create the basic editor above:

import { useArkpadEditor, ArkpadEditorContent } from "@arkpad/react";
import { Essentials } from "@arkpad/core";

function MyEditor() {
  const editor = useArkpadEditor({
    extensions: [Essentials],
    content: "<h1>Hello, Arkpad!</h1>",
  });

  return <ArkpadEditorContent editor={editor} />;
}