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:T2a6e,--- title: Next.js description: Install and configure Plate UI for Next.js --- Before you begin, ensure you have installed and configured [shadcn/ui](https://ui.shadcn.com/docs/installation/next) and [Plate UI](/docs/installation/plate-ui). This guide walks you through incrementally building a Plate editor in your Next.js application. ### 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 page. This example sets up a simple editor within an `EditorContainer`. ```tsx showLineNumbers title="app/editor/page.tsx" 'use client'; import { Plate, usePlateEditor } from 'platejs/react'; import { Editor, EditorContainer } from '@/components/ui/editor'; export default function MyEditorPage() { 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 editor page to include these components and the basic mark plugins. This example adds bold, italic, and underline functionality. ```tsx showLineNumbers title="app/editor/page.tsx" {4,6-10,17-18,20-33,37-38,43-47} 'use client'; 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 MyEditorPage() { 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="app/editor/page.tsx" {7,9-11,20,23,25,28-35,52-55,63-67} 'use client'; 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 MyEditorPage() { 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 client-side. ```tsx showLineNumbers title="app/editor/page.tsx" {57-60,66-68,78-84} 'use client'; 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 MyEditorPage() { 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-next-demo'); return savedValue ? JSON.parse(savedValue) : initialValue; }, }); return ( { localStorage.setItem('installation-next-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 Next.js. To further enhance your editor: * **Explore Components:** Discover [Toolbars, Menus, Node components](/docs/components), and more. * **Add Plugins:** Integrate features like [Tables](/docs/table), [Mentions](/docs/mention), [AI](/docs/ai), or [Markdown](/docs/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/next.mdx","content":"$50","type":"registry:file","target":"content/docs/plate/installation/next.mdx"}],"className":"h-[70svh] min-h-80"}]]}]