Export

Blocks

Easily create headings of various levels, from H1 to H6, to structure your content and make it more organized.
Create blockquotes to emphasize important information or highlight quotes from external sources.
// Use code blocks to showcase code snippets
function greet() {
console.info('Hello World!');
}
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = useCreateEditor({
    plugins: [...editorPlugins],
    value: DEMO_VALUES[id],
  });

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

Features

  • Export editor content to:
  • Client-side export with no server dependencies

Usage

Install the Export Toolbar Button component.

Examples

Plate UI

Refer to the preview above.

Plate Plus

  • Server-side PDF export:
    • High-quality PDF generation
    • Custom fonts and styling
    • Headers and footers
    • Page numbers
    • Font selectable
  • Advanced export options:
    • Paper size selection
    • Margin controls
    • Orientation settings
    • Compression level

Try it out with our server-side PDF export: