4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T2a4b,--- title: React description: Install and configure Plate UI for React --- Before you begin, ensure you have installed and configured [shadcn/ui](https://ui.shadcn.com/docs/installation) (adapted for your framework, e.g., Vite) and [Plate UI](/docs/installation/plate-ui). This guide walks you through incrementally building a Plate editor in your project. ### Create Your First Editor Start by adding the core [Editor](/docs/components/editor) component to your project: ```bash npx shadcn@latest add @plate/editor ``` Next, create a basic editor in your main application file (e.g. `src/App.tsx`). This example sets up a simple editor within an `EditorContainer`. ```tsx showLineNumbers title="src/App.tsx" import { Plate, usePlateEditor } from 'platejs/react'; import { Editor, EditorContainer } from '@/components/ui/editor'; export default function App() { const editor = usePlateEditor(); // Initializes the editor instance return ( {/* Provides editor context */} {/* Styles the editor area */} ); } ``` `usePlateEditor` creates a memoized editor instance, ensuring stability across re-renders. For a non-memoized version, use `createPlateEditor`. ### Adding Basic Marks Enhance your editor with text formatting. Add the **Basic Nodes Kit**, [FixedToolbar](/docs/components/fixed-toolbar) and [MarkToolbarButton](/docs/components/mark-toolbar-button) components: ```bash npx shadcn@latest add @plate/basic-nodes-kit @plate/fixed-toolbar @plate/mark-toolbar-button ``` The `basic-nodes-kit` includes all the basic plugins (bold, italic, underline, headings, blockquotes, etc.) and their components that we'll use in the following steps. Update your `src/App.tsx` to include these components and the basic mark plugins. This example adds bold, italic, and underline functionality. ```tsx showLineNumbers title="src/App.tsx" {2,4-8,15-16,18-31,35-36,41-45} import * as React from 'react'; import type { Value } from 'platejs'; import { BoldPlugin, ItalicPlugin, UnderlinePlugin, } from '@platejs/basic-nodes/react'; import { Plate, usePlateEditor, } from 'platejs/react'; import { Editor, EditorContainer } from '@/components/ui/editor'; import { FixedToolbar } from '@/components/ui/fixed-toolbar'; import { MarkToolbarButton } from '@/components/ui/mark-toolbar-button'; const initialValue: Value = [ { type: 'p', children: [ { text: 'Hello! Try out the ' }, { text: 'bold', bold: true }, { text: ', ' }, { text: 'italic', italic: true }, { text: ', and ' }, { text: 'underline', underline: true }, { text: ' formatting.' }, ], }, ]; export default function App() { const editor = usePlateEditor({ plugins: [BoldPlugin, ItalicPlugin, UnderlinePlugin], // Add the mark plugins value: initialValue, // Set initial content }); return ( B I U ); } ``` ### Adding Basic Elements Introduce block-level elements like headings and blockquotes with custom components. ```tsx showLineNumbers title="src/App.tsx" {5,7-9,18,21,23,26-33,50-53,61-65} import * as React from 'react'; import type { Value } from 'platejs'; import { BlockquotePlugin, BoldPlugin, H1Plugin, H2Plugin, H3Plugin, ItalicPlugin, UnderlinePlugin, } from '@platejs/basic-nodes/react'; import { Plate, usePlateEditor, } from 'platejs/react'; import { BlockquoteElement } from '@/components/ui/blockquote-node'; import { Editor, EditorContainer } from '@/components/ui/editor'; import { FixedToolbar } from '@/components/ui/fixed-toolbar'; import { H1Element, H2Element, H3Element } from '@/components/ui/heading-node'; import { MarkToolbarButton } from '@/components/ui/mark-toolbar-button'; import { ToolbarButton } from '@/components/ui/toolbar'; // Generic toolbar button const initialValue: Value = [ { children: [{ text: 'Title' }], type: 'h3', }, { children: [ { children: [{ text: 'This is a quote.' }], type: 'p', }, ], type: 'blockquote', }, { children: [ { text: 'With some ' }, { bold: true, text: 'bold' }, { text: ' text for emphasis!' }, ], type: 'p', }, ]; export default function App() { const editor = usePlateEditor({ plugins: [ BoldPlugin, ItalicPlugin, UnderlinePlugin, H1Plugin.withComponent(H1Element), H2Plugin.withComponent(H2Element), H3Plugin.withComponent(H3Element), BlockquotePlugin.withComponent(BlockquoteElement), ], value: initialValue, }); return ( {/* Element Toolbar Buttons */} editor.tf.h1.toggle()}>H1 editor.tf.h2.toggle()}>H2 editor.tf.h3.toggle()}>H3 editor.tf.blockquote.toggle()}>Quote {/* Mark Toolbar Buttons */} B I U ); } ``` Notice how we use `Plugin.withComponent(Component)` to register components with their respective plugins. This is the recommended approach for associating React components with Plate plugins. For a quicker start with common plugins and components pre-configured, use the `editor-basic` block: ```bash npx shadcn@latest add @plate/editor-basic ``` This handles much of the boilerplate for you. ### Handling Editor Value To make the editor content persistent, let's integrate `localStorage` to save and load the editor's value. ```tsx showLineNumbers title="src/App.tsx" {55-58,64-66,76-82} import * as React from 'react'; import type { Value } from 'platejs'; import { BlockquotePlugin, BoldPlugin, H1Plugin, H2Plugin, H3Plugin, ItalicPlugin, UnderlinePlugin, } from '@platejs/basic-nodes/react'; import { Plate, usePlateEditor, } from 'platejs/react'; import { BlockquoteElement } from '@/components/ui/blockquote-node'; import { Editor, EditorContainer } from '@/components/ui/editor'; import { FixedToolbar } from '@/components/ui/fixed-toolbar'; import { H1Element, H2Element, H3Element } from '@/components/ui/heading-node'; import { MarkToolbarButton } from '@/components/ui/mark-toolbar-button'; import { ToolbarButton } from '@/components/ui/toolbar'; const initialValue: Value = [ { children: [{ text: 'Title' }], type: 'h3', }, { children: [ { children: [{ text: 'This is a quote.' }], type: 'p', }, ], type: 'blockquote', }, { children: [ { text: 'With some ' }, { bold: true, text: 'bold' }, { text: ' text for emphasis!' }, ], type: 'p', }, ]; export default function App() { const editor = usePlateEditor({ plugins: [ BoldPlugin, ItalicPlugin, UnderlinePlugin, H1Plugin.withComponent(H1Element), H2Plugin.withComponent(H2Element), H3Plugin.withComponent(H3Element), BlockquotePlugin.withComponent(BlockquoteElement), ], value: () => { const savedValue = localStorage.getItem('installation-react-demo'); return savedValue ? JSON.parse(savedValue) : initialValue; }, }); return ( { localStorage.setItem('installation-react-demo', JSON.stringify(value)); }} > editor.tf.h1.toggle()}>H1 editor.tf.h2.toggle()}>H2 editor.tf.h3.toggle()}>H3 editor.tf.blockquote.toggle()}>Quote B I U

editor.tf.setValue(initialValue)} > Reset ); } ``` ### Next Steps Congratulations! You've built a foundational Plate editor in your project. To further enhance your editor: * **Explore Components:** Discover [Toolbars, Menus, Node components](/docs/components), and more. * **Add Plugins:** Integrate features like [Tables](/docs/plugins/table), [Mentions](/docs/plugins/mention), [AI](/docs/plugins/ai), or [Markdown](/docs/plugins/markdown). * **Use Editor Blocks:** Quickly set up pre-configured editors: * Basic editor: `npx shadcn@latest add @plate/editor-basic` * AI-powered editor: `npx shadcn@latest add @plate/editor-ai` * **Learn More:** * [Editor Configuration](/docs/editor) * [Plugin Configuration](/docs/plugin) * [Plugin Components](/docs/plugin-components) 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4f",null,{"files":[{"path":"../../content/docs/installation/react.mdx","content":"$50","type":"registry:file","target":"content/docs/plate/installation/react.mdx"}],"className":"h-[70svh] min-h-80"}]]}]