Print & PDF

PreviousNext

A print-ready editor with PDF export and paper size controls.

This example demonstrates a print-ready editor with support for standard paper sizes, orientations, DPI settings, and PDF export functionality.

The examples are best viewed in full screen. Click here to open in new tab.

Overview

The Print & PDF example showcases how to build a print-ready design editor with:

  • Standard paper sizes (A4, A3, Letter, Legal, Tabloid)
  • Portrait and landscape orientations
  • DPI selection for print quality (96, 150, 300, 600 DPI)
  • Multiple unit systems (px, mm, cm, in, pt)
  • PDF export functionality
  • Print-optimized canvas bounds

Components

The editor uses a tabbed interface with two main sections:

  • Style Tab - Layer styling controls for position, size, colors, typography, and more
  • Document Tab - Paper size and orientation settings

This shows how to use your own custom components inside the designer to build advanced designer panels and toolbars.

components/print-editor.tsx
import {
  Designer,
  DesignerCanvas,
  DesignerContent,
  DesignerFrame,
  DesignerPanel,
  DesignerToolbar,
  useSetFrameSize,
  useDPI,
  useSetDPI,
  useUnitSystem,
  useSetUnitSystem,
} from "@shadcn/designer"
 
function PrintEditor() {
  return (
    <Designer frameSize={{ width: 2480, height: 3508 }} dpi={300}>
      <DesignerContent>
        <DesignerPanel className="invisible" />
        <DesignerCanvas>
          <DesignerFrame
            bounds={{
              left: 64,
              top: 64,
              right: 64,
              bottom: 64,
              position: "css",
            }}
            showBounds
          />
        </DesignerCanvas>
        <DesignerPanel>
          {/* Style and document controls */}
        </DesignerPanel>
      </DesignerContent>
      <DesignerToolbar>
        {/* Toolbar with unit, DPI, and export controls */}
      </DesignerToolbar>
    </Designer>
  )
}

Unit System

The example supports multiple unit systems for precise print design.

components/unit-selector.tsx
import { useUnitSystem, useSetUnitSystem } from "@shadcn/designer"
 
function UnitSelector() {
  const unitSystem = useUnitSystem()
  const setUnitSystem = useSetUnitSystem()
 
  return (
    <Select value={unitSystem} onValueChange={setUnitSystem}>
      <SelectTrigger>
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="px">Pixels (px)</SelectItem>
        <SelectItem value="mm">Millimeters (mm)</SelectItem>
        <SelectItem value="cm">Centimeters (cm)</SelectItem>
        <SelectItem value="in">Inches (in)</SelectItem>
        <SelectItem value="pt">Points (pt)</SelectItem>
      </SelectContent>
    </Select>
  )
}

DPI Settings

Control the resolution of your print design with DPI selection:

components/dpi-selector.tsx
import { useDPI, useSetDPI } from "@shadcn/designer"
 
function DPISelector() {
  const dpi = useDPI()
  const setDPI = useSetDPI()
 
  return (
    <Select value={String(dpi)} onValueChange={(v) => setDPI(Number(v))}>
      <SelectTrigger>
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="96">96 DPI</SelectItem>
        <SelectItem value="150">150 DPI</SelectItem>
        <SelectItem value="300">300 DPI</SelectItem>
        <SelectItem value="600">600 DPI</SelectItem>
      </SelectContent>
    </Select>
  )
}

Print Bounds

The example uses bounds prop to define safe print margins:

components/print-frame.tsx
<DesignerFrame
  bounds={{
    left: 64,
    top: 64,
    right: 64,
    bottom: 64,
    position: "css",
  }}
  showBounds
/>

This ensures content stays within printable areas by showing visual guides at the specified margins.

PDF Export

To export to PDF, we use the DesignerStaticFrame component to render a static, read-only version of the layers.

Then we use the mql package to generate a PDF of the static frame.

Custom ToolbarUnit System