Plate
PlateEditorsTemplates
GitHub16kGitHub
DiscordDiscord
  • Introduction
  • Installation
    • Plate UI
      • Next.js
      • React
    • Manual
    • RSC
    • Node.js
    • Local Docs
    • MCP
  • Releases

Manual Installation

PreviousNext

Install and configure Plate in your React project without relying on UI component libraries.

This guide walks you through setting up Plate from scratch, giving you full control over styling and component rendering. This approach is ideal if you're not using a UI library like shadcn/ui or Tailwind CSS.

Create project

This guide uses Vite for the initial project setup. The editor code also works in other React environments; adapt the build configuration to your framework.

To begin with Vite, create a new project and select the React + TypeScript template:

pnpm create vite@latest
pnpm create vite@latest
ReactRSC

On This Page

Create projectInstall PlateTypeScript configurationCreate your first editorAdding basic marksAdding basic elementsHandling editor valueNext steps
Build your editor
Production-ready AI template and reusable components.
Get all-access

Install Plate

Install platejs for the core editor runtime and React components.

pnpm add platejs @tanstack/react-virtual
pnpm add platejs @tanstack/react-virtual

TypeScript configuration

Plate provides ESM packages. If you're using TypeScript, ensure your tsconfig.json is configured correctly. The recommended setup for Plate requires TypeScript 5.0+ with the "moduleResolution": "bundler" setting:

// tsconfig.json
{
  "compilerOptions": {
    // ... other options
    "module": "esnext", // or commonjs if your setup requires it and handles ESM interop
    "moduleResolution": "bundler",
    // ... other options
  },
}
// tsconfig.json
{
  "compilerOptions": {
    // ... other options
    "module": "esnext", // or commonjs if your setup requires it and handles ESM interop
    "moduleResolution": "bundler",
    // ... other options
  },
}

For Node.js module resolution and import troubleshooting, see the TypeScript guide.

Create your first editor

Start by creating a basic editor component. This example sets up a simple editor.

src/App.tsx
import React from 'react';
import type { Value } from 'platejs';
import { EditorRoot, EditorContent, useCreateEditor } from 'platejs/react';
 
export default function App() {
  const editor = useCreateEditor();
 
  return (
    <EditorRoot editor={editor}>
      <EditorContent
        style={{ padding: '16px 64px', minHeight: '100px' }}
        placeholder="Type your amazing content here..."
      />
    </EditorRoot>
  );
}
src/App.tsx
import React from 'react';
import type { Value } from 'platejs';
import { EditorRoot, EditorContent, useCreateEditor } from 'platejs/react';
 
export default function App() {
  const editor = useCreateEditor();
 
  return (
    <EditorRoot editor={editor}>
      <EditorContent
        style={{ padding: '16px 64px', minHeight: '100px' }}
        placeholder="Type your amazing content here..."
      />
    </EditorRoot>
  );
}

useCreateEditor creates a memoized editor instance, ensuring stability across re-renders. For a non-memoized version, use createEditor from platejs/react.

Loading…

At this point, you'll have a very basic editor capable of displaying and editing plain text.

Adding basic marks

Let's add support for basic text formatting like bold, italic, and underline.

The mark plugins are included in the platejs installation:

pnpm add platejs @tanstack/react-virtual
pnpm add platejs @tanstack/react-virtual
src/App.tsx
import React from 'react';
import type { Value } from 'platejs';
 
import {
  BoldPlugin,
  ItalicPlugin,
  UnderlinePlugin,
} from 'platejs/react';
import {
  EditorRoot,
  EditorContent,
  useCreateEditor,
} from 'platejs/react';
 
