Building Editors for the Web

Beautifully designed. Copy and paste into your apps. Open Source.
Browse Editors
A select editor
Files
app/editor/page.tsx
import EditorSelectForm from '@/example/select-editor-demo';
export const descriptionSrc = '/docs/multi-select';

export function Page() {
  return (
    <div className="flex h-screen w-full justify-center" data-registry="plate">
      <EditorSelectForm />
    </div>
  );
}
An AI editor
Files
app/editor/page.tsx
import { Toaster } from 'sonner';

import { PlateEditor } from '@/components/editor/plate-editor';
import { SettingsProvider } from '@/components/editor/settings';

export function Page() {
  return (
    <div className="h-screen w-full" data-registry="plate">
      <SettingsProvider>
        <PlateEditor />
      </SettingsProvider>

      <Toaster />
    </div>
  );
}
A simple editor
Files
app/editor/page.tsx
import { PlateEditor } from '@/components/editor/plate-editor';

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