{"library":"slate","title":"Slate: Customizable Rich Text Editor Framework","description":"Slate is a unopinionated and completely customizable framework for building rich text editors, providing a foundational set of primitives rather than a monolithic solution. It allows developers to create bespoke editing experiences by composing plugins and extending its core data model. Currently at version `0.124.1` (core `slate` package), it maintains an active development pace with frequent patch and minor releases across its monorepo packages (e.g., `slate-react`, `slate-history`, `slate-dom`). Key differentiators include its pluggable architecture, a robust data model representing content as a nested tree, and deep integration with React for rendering. This approach enables it to be adapted for a wide range of applications, from simple note-taking to complex document authoring systems, by avoiding prescriptive UI/UX decisions.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install slate"],"cli":null},"imports":["import { createEditor } from 'slate';","import { Slate, Editable, withReact } from 'slate-react';","import { Descendant, Editor, Element, Text } from 'slate';","import { withHistory } from 'slate-history';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useMemo, useState } from 'react';\nimport { createEditor, Descendant } from 'slate';\nimport { Slate, Editable, withReact, ReactEditor } from 'slate-react';\nimport { withHistory } from 'slate-history';\n\n// Define our custom editor and element types for TypeScript to enable type safety\ntype CustomEditor = ReactEditor;\ntype ParagraphElement = { type: 'paragraph'; children: CustomText[] };\ntype CustomText = { text: string; bold?: boolean; italic?: boolean };\n\ndeclare module 'slate' {\n  interface CustomTypes {\n    Editor: CustomEditor;\n    Element: ParagraphElement;\n    Text: CustomText;\n  }\n}\n\nconst initialValue: Descendant[] = [\n  {\n    type: 'paragraph',\n    children: [{ text: 'Hello, Slate!' }],\n  },\n  {\n    type: 'paragraph',\n    children: [{ text: 'This is some ' }, { text: 'bold', bold: true }, { text: ' text.' }],\n  },\n];\n\nconst MySimpleEditor = () => {\n  // Create a Slate editor object that won't change across renders.\n  // It's enhanced with React capabilities and history (undo/redo).\n  const editor = useMemo(() => withHistory(withReact(createEditor())), []);\n  const [value, setValue] = useState<Descendant[]>(initialValue);\n\n  return (\n    <Slate editor={editor} value={value} onChange={setValue}>\n      <Editable\n        placeholder=\"Start typing...\"\n        // Define a rendering function for elements\n        renderElement={props => <p {...props.attributes}>{props.children}</p>}\n        // Define a rendering function for leaf nodes (text with formatting)\n        renderLeaf={props => {\n          let children = props.children;\n          if (props.leaf.bold) children = <strong>{children}</strong>;\n          if (props.leaf.italic) children = <em>{children}</em>;\n          return <span {...props.attributes}>{children}</span>;\n        }}\n        style={{ border: '1px solid #ccc', padding: '10px', minHeight: '100px' }}\n      />\n    </Slate>\n  );\n};\n\nexport default MySimpleEditor;\n","lang":"typescript","description":"This quickstart demonstrates how to set up a basic Slate editor with React and TypeScript, including custom type definitions and simple bold text rendering. It shows the initialization of the editor with `createEditor`, `withReact`, and `withHistory`, and then renders it using the `Slate` provider and `Editable` component.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}