const initialValue: Value = [
  {
    type: 'paragraph',
    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 = useCreateEditor({
    plugins: [BoldPlugin, ItalicPlugin, UnderlinePlugin],
    initialValue,
  });
 
  return (
    <EditorRoot editor={editor}>
      {/* You would typically add a toolbar here to toggle marks */}
      <EditorContent style={{ padding: '16px 64px', minHeight: '100px' }} />
    </EditorRoot>
  );
}
src/App.tsx
import React from 'react';
import type { Value } from 'platejs';
 
import {
  BoldPlugin,
  ItalicPlugin,
  UnderlinePlugin,
} from 'platejs/react';
import {
  EditorRoot,
  EditorContent,
  useCreateEditor,
} from 'platejs/react';
 
const initialValue: Value = [
  {
    type: 'paragraph',
    children: [
      { text: 'Hello! Try out the ' },
      { text: 'bold', bold: true
Default Components

Mark plugins like BoldPlugin, ItalicPlugin, and UnderlinePlugin come with default components that render as <strong>, <em>, and <u> elements respectively. You don't need to register custom components unless you want to customize their appearance.

Loading…

You'll need to implement your own toolbar to apply these marks. For example, to toggle bold: editor.update.bold.toggle().

Adding basic elements

Now, let's add support for block-level elements like headings, and blockquotes.

src/App.tsx
import React from 'react';
import type { Value } from 'platejs';
 
import {
  BlockquotePlugin,
  BoldPlugin,
  HeadingPlugin,
  
  
  ItalicPlugin,
  UnderlinePlugin,
} from 'platejs/react';
import {
  EditorRoot,
  EditorContent,
  EditorElement,
  useCreateEditor,
  type EditorElementProps,
} from 'platejs/react';
 
const initialValue: Value = [
  {
    children: [{ text: 'Title' }],
    type: 'heading', level: 3,
  },
  {
    children: [
      {
        children: [{ text: 'This is a quote.' }],
        type: 'paragraph',
      },
    ],
    type: 'blockquote',
  },
  {
    children: [
      { text: 'With some ' },
      { bold: true, text: 'bold' },
      { text: ' text for emphasis!' },
    ],
    type: 'paragraph',
  },
];
 
// Define element components
function HeadingElement(props: EditorElementProps<typeof HeadingPlugin>) {
  const tag = `h${props.element.level}` as const;
 
  return <EditorElement as={tag} {...props} />;
}
 
function BlockquoteElement(props: EditorElementProps<typeof BlockquotePlugin>) {
  return (
    <EditorElement
      as="blockquote"
      style={{
        borderLeft: '2px solid #eee',
        marginLeft: 0,
        marginRight: 0,
        paddingLeft: '24px',
        color: '#666',
        fontStyle: 'italic',
      }}
      {...props}
    />
  );
}
 
export default function App() {
  const editor = useCreateEditor({
    plugins: [
      BoldPlugin,
      ItalicPlugin,
      UnderlinePlugin,
      HeadingPlugin.configure({ component: HeadingElement }),
      BlockquotePlugin.configure({ component: BlockquoteElement }),
    ],
    initialValue,
  });
 
  return (
    <EditorRoot editor={editor}>
      {/* You would typically add a toolbar here to toggle elements and marks */}
      <EditorContent style={{ padding: '16px 64px', minHeight: '100px' }} />
    </EditorRoot>
  );
}
src/App.tsx
import React from 'react';
import type { Value } from 'platejs';
 
import {
  BlockquotePlugin,
  BoldPlugin,
  HeadingPlugin,
  
  
  ItalicPlugin,
  UnderlinePlugin,
} from 'platejs/react';
import {
  EditorRoot,
  EditorContent,
  EditorElement,
  useCreateEditor,
  type EditorElementProps,
} from 'platejs/react';
 
const initialValue: Value = [
  {
    children: [{ text:

Notice how we use Plugin.configure({ component: Component }) to register components with block element plugins like headings and blockquotes. This is the recommended approach for associating React components with Plate plugins when you need custom styling or behavior.

Loading…

Handling editor value

To make the editor's content persistent, let's integrate state management to save and load the editor's value.

src/App.tsx
import React from 'react';
import type { Value } from 'platejs';
 
import {
  BlockquotePlugin,
  BoldPlugin,
  HeadingPlugin,
  
  
  ItalicPlugin,
  UnderlinePlugin,
} from 'platejs/react';
import {
  EditorRoot,
  EditorContent,
  EditorElement,
  useCreateEditor,
  type EditorElementProps,
} from 'platejs/react';
 
const initialValue: Value = [
  {
    children: [{ text: 'Title' }],
    type: 'heading', level: 3,
  },
  {
    children: [
      {
        children: [{ text: 'This is a quote.' }],
        type: 'paragraph',
      },
    ],
    type: 'blockquote',
  },
  {
    children: [
      { text: 'With some ' },
      { bold: true, text: 'bold' },
      { text: ' text for emphasis!' },
    ],
    type: 'paragraph',
  },
];
 
// Define element components
function HeadingElement(props: EditorElementProps<typeof HeadingPlugin>) {
  const tag = `h${props.element.level}` as const;
 
  return <EditorElement as={tag} {...props} />;
}
 
function BlockquoteElement(props: EditorElementProps<typeof BlockquotePlugin>) {
  return (
    <EditorElement
      as="blockquote"
      style={{
        borderLeft: '2px solid #eee',
        marginLeft: 0,
        marginRight: 0,
        paddingLeft: '24px',
        color: '#666',
        fontStyle: 'italic',
      }}
      {...props}
    />
  );
}
 
export default function App() {
  const editor = useCreateEditor({
    plugins: [
      BoldPlugin,
      ItalicPlugin,
      UnderlinePlugin,
      HeadingPlugin.configure({ component: HeadingElement }),
      BlockquotePlugin.configure({ component: BlockquoteElement }),
    ],
    initialValue: () => {
      const savedValue = localStorage.getItem('plate-manual-demo');
      return savedValue ? JSON.parse(savedValue) : initialValue;
    },
  });
 
  return (
    <EditorRoot
      editor={editor}
      onValueChange={({ value }) => {
        localStorage.setItem('plate-manual-demo', JSON.stringify(value));
      }}
    >
      {/* Toolbar would go here */}
      <div style={{ padding: '8px 0' }}>
        <button
          onClick={() => {
            editor.update((tx) => {
              tx.value.replace({ children: initialValue });
            });
          }}
          style={{
            padding: '4px 8px',
            margin: '0 4px',
            border: '1px solid #ccc',
            borderRadius: '4px',
            cursor: 'pointer',
          }}
        >
          Reset
        </button>
      </div>
      <EditorContent
        style={{
          padding: '16px 64px',
          minHeight: '100px',
          border: '1px solid #eee',
          borderRadius: '4px',
        }}
        placeholder="Type your amazing content here..."
      />
    </EditorRoot>
  );
}
src/App.tsx
import React from 'react';
import type { Value } from 'platejs';
 
import {
  BlockquotePlugin,
  BoldPlugin,
  HeadingPlugin,
  
  
  ItalicPlugin,
  UnderlinePlugin,
} from 'platejs/react';
import {
  EditorRoot,
  EditorContent,
  EditorElement,
  useCreateEditor,
  type EditorElementProps,
} from 'platejs/react';
 
const initialValue: Value = [
  {
    children: [{ text: 'Title'
Value Management

The example above demonstrates a basic pattern for managing editor value:

  • Initial value is set through the initialValue option in useCreateEditor
  • Value changes can be handled via the onValueChange prop on <EditorRoot>
  • The reset button uses editor.update(...) with tx.value.replace(...) to restore the initial value
  • To control the value, see Controlled Value
Loading…

Next steps

You've now set up a basic Plate editor manually! From here, you can:

  • Add Styling:
    • For a quick start with pre-built components, consider using Plate UI
    • Or continue styling manually using CSS, CSS-in-JS libraries, or your preferred styling solution
  • Add Plugins: Plate has a rich ecosystem of plugins for features like tables, mentions, images, lists, and more. Install their packages (e.g., platejs) and add them to your plugins array.
  • Build a Toolbar: Create React components for toolbar buttons that use the Editor Transforms to apply formatting (e.g., editor.update.bold.toggle(), editor.plugin(HeadingPlugin).update.toggle({ level: 1 })). You can also use the editor state with the Editor API.
  • Learn More:
    • Editor Configuration
    • Plugin Configuration
    • Plugin Components
},
{ text: ', ' },
{ text: 'italic', italic: true },
{ text: ', and ' },
{ text: 'underline', underline: true },
{ text: ' formatting.' },
],
},
];
export default function App() {
const editor = useCreateEditor({
plugins: [BoldPlugin, ItalicPlugin, UnderlinePlugin],
initialValue,
});
return (
<EditorRoot editor={editor}>
{/* You would typically add a toolbar here to toggle marks */}
<EditorContent style={{ padding: '16px 64px', minHeight: '100px' }} />
</EditorRoot>
);
}
'Title'
}],
type: 'heading', level: 3,
},
{
children: [
{
children: [{ text: 'This is a quote.' }],
type: 'paragraph',
},
],
type: 'blockquote',
},
{
children: [
{ text: 'With some ' },
{ bold: true, text: 'bold' },
{ text: ' text for emphasis!' },
],
type: 'paragraph',
},
];
// Define element components
function HeadingElement(props: EditorElementProps<typeof HeadingPlugin>) {
const tag = `h${props.element.level}` as const;
return <EditorElement as={tag} {...props} />;
}
function BlockquoteElement(props: EditorElementProps<typeof BlockquotePlugin>) {
return (
<EditorElement
as="blockquote"
style={{
borderLeft: '2px solid #eee',
marginLeft: 0,
marginRight: 0,
paddingLeft: '24px',
color: '#666',
fontStyle: 'italic',
}}
{...props}
/>
);
}
export default function App() {
const editor = useCreateEditor({
plugins: [
BoldPlugin,
ItalicPlugin,
UnderlinePlugin,
HeadingPlugin.configure({ component: HeadingElement }),
BlockquotePlugin.configure({ component: BlockquoteElement }),
],
initialValue,
});
return (
<EditorRoot editor={editor}>
{/* You would typically add a toolbar here to toggle elements and marks */}
<EditorContent style={{ padding: '16px 64px', minHeight: '100px' }} />
</EditorRoot>
);
}
}],
type: 'heading', level: 3,
},
{
children: [
{
children: [{ text: 'This is a quote.' }],
type: 'paragraph',
},
],
type: 'blockquote',
},
{
children: [
{ text: 'With some ' },
{ bold: true, text: 'bold' },
{ text: ' text for emphasis!' },
],
type: 'paragraph',
},
];
// Define element components
function HeadingElement(props: EditorElementProps<typeof HeadingPlugin>) {
const tag = `h${props.element.level}` as const;
return <EditorElement as={tag} {...props} />;
}
function BlockquoteElement(props: EditorElementProps<typeof BlockquotePlugin>) {
return (
<EditorElement
as="blockquote"
style={{
borderLeft: '2px solid #eee',
marginLeft: 0,
marginRight: 0,
paddingLeft: '24px',
color: '#666',
fontStyle: 'italic',
}}
{...props}
/>
);
}
export default function App() {
const editor = useCreateEditor({
plugins: [
BoldPlugin,
ItalicPlugin,
UnderlinePlugin,
HeadingPlugin.configure({ component: HeadingElement }),
BlockquotePlugin.configure({ component: BlockquoteElement }),
],
initialValue: () => {
const savedValue = localStorage.getItem('plate-manual-demo');
return savedValue ? JSON.parse(savedValue) : initialValue;
},
});
return (
<EditorRoot
editor={editor}
onValueChange={({ value }) => {
localStorage.setItem('plate-manual-demo', JSON.stringify(value));
}}
>
{/* Toolbar would go here */}
<div style={{ padding: '8px 0' }}>
<button
onClick={() => {
editor.update((tx) => {
tx.value.replace({ children: initialValue });
});
}}
style={{
padding: '4px 8px',
margin: '0 4px',
border: '1px solid #ccc',
borderRadius: '4px',
cursor: 'pointer',
}}
>
Reset
</button>
</div>
<EditorContent
style={{
padding: '16px 64px',
minHeight: '100px',
border: '1px solid #eee',
borderRadius: '4px',
}}
placeholder="Type your amazing content here..."
/>
</EditorRoot>
);
}