Rich Text

Last section, we covered how to install Magicube and spin up your very first editor instance. But so far, it only supports plain text paragraphs — great for a start, but we can do much more. In this section, we’ll explore how to bring your content to life with rich text capabilities. No extra wiring needed — Magicube comes with the batteries included.
Getting Rich - Typography Plugins
Typography Plugins is a set of plugins providing common content blocks and rich text formatting. With this package, you'll quickly have a fully featured block editor. It includes:
Blocks
  • Heading 1
  • Heading 2
  • Heading 3
  • Code
  • Ordered List
  • Unordered List
  • Toggle List
  • Todo List
Marks
  • Italic
  • Bold
  • Underline
  • Strikethrough
  • Code
    • Installing Typography Plugins is straightforward:
npm install @magicube/editor-typography-plugins
Now, let's integrate these plugins into your editor component:
"use client";

import { Editor, createMagicubeEditor } from "@magicube/editor";
import { makeBlocks, makeMarks } from "@magicube/editor-typography-plugins";

import "@magicube/editor/styles.css";
import "@magicube/editor-typography-plugins/styles.css";

const editor = createMagicubeEditor({
  plugins: {
    blocks: makeBlocks(),
    marks: makeMarks(),
  },
});

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

export default TypographyEditor;
That's all! Now, your editor is ready with an extensive set of formatting options and blocks. Try it out—add headings, lists, or some styled text. Magicube has sensible shortcuts like # for headings or - for lists, making editing smooth and intuitive.
typegraphy-plugins
MagicubeLive ExampleGitHubCode
With these plugins, you're already equipped with the most common use-case blocks, aligning with our "Ready to Go" principle.
But Magicube can do even more. You can add other built in blocks such as image, equations, or highlighting code snippets easily. The plugin-based architecture ensures Magicube is fully adaptable, so creating custom content and extending the editor is straightforward.
Next, we'll see how to present content in a read-only mode and learn how to connect content creation and content delivery.
Getting StartedDisplaying Content