How to Create a Stylish Cover Page for Your PDF-Exported Organization Chart

When exporting your organization chart to PDF, a well-designed cover page can make your document more professional and visually appealing. With BALKAN OrgChart JS, you can customize the first page of your PDF with gradients, icons, previews, and even stylized text.

In this tutorial, we’ll go step by step to build a modern, visually engaging PDF cover page.

Full Code Example

1. Setting Up Your OrgChart

Start by including the OrgChart library and creating a container for your chart:

<script src="https://cdn.balkan.app/orgchart.js"></script>
<div id="tree"></div>

Then, initialize the chart:

let chart = new OrgChart(document.getElementById("tree"), {
    enableSearch: false,
    mouseScrool: OrgChart.action.scroll,
    menu: {
        previewPdf: { text: "Export PDF", icon: OrgChart.icon.powerpoint(24, 24, "#7A7A7A"), onClick: pdfExportPreview }
    },
    nodeBinding: {
        field_0: "name",
        field_1: "title"
    }
});

chart.load([
    { id: 1, name: "Jack Hill", title: "Chairman & CEO" },
    { id: 2, pid: 1, name: "Lexie Cole", title: "QA Lead" },
    { id: 3, pid: 1, name: "Janae Barrett", title: "Technical Director" }
]);

2. Designing the PDF Cover Page

A good cover page has these elements:

• Background gradient
• Decorative accents
• Main title and subtitle
• Optional mini-preview of the chart
• Footer with export details
• Watermark

Here’s an example SVG-based cover page:

let cover = `
  // define the SVG here
`;

3. Exporting PDF with the Cover Page

Use pdfPreviewUI.show to include your cover page in the export:

function pdfExportPreview() {
    chart.pdfPreviewUI.show({
        pages: [
            { content: cover },  // Cover page
            { nodeId: 1 }        // First node page
        ]
    });
}

chart.onInit(function () {
    pdfExportPreview();
});

4. Customizing Your Cover Page

You can easily enhance your design:

• Change colors: Adjust gradients #0f172a → #0369a1 to match your brand.
• Add logos or emblems: Use <image> or <circle> SVG elements.
• Include chart preview: Add rectangles and text to mimic a mini-org chart snapshot.
• Add watermark: Subtle, low-opacity text for branding.

✅ Result

Your exported PDF now has a professional-looking cover page with your company name, chart preview, decorative elements, and footer details — making your organizational charts ready for presentations or reports.

OrgChart JS PDF Export With A Cover Page