Export
components/demo.tsx
'use client';
import React from 'react';
import { Plate } from '@udecode/plate-common/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>
);
}
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: