Displaying Content

Magicube Editor is a live editor, which means you immediately see exactly how your content will appear while editing. However, editing and viewing are usually two distinct stages in the lifecycle of any content.
Magicube outputs your content as structured JSON, giving you complete freedom to decide how to present it to your users. This structured format enables various custom viewing strategies like API consumption, template engines or other frontend frameworks.
Built-in Magicube Viewer
While editing and viewing are distinct aspects of content, they usually go hand in hand. That’s why Magicube provides a built-in Viewer component for React applications—so you can render documents with the same consistency and structure used during editing.
The Magicube Vieweris a dedicated viewing component optimized specifically for content presentation:
  • Built with React, ensuring consistent integration with your React applications.
  • Server-Side Rendering (SSR) compatible, improving SEO and performance.
In fact, this documentation you're reading now is built using Magicube Editor and displayed using its Viewer. Try disabling JavaScript—the content remains fully visible!
Implementing the Viewer
Here's a simple example demonstrating how to present your content using Magicube’s built-in viewer component, DocumentView. There's no need for additional installations but the ones you made in the previous sections:
import { createMagicubeViewer, Viewer } from "@magicube/editor";
import { makeBlocks, makeMarks } from "@magicube/editor-typography-plugins";

const viewer = createMagicubeViewer({
  plugins: {
    blocks: makeBlocks(),
    marks: makeMarks(),
  }, // same plugins you use in the editor counterpart 
});
const document = { /* JSON content generated by Magicube Editor */ };

function ViewerComponent() {
  return <Viewer document={document} viewer={viewer} />
}

export default ViewerComponent;
Great! Now we are capable of both editing and displaying our rich text content. Next section we are going to explore other built-in block solutions.
Rich TextImage