Getting Started

Magicube Editor is designed for easy use and fast setup, yet it's flexible enough to adapt to your needs. This guide assumes you're already familiar with React 19 and either Vite or Next.js. If not, please follow their guides first.
Hello World
First things first—let's install the Magicube Editor package:
npm install @magicube/editor
Next, let's create a basic editor component. For Next.js, ensure your component is declared as a client component since Magicube's editing interface is client-side. The viewer, however, can be server-rendered (SSR), but we will talk about that later.
"use client";

import { Editor, createMagicubeEditor } from "@magicube/editor";
import "@magicube/editor/styles.css";

const editor = createMagicubeEditor();

function SimpleEditor() {
  return <Editor editor={editor} />;
}

export default SimpleEditor;
Don't forget the styles! Now, you should see something like this:
source
hello-world
MagicubeLive ExampleGitHubCode
That's it—you now have a working Magicube Editor. Go ahead, type some paragraphs and see the results. That is a good start, but not so much better than a textarea, right?
In fact, we said that Magicube is Ready To Go. It means that we can easily config and extend its features. What about headings, lists, or code snippets? That's exactly where Magicube's built-in plugins come in. Let's add the Typography Plugins package next.
Why Magicube?Rich Text