{"id":11563,"library":"platejs","title":"Plate.js Rich Text Editor Framework","description":"Plate.js is a comprehensive framework for building rich text editors on the web, leveraging the power and flexibility of Slate.js. It provides a highly extensible, plugin-based architecture that simplifies the development of complex editor features, from basic formatting to advanced elements like tables, images, and AI integrations. The current stable version is 52.3.21, with frequent patch releases (often daily) indicating active development. Plate.js differentiates itself through its extensive collection of pre-built plugins, robust TypeScript support, and a focus on abstracting away much of the underlying Slate complexity, allowing developers to quickly assemble sophisticated editor experiences without deep knowledge of Slate's internal workings. It aims to reduce boilerplate and offer a batteries-included approach for common rich text editor functionalities.","status":"active","version":"52.3.21","language":"javascript","source_language":"en","source_url":"https://github.com/udecode/plate","tags":["javascript","contentEditable","editor","framework","html","plate","plugin","rich text","slate","typescript"],"install":[{"cmd":"npm install platejs","lang":"bash","label":"npm"},{"cmd":"yarn add platejs","lang":"bash","label":"yarn"},{"cmd":"pnpm add platejs","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for rendering the editor UI and managing component state.","package":"react","optional":false},{"reason":"Required for rendering the React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"The main Plate component is typically imported from `@platejs/react`, not the root `platejs` package directly.","wrong":"import Plate from 'platejs'; // CommonJS default import is often wrong for modern libs","symbol":"Plate","correct":"import { Plate } from '@platejs/react';"},{"note":"Core utilities for editor creation are found in `@platejs/core`.","wrong":"import { createPlateEditor } from 'platejs';","symbol":"createPlateEditor","correct":"import { createPlateEditor } from '@platejs/core';"},{"note":"Most plugins are imported from their own dedicated `@platejs/*` packages for better tree-shaking and modularity.","wrong":"import { createParagraphPlugin } from 'platejs/plugins';","symbol":"createParagraphPlugin","correct":"import { createParagraphPlugin } from '@platejs/paragraph';"},{"note":"React-specific hooks like `useEditorRef` are part of `@platejs/react`.","wrong":"import { useEditorRef } from '@platejs/core';","symbol":"useEditorRef","correct":"import { useEditorRef } from '@platejs/react';"}],"quickstart":{"code":"import React, { useMemo } from 'react';\nimport { createPlateEditor } from '@platejs/core';\nimport { Plate, usePlateEditorRef, PlateContent } from '@platejs/react';\nimport { createParagraphPlugin } from '@platejs/paragraph';\nimport { createBasicElementsPlugin } from '@platejs/elements';\nimport { createAlignPlugin } from '@platejs/alignment';\nimport { createBoldPlugin, createItalicPlugin } from '@platejs/basic-marks';\n\nconst initialValue = [\n  { type: 'p', children: [{ text: 'Hello, Plate.js!' }] },\n  { type: 'p', children: [{ text: 'Start typing here...' }] },\n];\n\nfunction MyEditor() {\n  const plugins = useMemo(\n    () => [\n      createParagraphPlugin(),\n      createBasicElementsPlugin(),\n      createAlignPlugin({ options: { align: 'left' } }),\n      createBoldPlugin(),\n      createItalicPlugin(),\n    ],\n    []\n  );\n\n  const editor = useMemo(() => createPlateEditor(), []);\n\n  return (\n    <Plate editor={editor} plugins={plugins} initialValue={initialValue}>\n      <PlateContent\n        className=\"p-4 min-h-[200px] border border-gray-300 rounded-md\"\n        placeholder=\"Type something...\"\n      />\n    </Plate>\n  );\n}\n\nexport default MyEditor;\n","lang":"typescript","description":"This quickstart initializes a basic Plate.js editor with paragraph, basic elements, alignment, and basic mark plugins (bold, italic). It demonstrates the minimal setup for a functional editor component."},"warnings":[{"fix":"Always consult the official Plate.js and Slate.js migration guides before upgrading major versions. Pin exact versions in `package.json` to prevent unexpected breaks.","message":"Plate.js is built on Slate.js, which has a rapidly evolving API. Major version updates (e.g., Slate v0.50 to v0.60, or v0.80 to v0.90) often introduce significant breaking changes in Slate's core data model, API, and internal architecture. Plate.js generally follows Slate's versioning closely, meaning upgrades can require substantial code refactoring.","severity":"breaking","affected_versions":">=1.0.0 (any major version upgrade)"},{"fix":"Implement debouncing for onChange handlers, optimize custom renderers for memoization, virtualize long lists of elements, and consider splitting very large documents into smaller, manageable chunks.","message":"Performance can degrade significantly with very large documents or complex nested structures due to the nature of `contentEditable` and the extensive DOM manipulation required. Deeply nested components or custom renderers that re-render frequently can exacerbate this.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Migrate to the modern `createPlateEditor` and `plugins` array pattern. Review updated plugin options and hooks, as many legacy APIs have been removed or replaced. Consult the official migration guides for specific version jumps.","message":"Prior to Plate.js v15 (which aligned with Slate 0.90+), the plugin structure and editor initialization patterns differed significantly. Direct manipulation of the Slate editor object (`editor`) was more common, whereas newer versions emphasize a more declarative, plugin-driven approach.","severity":"breaking","affected_versions":"<15.0.0"},{"fix":"When creating custom plugins, leverage Plate's `createPluginFactory` and the plugin lifecycle hooks. Access the underlying Slate editor instance via `editor.slate` when necessary, but prefer Plate's utility functions where available.","message":"Integrating custom plugins or complex features that heavily rely on direct Slate API interaction can be challenging. Plate.js aims to abstract Slate, but sometimes direct Slate knowledge is needed, potentially leading to conflicts with Plate's abstractions.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure that any component using Plate-specific hooks is a child of a `<Plate>` component and that the `editor` prop is correctly provided to `<Plate>`.","cause":"Attempting to use Plate hooks (e.g., `useEditorRef`, `usePlateEditor`) outside of a `<Plate>` component's render tree, or before the `editor` prop is passed to `<Plate>`.","error":"Error: `editor` object is not defined in the context. Make sure you are rendering `Plate`."},{"fix":"Validate your `initialValue` and any programmatically inserted nodes against Slate's schema. Ensure all nodes have the correct structure: text nodes must have a `text` property, and element nodes must have a `children` array.","cause":"This is a common Slate error indicating that the editor's `value` (the document state) is malformed, specifically, a node is missing its `children` array or `text` property, or a block node is directly followed by a text node without an intervening inline node.","error":"Cannot read properties of undefined (reading 'children')"},{"fix":"Verify that your `react` and `react-dom` versions satisfy Plate.js's peer dependency requirements (e.g., `>=18.0.0` for recent Plate versions). Use `npm ls react` or `yarn why react` to inspect your dependency tree.","cause":"Mismatch between React versions required by Plate.js (and its peer dependencies) and the React version installed in your project.","error":"Invariant Violation: Minified React error #XXX; visit https://reactjs.org/docs/error-decoder.html?invariant=XXX for the full message."}],"ecosystem":"npm"}