Enable the Spacious Layout in a PDF Form
SurveyJS PDF Generator separates color settings from dimensional styling. Themes define colors and shadows, while layouts define spacing, sizing, typography, corner radius, and other properties. PDF Generator includes two predefined layouts: Compact (default) and Spacious. This demo applies the Spacious layout. Click Download PDF or Preview PDF to generate a PDF form with this layout, or use the PDF layout switcher in the Settings panel to switch back to Compact.
Compact vs. Spacious
Compact is a dense layout designed to reduce page count and maximize the amount of content that fits on each page. Its characteristics include:
- Tighter spacing between pages, questions, and matrix cells
- Smaller gaps throughout the document
- No corner rounding on questions and matrices
Spacious increases spacing and visual proportions to improve readability and create a more open presentation. Its characteristics include:
- Larger gaps between pages and questions
- Increased whitespace around matrix table cells
- Rounded corners on questions, matrices, and sections
- A less dense appearance that resembles a designed form rather than a compact report
To apply the Spacious layout, import it or reference its script and call the applyLayout method:
// Modular applications
import { Spacious } from "survey-pdf/layouts";
const surveyPdf = new SurveyPDF({ /* ... */});
surveyPdf.applyLayout(Spacious);
surveyPdf.save("my-spacious-form.pdf");
<!-- Classic script applications -->
<head>
<!-- ... -->
<script src="https://unpkg.com/survey-pdf/layouts/spacious.min.js"></script>
<!-- ... -->
</head>
<body>
<script>
const surveyPdf = new SurveyPDF.SurveyPDF({ /* ... */});
surveyPdf.applyLayout(DocLayout.Spacious);
surveyPdf.save("my-spacious-form.pdf");
</script>
</body>
For more information about layouts and other appearance customization options, refer to the following help topic: