Export Engine (PNG, SVG, PDF, JSON)
Programmatic export functions, high-resolution rendering, multi-page vector PDF generation, and JSON serialization.
@filekit-studio/sketch includes a standalone export engine that works both programmatically on the client and through the built-in UI modal.
Export functions can be imported directly from the subpath export bundle without loading the full editor:
import {
exportToPng,
exportToSvg,
exportToPdf,
exportToJson,
downloadBlob,
} from "@filekit-studio/sketch/export";1. Live Interactive Board
The diagram below represents an architecture board. You can inspect its elements, and see how each export format converts it into production assets:
2. High-Resolution Raster Image (PNG)
exportToPng rasterizes the canvas elements onto an off-screen canvas at full resolution, applies padding, and returns a binary image Blob:
import { exportToPng, downloadBlob } from "@filekit-studio/sketch/export";
import type { SketchBoardElement } from "@filekit-studio/sketch";
export async function handleDownloadPng(elements: SketchBoardElement[]) {
const blob = await exportToPng(elements, {
scale: 2, // 2x Retina resolution (use 3 for print)
backgroundColor: "#ffffff", // Optional background fill or transparent
padding: 32, // Surrounding margin in pixels
});
if (blob) {
downloadBlob(blob, "system-architecture-2x.png");
}
}3. Scalable Vector Graphics (SVG)
exportToSvg converts elements, connectors, labels, and text nodes into clean, standalone SVG XML markup suitable for embedding directly into websites or importing into Figma / Illustrator:
import { exportToSvg } from "@filekit-studio/sketch/export";
import type { SketchBoardElement } from "@filekit-studio/sketch";
export async function getVectorSvg(elements: SketchBoardElement[]): Promise<string> {
const svgString = await exportToSvg(elements, {
padding: 24,
embedFonts: true, // Inlines web fonts as base64 for standalone portability
});
return svgString;
}4. Multi-Page Vector PDF
Generates a vector-based Adobe PDF document with real selectable text and scalable curves using pdf-lib:
import { exportToPdf, downloadBlob } from "@filekit-studio/sketch/export";
import type { SketchBoardElement } from "@filekit-studio/sketch";
export async function handleDownloadPdf(elements: SketchBoardElement[]) {
const pdfBlob = await exportToPdf(elements, {
title: "Enterprise Architecture Review",
pageSize: "a4", // "a4" | "letter" | "a3"
orientation: "landscape", // "landscape" | "portrait"
includeMetadata: true,
});
if (pdfBlob) {
downloadBlob(pdfBlob, "architecture-spec.pdf");
}
}5. Native JSON Serialization
Save the canvas state to a backend database or user file:
import { exportToJson } from "@filekit-studio/sketch/export";
import type { SketchDocument } from "@filekit-studio/sketch";
export function serializeBoard(doc: SketchDocument): string {
// Serializes elements, viewport camera, canvas background, and metadata
return exportToJson(doc);
}