editorjs-antd-renderer

Render Editor.js output data to React components using Ant Design.

Supported Plugins

Plugin	Block type
Paragraph	paragraph
Header	header
List	list
Checklist	checklist
Image	image
SimpleImage	simpleImage
Code	code
Quote	quote
Embed	embed
Attaches	attaches
Math	math
Table	table
Delimiter	delimiter
Warning	warning
Marker	inline
InlineCode	inline

Installation

npm install editorjs-antd-renderer
# or
yarn add editorjs-antd-renderer
# or
bun add editorjs-antd-renderer

Peer dependencies: react, antd

Basic Usage

import Renderer from "editorjs-antd-renderer";

<Renderer data={editorJsOutputData} />

data accepts either an OutputData object or a JSON string.

Props

config

Per-block configuration:

<Renderer
  data={data}
  config={{
    image: {
      urlPrefix: "https://cdn.example.com/", // prepended to image URLs
    },
    attaches: {
      urlPrefix: "https://files.example.com/", // prepended to file URLs
    },
    code: {
      theme: "Dark",        // "Light" (default) | "Dark"
      showLineNumbers: true, // default: true
    },
  }}
/>

blocksProps

Pass additional props to individual block components. Useful for custom styling or event handlers:

<Renderer
  data={data}
  blocksProps={{
    paragraph: { style: { fontSize: 16 } },
    header: { style: { color: "navy" } },
    quote: { style: { borderColor: "gold" } },
    image: { preview: false },
    checklist: { direction: "horizontal" },
    attaches: { buttonPosition: "left" },
  }}
/>

customBlocks

Render unsupported or custom block types:

import type { CustomBlockRenderer } from "editorjs-antd-renderer";

const customBlocks: Record<string, CustomBlockRenderer> = {
  alert: (block) => (
    <div className={`alert alert-${block.data.type}`}>
      {String(block.data.message)}
    </div>
  ),
};

<Renderer data={data} customBlocks={customBlocks} />

TypeScript

All block data types are exported:

import type {
  HeaderData,
  ParagraphData,
  ListData,
  ListItem,
  ListItemMeta,
  ChecklistData,
  ImageData,
  CodeData,
  MathData,
  AttachesData,
  EmbedData,
  QuoteData,
  ImageConfig,
  CodeConfig,
  AttachesConfig,
  CustomBlockRenderer,
} from "editorjs-antd-renderer";