Export custom styles to PDF

Available in Start planBetav0.3.0

When exporting to PDF, you can define custom style overrides that will be applied to the exported document. This is useful when you want to customize the look and feel of your exports beyond the default styling.

Style overrides

The styleOverrides option accepts a Record<string, string> object where keys are style property names and values are the style values. These overrides are sent to the Tiptap convert service and applied during the conversion process.

Parameter	Type	Description	Default
`styleOverrides`	`Record<string, string>`	Style overrides to apply to the exported PDF document	`undefined`

Example

import { ExportPdf } from '@tiptap-pro/extension-export-pdf'

const editor = new Editor({
  extensions: [
    // Other extensions...
    ExportPdf.configure({
      token: 'YOUR_TOKEN',
      appId: 'YOUR_APP_ID',
      styleOverrides: {
        'font-family': 'Arial, sans-serif',
        'font-size': '12pt',
        'line-height': '1.5',
        'color': '#333333',
      },
    }),
    // Other extensions...
  ],
})

// Export with custom styles
editor
  .chain()
  .exportPdf({
    onCompleteExport(result) {
      const url = URL.createObjectURL(result)
      const a = document.createElement('a')

      a.href = url
      a.download = 'styled-document.pdf'
      a.click()

      URL.revokeObjectURL(url)
    },
  })
  .run()

PreviouslyCustom page layout

Next upREST API