# Editor basic

> A basic editor

A shadcn/ui block from the [@plate](https://platejs.org) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/plate/editor-basic).

- Page, with a live preview: https://shadcn.exchange/r/plate/editor-basic
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/plate/editor-basic-light-186db47438cfa3ea.png
- Registry item: https://platejs.org/r/editor-basic.json
- Categories: Editors
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://platejs.org/r/editor-basic.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `@platejs/basic-nodes`
- Registry items: `https://platejs.org/r/plate-ui.json`, `https://platejs.org/r/editor.json`, `https://platejs.org/r/basic-nodes-kit.json`, `https://platejs.org/r/basic-marks-kit.json`

## Files

### `src/registry/blocks/editor-basic/page.tsx`

```tsx
import { PlateEditor } from '@/registry/blocks/editor-basic/components/editor/plate-editor';

export default function Page() {
  return (
    <div className="h-screen w-full">
      <PlateEditor />
    </div>
  );
}
```

### `src/registry/blocks/editor-basic/components/editor/plate-editor.tsx`

```tsx
'use client';

import { normalizeStaticValue } from 'platejs';
import { Plate, usePlateEditor } from 'platejs/react';

import { BasicNodesKit } from '@/registry/components/editor/plugins/basic-nodes-kit';
import { Editor, EditorContainer } from '@/registry/ui/editor';

export function PlateEditor() {
  const editor = usePlateEditor({
    plugins: BasicNodesKit,
    value,
  });

  return (
    <Plate editor={editor}>
      <EditorContainer>
        <Editor variant="demo" placeholder="Type..." />
      </EditorContainer>
    </Plate>
  );
}

const value = normalizeStaticValue([
  {
    children: [{ text: 'Basic Editor' }],
    type: 'h1',
  },
  {
    children: [{ text: 'Heading 2' }],
    type: 'h2',
  },
  {
    children: [{ text: 'Heading 3' }],
    type: 'h3',
  },
  {
    children: [
      {
        children: [{ text: 'This blockquote contains more than one block.' }],
        type: 'p',
      },
      {
        children: [
          {
            text: 'It can also wrap nested quotes instead of flattening them.',
          },
        ],
        type: 'p',
      },
      {
        children: [
          {
            children: [
              {
                text: 'Nested blockquotes keep the quote hierarchy intact.',
              },
            ],
            type: 'p',
          },
        ],
        type: 'blockquote',
      },
    ],
    type: 'blockquote',
  },
  {
    children: [
      { text: 'Basic marks: ' },
      { bold: true, text: 'bold' },
      { text: ', ' },
      { italic: true, text: 'italic' },
      { text: ', ' },
      { text: 'underline', underline: true },
      { text: ', ' },
      { strikethrough: true, text: 'strikethrough' },
      { text: '.' },
    ],
    type: 'p',
  },
]);
```