{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install platejs"],"cli":null},"imports":["import { Plate } from '@platejs/react';","import { createPlateEditor } from '@platejs/core';","import { createParagraphPlugin } from '@platejs/paragraph';","import { useEditorRef } from '@platejs/react';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}