Export PDF from your editor
Use Tiptap's @tiptap-pro/extension-export-pdf to export your editor's content as a .pdf file. This extension integrates PDF export functionality into your editor by sending the document to the Tiptap convert service for conversion.
You can also use the REST API instead if you'd prefer to handle the conversion on your end.
Install the PDF Export extension
The Conversion extensions are published in Tiptap's private npm registry. Integrate the extensions by following the private registry guide.
Once done you can install and import the Export PDF extension package.
npm i @tiptap-pro/extension-export-pdfimport { ExportPdf } from '@tiptap-pro/extension-export-pdf'Configuring the extension
The ExportPdf extension can be configured with an ExportPdfOptions (object) as an argument to the configure method with the following properties:
import { ExportPdf } from '@tiptap-pro/extension-export-pdf'
const editor = new Editor({
extensions: [
// Other extensions ...
ExportPdf.configure({
endpoint: 'https://api.tiptap.dev/v2/convert',
token: 'YOUR_TOKEN',
appId: 'YOUR_APP_ID',
styleOverrides: {},
headers: {},
footers: {},
pageSize: { width: '21cm', height: '29.7cm' },
pageMargins: { top: '1cm', bottom: '1cm', left: '1cm', right: '1cm' },
customNodes: [],
onCompleteExport: (result) => {
// Handle the exported Blob
},
}),
// Other extensions ...
],
})| Parameter | Type | Description | Default |
|---|---|---|---|
endpoint | string | The Tiptap API endpoint for conversion | 'https://api.tiptap.dev/v2/convert' |
token | string | The Tiptap JWT for authentication | '' |
appId | string | The Tiptap App ID for authentication | '' |
styleOverrides | Record<string, string> | Style overrides to apply to the export | undefined |
headers | HeaderConfig | Header configuration for the exported document | undefined |
footers | FooterConfig | Footer configuration for the exported document | undefined |
pageSize | PageSize | Page size configuration | undefined |
pageMargins | PageMargins | Page margins configuration | undefined |
customNodes | CustomNodeDefinition[] | Custom node definitions for DOCX-based conversion (requires @tiptap-pro/extension-export-docx) | undefined |
customFonts | CustomFont[] | Custom font files to provision for PDF export (on-premises only) | undefined |
onCompleteExport | (result: Blob) => void | Callback that receives the exported file as a Blob | Throws error if not provided |
onExportError | (error: Error) => void | Optional callback invoked when the export pipeline rejects (failed dynamic import, failed DOCX conversion, network error, non-OK response). When omitted, errors are logged via console.error. | undefined |
Header and footer slot values
Every header and footer slot (default, first, even) accepts any of five shapes; pick whichever matches your data. The first three work with @tiptap-pro/extension-export-pdf alone; the last two require @tiptap-pro/extension-export-docx to also be installed (they take the DOCX-first export path, which is lazy-loaded so PDF-only consumers aren't affected).
| Shape | Example | Notes |
|---|---|---|
| Plain text | 'Company name, 2026' | Unstyled header/footer. |
| Stringified Tiptap JSONContent | JSON.stringify(myHeaderDoc) | Pre-serialized Tiptap node. Rich formatting preserved. |
| Tiptap JSONContent object | { type: 'doc', content: [/* … */] } | Rich Tiptap node passed directly. No stringification needed. |
docx Header / Footer instance | new Docx.Header({ children: [/* … */] }) | Full DOCX-level control. Requires the DOCX extension. |
Async factory returning Header / Footer | () => convertHeader({ node }) | Built on demand at export time. Typical use: convertHeader / convertFooter. Requires the DOCX extension. |
Tiptap JSONContent objects must include a type field. That's the runtime discriminator the extension uses to tell a Tiptap node apart from a docx instance. Objects without type that aren't Header / Footer instances are dropped with a console.warn pointing at the offending value, not forwarded to the DOCX serializer.
In TypeScript these shapes collapse to two aliases (the type requirement is encoded in TiptapNodeContent):
import type { JSONContent } from '@tiptap/core'
import type { Footer, Header } from 'docx'
type TiptapNodeContent = JSONContent & { type: string }
type HeaderSlotValue = string | TiptapNodeContent | Header | (() => Promise<Header>)
type FooterSlotValue = string | TiptapNodeContent | Footer | (() => Promise<Footer>)HeaderConfig
| Property | Type | Description |
|---|---|---|
evenAndOddHeaders | boolean | Whether to use different headers for odd and even pages. |
differentFirstPage | boolean | Whether to use a different header on the first page. When true, the first value is used on page one instead of default. |
default | HeaderSlotValue | The standard default header on every page, or the header on odd pages when evenAndOddHeaders is active. |
first | HeaderSlotValue | The header on the first page. Only used when differentFirstPage is true. |
even | HeaderSlotValue | The header on even pages. Only used when evenAndOddHeaders is true. |
FooterConfig
| Property | Type | Description |
|---|---|---|
evenAndOddFooters | boolean | Whether to use different footers for odd and even pages. |
differentFirstPage | boolean | Whether to use a different footer on the first page. When true, the first value is used on page one instead of default. |
default | FooterSlotValue | The standard default footer on every page, or the footer on odd pages when evenAndOddFooters is active. |
first | FooterSlotValue | The footer on the first page. Only used when differentFirstPage is true. |
even | FooterSlotValue | The footer on even pages. Only used when evenAndOddFooters is true. |
PageSize
| Property | Type | Description | Default |
|---|---|---|---|
width | string | The width of the page. Must be a positive number followed by a valid unit (cm, in, pt, pc, mm, px). | "21cm" |
height | string | The height of the page. Must be a positive number followed by a valid unit (cm, in, pt, pc, mm, px). | "29.7cm" |
PageMargins
| Property | Type | Description | Default |
|---|---|---|---|
top | string | The top margin of the page. Can be negative. Must be a number followed by a valid unit (cm, in, pt, pc, mm, px). | "1cm" |
bottom | string | The bottom margin of the page. Can be negative. Must be a number followed by a valid unit (cm, in, pt, pc, mm, px). | "1cm" |
left | string | The left margin of the page. Must be a positive number followed by a valid unit (cm, in, pt, pc, mm, px). | "1cm" |
right | string | The right margin of the page. Must be a positive number followed by a valid unit (cm, in, pt, pc, mm, px). | "1cm" |
CustomFont
On-premises only
Custom fonts are only available in on-premises deployments. If you're interested in using custom fonts with Tiptap's cloud service, please contact us about our Enterprise plan.
| Property | Type | Description |
|---|---|---|
url | string | HTTPS URL pointing directly to a .ttf or .woff2 font file |
fontFamily | string | Font family name as used in the document |
Export a PDF file
With the extension installed, you can export your editor's content to .pdf using the exportPdf command.
/**
* Export the current document as a PDF file via the Tiptap convert service.
*
* @param options - All extension-level options can be overridden per-invocation
* @example editor.commands.exportPdf({ onCompleteExport: (result) => {} })
*/
exportPdf: (options?: ExportPdfCommandOptions) => ReturnTypeThe ExportPdfCommandOptions interface extends ExportPdfOptions, so every configuration option can be overridden per-command invocation:
| Property | Type | Description |
|---|---|---|
endpoint | string | Override the API endpoint for this specific export |
token | string | Override the JWT token for this specific export |
appId | string | Override the App ID for this specific export |
styleOverrides | Record<string, string> | Override style overrides for this specific export |
headers | HeaderConfig | Override header configuration for this specific export |
footers | FooterConfig | Override footer configuration for this specific export |
pageSize | PageSize | Override page size for this specific export |
pageMargins | PageMargins | Override page margins for this specific export |
customNodes | CustomNodeDefinition[] | Override custom node definitions for this specific export |
customFonts | CustomFont[] | Override custom fonts for this specific export (on-premises only) |
onCompleteExport | (result: Blob) => void | Override the callback for this specific export |
onExportError | (error: Error) => void | Override the error handler for this specific export |
import { ExportPdf } from '@tiptap-pro/extension-export-pdf'
const editor = new Editor({
extensions: [
// Other extensions ...
ExportPdf.configure({
token: 'YOUR_TOKEN',
appId: 'YOUR_APP_ID',
onCompleteExport(result) {
// Download the PDF file
const url = URL.createObjectURL(result)
const a = document.createElement('a')
a.href = url
a.download = 'document.pdf'
a.click()
URL.revokeObjectURL(url)
},
}),
// Other extensions ...
],
})
// Use the extension-level callback
editor.chain().exportPdf().run()
// Or override options for a specific export
editor
.chain()
.exportPdf({
pageSize: { width: '8.5in', height: '11in' },
onCompleteExport(result) {
// Custom handling for this specific export
const url = URL.createObjectURL(result)
window.open(url)
},
})
.run()How it works
When you call exportPdf, the extension serializes the editor's document to JSON and sends it to the Tiptap convert service along with any configured options (style overrides, page layout, headers, footers, custom fonts). The service converts the document to PDF and returns it as a binary blob. The onCompleteExport callback receives this blob directly, which you can then download or process as needed. Errors are thrown as exceptions rather than passed through the callback.
Custom fonts
On-premises only
Custom fonts are only available in on-premises deployments. If you're interested in using custom fonts with Tiptap's cloud service, please contact us about our Enterprise plan.
The PDF export supports custom fonts for on-premises deployments. You can provision custom fonts by providing an array of font URLs that the conversion service will download and use when generating the PDF.
Font files must be .ttf or .woff2 format and accessible via HTTPS. The fontFamily must match the font family name used in your document's text styles.
ExportPdf.configure({
token: 'YOUR_TOKEN',
appId: 'YOUR_APP_ID',
customFonts: [
{
url: 'https://your-cdn.com/fonts/CustomFont-Regular.ttf',
fontFamily: 'Custom Font',
},
{
url: 'https://your-cdn.com/fonts/CustomFont-Bold.ttf',
fontFamily: 'Custom Font',
},
],
onCompleteExport(result) {
// Handle the exported PDF
},
})You can also override custom fonts per-command invocation:
editor
.chain()
.exportPdf({
customFonts: [
{
url: 'https://your-cdn.com/fonts/SpecialFont.woff2',
fontFamily: 'Special Font',
},
],
})
.run()What to expect
- Authentication required. The export sends the document to the Convert service, which requires a JWT (
token) and your App ID. Generate JWTs server-side; never embed your secret key in the browser. See the Conversion install guide. - HTTP responses you may need to handle:
401(missing or invalid JWT),403(the operation isn't permitted for your app — most often a format your plan doesn't include, orcustomFontsagainst the cloud plan),5xx(transient server-side error; retry with backoff). - Custom fonts are an Enterprise / on-prem feature. In the cloud plan, requests carrying
customFontsreturn403. To enable them, contact us about an Enterprise plan or run an on-prem deployment. - Each request is processed end-to-end before responding. Very large documents may take longer to return; size the request timeouts on your side accordingly.
What not to expect
- Round-trip identity from DOCX → PDF. PDF is a fixed-layout format; Word and the Convert service use different layout engines, so visual output may differ in subtle ways from Word's PDF print.
- Pixel-perfect Word match for complex layouts — especially multi-column sections, RTL text, or content that relied on Word-specific layout quirks.
- Editing in the resulting PDF. PDF export is one-way. To preserve editability, export to DOCX as well.
Support & Limitations
| Feature | Support |
|---|---|
| Text content | ✓ Basic text, spacing, punctuation |
| Text formatting | ✓ Bold, italic, underline, strikethrough, alignment, line height |
| Block elements | ✓ Paragraphs, headings (1–6), blockquotes, ordered and unordered lists |
| Tables | ✓ Basic structure, header rows, colspan |
| Links | ✓ Hyperlinks |
| Media (Images) | ✓ Embedded images, size preserved |
| Styles | ✓ Font families*, Font colors, font sizes, background colors, line heights |
| Custom Fonts | ✓ On-premises only (.ttf and .woff2) |
| Headers & Footers | ✓ |
| Math | ✓ |
| Page Breaks | ✓ |
| Sections | ✗ |
| Footnotes & Endnotes | ✗ |
| Comments & Revisions | ✗ |
| Table of Contents | ✗ |
| Advanced Formatting | ✗ Columns, text direction, forms, macros, embedded scripts |
| Metadata | ✗ |
| Text Boxes, Shapes, SmartArt | ✗ |
- Font families are supported when using Google Fonts (automatically available) or custom fonts
provisioned via the
customFontsoption (on-premises only).
For a detailed per-feature breakdown, see the Supported features matrix. Note that element overrides (paragraphOverrides, textRunOverrides, tableOverrides, tableCellOverrides, imageOverrides) available in the DOCX export extension are not passed through to the PDF conversion.