--- title: Enable the Spacious Layout in a PDF Form product: PDF Generator description: This demo shows how to switch from the default Compact layout to the Spacious layout, increasing spacing and improving the readability and visual balance of your PDF forms. framework: Vanilla JS source: https://surveyjs.io/pdf-generator/examples/compact-vs-spacious-pdf-layout/vanillajs index: https://surveyjs.io/pdf-generator/examples/overview.md --- # Enable the Spacious Layout in a PDF Form (Vanilla JS) SurveyJS PDF Generator separates color settings from dimensional styling. [Themes](/pdf-generator/examples/apply-surveyjs-theme-to-pdf-form/) 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`](/pdf-generator/documentation/api-reference/surveypdf#applyLayout) method: ```js // Modular applications import { Spacious } from "survey-pdf/layouts"; const surveyPdf = new SurveyPDF({ /* ... */}); surveyPdf.applyLayout(Spacious); surveyPdf.save("my-spacious-form.pdf"); ``` ```html ``` For more information about layouts and other appearance customization options, refer to the following help topic: [PDF Appearance Customization](/pdf-generator/documentation/pdf-appearance-customization (linkStyle)) ## Files ### `public/index.html` ```html

``` ### `src/index.css` ```css /* You can add your custom CSS here. */ ``` ### `src/index.js` ```js import { Model } from "survey-core"; import "survey-js-ui"; import { SurveyPDF } from "survey-pdf"; import DocLayout from "survey-pdf/layouts"; import "survey-core/survey-core.min.css"; import "./index.css"; import { json } from "./json"; function createSurveyPdfModel (surveyModel) { const surveyPDF = new SurveyPDF(json); if (surveyModel) { surveyPDF.data = surveyModel.data; surveyPDF.locale = surveyModel.locale; surveyPDF.applyLayout(DocLayout.Spacious); } surveyPDF.onGetQuestionStyle.add((_, options) => { if (options.question.getType() === "matrix") { options.style.columnMinWidth = 50; } }); return surveyPDF; } function saveSurveyToPdf (filename, surveyModel) { const pdfDoc = createSurveyPdfModel(surveyModel); if (!pdfDoc) return; pdfDoc.save(filename); } const previewDiv = document.getElementById("pdf-preview"); const previewEmbed = document.getElementById("pdf-preview-frame"); let pdfBlobUrl; function showPdfPreview(surveyModel) { if (!previewDiv || !previewEmbed) return; const pdfDoc = createSurveyPdfModel(surveyModel); if (!pdfDoc) return; pdfDoc.raw("blob").then((blob) => { if (pdfBlobUrl) { URL.revokeObjectURL(pdfBlobUrl); } pdfBlobUrl = URL.createObjectURL(blob); previewEmbed.setAttribute("src", pdfBlobUrl); previewDiv.style.display = "block"; }); } function previewPdf(surveyModel) { if (!previewDiv) return; if (previewDiv.style.display !== "none") { previewDiv.style.display = "none"; return; } showPdfPreview(surveyModel); } const survey = new Model(json); survey.showCompleteButton = false; survey.navigationButtonsLocation = "topBottom"; survey.addNavigationItem({ id: "survey_save_as_file", title: "Download PDF", action: () => { saveSurveyToPdf("surveyResult.pdf", survey); } }); survey.addNavigationItem({ id: "survey_pdf_preview", title: "Preview PDF", visible: window.navigator.pdfViewerEnabled, action: () => { previewPdf(survey); } }); survey.render(document.getElementById("surveyElement")); ``` ### `src/json.js` ```js export const json = { "title": "Guest Stay Feedback", "description": "Help us improve your next visit. Fields marked with * are required.", "pages": [ { "name": "stay-details", "title": "Your stay", "elements": [ { "type": "panel", "name": "guest-info", "title": "Guest information", "elements": [ { "type": "text", "name": "full-name", "title": "Full name", "isRequired": true }, { "type": "text", "name": "email", "startWithNewLine": false, "title": "Email", "isRequired": true, "validators": [ { "type": "email" } ], "inputType": "email" }, { "type": "text", "name": "room-number", "title": "Room number" }, { "type": "text", "name": "check-out", "startWithNewLine": false, "title": "Check-out date", "inputType": "date" } ] } ] }, { "name": "ratings", "title": "Rate your experience", "description": "Please rate each area from 1 (poor) to 5 (excellent).", "elements": [ { "type": "matrix", "name": "service-ratings", "title": "How would you rate the following?", "rowTitleWidth": "120px", "columns": [ 1, 2, 3, 4, 5 ], "rows": [ { "value": "cleanliness", "text": "Room cleanliness" }, { "value": "staff", "text": "Front desk & staff" }, { "value": "comfort", "text": "Bed & room comfort" }, { "value": "amenities", "text": "Amenities (Wi-Fi, TV, etc.)" }, { "value": "breakfast", "text": "Breakfast / dining" }, { "value": "value", "text": "Overall value for money" } ], "eachRowRequired": true } ] }, { "name": "comments", "title": "Additional feedback", "elements": [ { "type": "checkbox", "name": "highlights", "title": "What stood out during your stay?", "choices": [ "Friendly staff", "Quiet room", "Great location", "Fast check-in", "Comfortable bed" ], "showOtherItem": true, "otherText": "Other", "colCount": 2 }, { "type": "comment", "name": "suggestions", "title": "What could we do better?", "maxLength": 500 }, { "type": "boolean", "name": "return-guest", "title": "Would you stay with us again?", "valueTrue": "yes", "valueFalse": "no" } ] } ], "questionsOnPageMode": "singlePage", "headerView": "advanced" }; ``` ### `src/theme.js` ```js export const themeJson = {}; ``` ### `package.json` ```json { "dependencies": { "survey-core": "latest", "survey-js-ui": "latest", "survey-pdf": "latest" } } ``` ## Other Frameworks - [Angular](https://surveyjs.io/pdf-generator/examples/compact-vs-spacious-pdf-layout/angular.md) - [React](https://surveyjs.io/pdf-generator/examples/compact-vs-spacious-pdf-layout/reactjs.md) - [Vue 3](https://surveyjs.io/pdf-generator/examples/compact-vs-spacious-pdf-layout/vue3js.md) - [jQuery](https://surveyjs.io/pdf-generator/examples/compact-vs-spacious-pdf-layout/jquery.md)