āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/udecode/plate/installation/manual ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
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.
<Steps>To begin with Vite, create a new project and select the React + TypeScript template:
npm create vite@latest
First, install the necessary Plate packages. These packages provide the core editor functionality, React integration, and basic plugins for marks and elements.
npm install platejs @platejs/basic-nodes
platejs: The core Plate engine and React components.@platejs/basic-nodes: Plugin for basic nodes like headings, bold, italic, underline, etc.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
},
}
Start by creating a basic editor component. This example sets up a simple editor.
import React from 'react';
import type { Value } from 'platejs';
import { Plate, PlateContent, usePlateEditor } from 'platejs/react';
export default function App() {
const editor = usePlateEditor();
return (
<Plate editor={editor}>
<PlateContent
style={{ padding: '16px 64px', minHeight: '100px' }}
placeholder="Type your amazing content here..."
/>
</Plate>
);
}
At this point, you'll have a very basic editor capable of displaying and editing plain text.
Let's add support for basic text formatting like bold, italic, and underline.
import React from 'react';
import type { Value } from 'platejs';
import {
BoldPlugin,
ItalicPlugin,
UnderlinePlugin,
} from '@platejs/basic-nodes/react';
import {
Plate,
PlateContent,
usePlateEditor,
} from 'platejs/react';
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],
value: initialValue,
});
return (
<Plate editor={editor}>
{/* You would typically add a toolbar here to toggle marks */}
<PlateContent style={{ padding: '16px 64px', minHeight: '100px' }} />
</Plate>
);
}
You'll need to implement your own toolbar to apply these marks. For example, to toggle bold: editor.tf.bold.toggle().
Now, let's add support for block-level elements like headings, and blockquotes.
import React from 'react';
import type { Value } from 'platejs';
import {
BlockquotePlugin,
BoldPlugin,
H1Plugin,
H2Plugin,
H3Plugin,
ItalicPlugin,
UnderlinePlugin,
} from '@platejs/basic-nodes/react';
import {
Plate,
PlateContent,
PlateElement,
usePlateEditor,
type PlateElementProps,
} from 'platejs/react';
const initialValue: Value = [
{
children: [{ text: 'Title' }],
type: 'h3',
},
{
children: [{ text: 'This is a quote.' }],
type: 'blockquote',
},
{
children: [
{ text: 'With some ' },
{ bold: true, text: 'bold' },
{ text: ' text for emphasis!' },
],
type: 'p',
},
];
// Define element components
function H1Element(props: PlateElementProps) {
return <PlateElement as="h1" {...props} />;
}
function H2Element(props: PlateElementProps) {
return <PlateElement as="h2" {...props} />;
}
function H3Element(props: PlateElementProps) {
return <PlateElement as="h3" {...props} />;
}
function BlockquoteElement(props: PlateElementProps) {
return (
<PlateElement
as="blockquote"
style={{
borderLeft: '2px solid #eee',
marginLeft: 0,
marginRight: 0,
paddingLeft: '24px',
color: '#666',
fontStyle: 'italic',
}}
{...props}
/>
);
}
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 (
<Plate editor={editor}>
{/* You would typically add a toolbar here to toggle elements and marks */}
<PlateContent style={{ padding: '16px 64px', minHeight: '100px' }} />
</Plate>
);
}
To make the editor's content persistent, let's integrate state management to save and load the editor's value.
import React from 'react';
import type { Value } from 'platejs';
import {
BlockquotePlugin,
BoldPlugin,
H1Plugin,
H2Plugin,
H3Plugin,
ItalicPlugin,
UnderlinePlugin,
} from '@platejs/basic-nodes/react';
import {
Plate,
PlateContent,
PlateElement,
usePlateEditor,
type PlateElementProps,
} from 'platejs/react';
const initialValue: Value = [
{
children: [{ text: 'Title' }],
type: 'h3',
},
{
children: [{ text: 'This is a quote.' }],
type: 'blockquote',
},
{
children: [
{ text: 'With some ' },
{ bold: true, text: 'bold' },
{ text: ' text for emphasis!' },
],
type: 'p',
},
];
// Define element components
function H1Element(props: PlateElementProps) {
return <PlateElement as="h1" {...props} />;
}
function H2Element(props: PlateElementProps) {
return <PlateElement as="h2" {...props} />;
}
function H3Element(props: PlateElementProps) {
return <PlateElement as="h3" {...props} />;
}
function BlockquoteElement(props: PlateElementProps) {
return (
<PlateElement
as="blockquote"
style={{
borderLeft: '2px solid #eee',
marginLeft: 0,
marginRight: 0,
paddingLeft: '24px',
color: '#666',
fontStyle: 'italic',
}}
{...props}
/>
);
}
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('plate-manual-demo');
return savedValue ? JSON.parse(savedValue) : initialValue;
},
});
return (
<Plate
editor={editor}
onChange={({ value }) => {
localStorage.setItem('plate-manual-demo', JSON.stringify(value));
}}
>
{/* Toolbar would go here */}
<div style={{ padding: '8px 0' }}>
<button
onClick={() => editor.tf.setValue(initialValue)}
style={{
padding: '4px 8px',
margin: '0 4px',
border: '1px solid #ccc',
borderRadius: '4px',
cursor: 'pointer',
}}
>
Reset
</button>
</div>
<PlateContent
style={{
padding: '16px 64px',
minHeight: '100px',
border: '1px solid #eee',
borderRadius: '4px',
}}
placeholder="Type your amazing content here..."
/>
</Plate>
);
}
You've now set up a basic Plate editor manually! From here, you can:
@platejs/table) and add them to your plugins array.editor.tf.bold.toggle(), editor.tf.h1.toggle()). You can also use the editor state with the Editor API.ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā