# Exporting PDFs > Export a note as a PDF, and lay out the organisation's PDF templates (cover page, header and footer) in the visual designer or in HTML Any note you can read can be downloaded as a PDF. The server renders it with the note's formatting, code highlighting and images, and adds a cover page, a header and a footer from one of the organisation's PDF templates. The template also sets the paper: A4 or Letter. ## Export a note :::steps ::step Open the export dialog --- In an open note, click **PDF** in the top bar (on a phone: **⋯** › **Export as PDF**). In a folder's list of notes, the note's menu has **Export as PDF** too. :: ::step Choose the options --- Pick a **Template** (the list appears when the organisation has more than one; the default is preselected), and set the options below. :: ::step Export --- Click **Export PDF**. The file downloads as the note's name with `.pdf`. :: ::: The options: | Option | What it does | | --- | --- | | **Include cover page** | Starts the PDF with a full cover page from the template. On by default. | | **Include table of contents** | Adds a list of the note's headings after the cover. Each entry links to its section in the PDF. | | **Classification** | A label such as `CONFIDENTIAL` or `DRAFT`. The built-in templates show it on the cover and at the top right of every page. | | **Prepared for** | Who the document is for. Only with a cover page. It fills the `{{Recipient}}` placeholder; the built-in cover shows it as **Prepared for**, and leaves the line out when it's empty. | | **Fields of this template** | Appears when the template has its own placeholders, such as `{{Version}}`. Each becomes a field to fill in. Values carry over when you switch to another template that uses the same name. | | **Custom placeholders** | Extra **Key** and **Value** pairs for this export. A key with the name of a built-in placeholder replaces its value, for example `Title` to print another title than the note's name. | :::callout{type="warning"} If the export fails with "PDF export is unavailable — chromium is not installed on the server", the server can't render PDFs. Ask its operator to install Chromium (see [Configuration](../running-a-server/configuration.md)). ::: The note's own child notes are not included: a PDF holds one note. ## PDF templates An organisation has one or more PDF templates. Each has a name, a paper size and three parts: - **Cover page**: the full first page, used when **Include cover page** is on. - **Running header**: the top margin of every page after the cover. - **Running footer**: the bottom margin of every page after the cover. The paper size, A4 (210 × 297 mm) or Letter (8.5 × 11 in), applies to the cover and to every page after it. You can lay out each part on the page in the visual designer, with text boxes, shapes and images (see Design a template visually below), or write it as HTML (see Write a part in HTML below). A template can mix the two, for example a designed cover with an HTML footer. A part you haven't designed or written uses Kribble's built-in default. The built-in cover shows the organisation's icon, the classification, the note's title and description, the organisation's name, who it was prepared for and the date it was generated. The built-in header shows the classification at the top right; the built-in footer shows the date and "Page X of Y". One template is the default: the export dialog preselects it, and exports that don't name a template use it. ### Placeholders Placeholders are names in double braces that are replaced when a PDF is made. There is no logic or conditions, only find and replace. | Placeholder | Value | | --- | --- | | `{{Title}}` | The note's name | | `{{Description}}` | The note's description (the line under its title) | | `{{OrgName}}` | The organisation's display name | | `{{LogoURL}}` | The organisation's icon, when it has one | | `{{BrandColor}}` | The organisation's brand colour, as a hex value | | `{{Recipient}}` | **Prepared for** from the export dialog | | `{{Classification}}` | **Classification** from the export dialog | | `{{GeneratedDate}}` | The date of the export, in the organisation's date format | Any other name in double braces, for example `{{Version}}` or `{{ProjectCode}}`, is a custom placeholder of that template. The export dialog asks for it under **Fields of this template**, labelled from its name ("Project code"). A field left empty prints as nothing. A built-in placeholder with no value, such as `{{Classification}}` when you leave it empty, is replaced with nothing. For page numbers, the designer has `{{PageNumber}}` and `{{TotalPages}}`; HTML uses its own markup (see Write a part in HTML). ## Manage templates Templates belong to the organisation and are managed by its owner. Open the organisation's settings (in the organisation switcher at the bottom of the sidebar, hover the organisation and click its gear icon) and choose **PDF Templates**. Other members can see the templates and use them, but not change them. Personal workspaces use the built-in templates. The **Templates** section lists them; the default has a star. Click one to edit it. - **New**: adds a template that starts as a copy of the selected one, named "New template". Rename it in **Name**. - **Name**: renames the template. Under it, the tab lists the placeholders this template will ask for at export, or says it uses only the built-in ones. - **Paper**: A4 or Letter, for the cover and the body pages. - **Make default**: makes the selected template the default. - **Delete**: deletes the selected template after you confirm. An organisation keeps at least one template. If you delete the default, the first remaining template by name becomes the default. Below, **Cover page**, **Running header** and **Running footer** each show the part: - A designed part shows a thumbnail of its layout, drawn with the organisation's name, icon and colour. Click the thumbnail or **Open designer** to change it. **Advanced: HTML** turns it into HTML (see Write a part in HTML). - A part written in HTML shows an HTML editor and a live preview. **Design visually** opens it in the designer instead. **Save template** saves the name, paper, cover, header and footer of the selected template. If you switch templates with unsaved changes, Kribble asks whether to discard them. The **Placeholders** section lists every built-in placeholder, for reference while you write HTML. ### Formatting The **Formatting** section applies to every template and every PDF exported from the organisation. Save it with **Save formatting**. - **Table of contents title**: the heading of the table of contents. Empty means "Contents". - **Date format**: how `{{GeneratedDate}}` is written, as a Go date layout: write the date Monday, 2 January 2006 the way you want dates to look. Empty means `2 January 2006`. | Layout | Result | | --- | --- | | `2 January 2006` | 12 October 2026 | | `02/01/2006` | 12/10/2026 | | `2006-01-02` | 2026-10-12 | | `Jan 2, 2006` | Oct 12, 2026 | | `Monday, 2 January 2006` | Monday, 12 October 2026 | - **Date language**: the language of month and day names: English, Magyar, Deutsch, Français or Español. ## Design a template visually The designer lays out a cover, header or footer the way a word processor lays out text boxes: you place text, shapes and images on the page at its real size, and Kribble turns the layout into what the export prints. No HTML is needed. :::steps ::step Open the designer --- In the organisation's settings, choose **PDF Templates** and select the template. On the **Cover page**, **Running header** or **Running footer** card, click **Design visually**, or **Open designer** if the part is already designed. :: ::step Start from the starter layout --- A part you design for the first time starts from a layout close to the built-in default, so you change something rather than start from a blank page. If the part was written in HTML, Kribble first warns you that the designer can't read HTML: the HTML is replaced by the design when you save. :: ::step Lay out the part --- Add and arrange elements as described below. The **Cover**, **Header** and **Footer** tabs at the top switch between the parts. A tab marked **HTML** is a part written in HTML; open it and click **Design it visually** to design it too. :: ::step Save --- Click **Save template** in the designer's top bar. **Unsaved changes** next to it shows that something isn't saved yet. :: ::: Close the designer with the cross at the top right, or Esc when nothing is selected. Unsaved changes stay until you leave the settings page, and **Save template** at the bottom of the page saves them too. Anyone in the organisation can open the designer, but only the owner can change the paper or save. ### The page The middle of the designer is the page at its real size. The cover is the whole page and can run to the paper's edges. The header and footer are bands as wide as the paper and 26.67 mm tall: the top or bottom margin of the pages after the cover. Grey bars beside the band stand for the note's text, and dashed lines mark where the band ends and where the body text starts, 18 mm in from each side. Anything outside the band is cut off. The bar above the page zooms out and in, shows the zoom level (click it for actual size, 100%) and fits the page to the window. Ctrl and the mouse wheel zoom too. The paper list in the designer's top bar is the same setting as **Paper** on the settings page. It changes the size of the cover and of the body pages, and with them the width of the header and footer. With nothing selected, the panel on the right shows the **Page** (or **Header band**, **Footer band**) and its size. **Background** colours the whole part. The cover is white by default; the header and footer have no background, so they print on the page's white. ### Add text, shapes and images The **Insert** section on the left adds an element in the middle of the page: - **Text**: a text box. It opens for typing straight away. - **Box**: a rectangle. - **Ellipse**: an ellipse or circle. - **Line**: a straight line. - **Image**: opens a file picker for an image (PNG, JPEG, SVG, WebP or GIF). You can also drop an image file onto the page, or paste an image you copied in another program. - **Logo**: the organisation's icon. It always shows the current icon, so a new icon reaches every template. Select an element to see its options in the panel on the right. Every element has a name for the **Layers** list (type it next to its type at the top of the panel), a lock, its position and size in millimetres (**X**, **Y**, **W**, **H**) and **Opacity**. ### Text Type in the text box itself (double-click it, or select it and press Enter; Esc or a click elsewhere finishes), or in the **Text** field of the panel. A text box can have several lines, and placeholders such as `{{Title}}` anywhere in its text. | Option | What it does | | --- | --- | | Font | **Inter**, **Fraunces**, **IBM Plex Mono**, **Serif (system)** or **Sans (system)**. The first three are embedded in the PDF and print as you see them. The system fonts are whatever serif or sans-serif fonts the server has, so they can print differently. | | Size | In points. | | Weight | **Light**, **Regular**, **Medium**, **Semibold**, **Bold** or **Extra bold**. The bold button next to it switches between Regular and Bold. | | Italic, underline, all caps | The buttons next to the weight. All caps prints the text in capitals whatever you typed. | | **Color** | The text colour. | | Alignment | Left, centre, right or justified, and top, middle or bottom of the box. | | **Line** | Line height, as a multiple of the font size. | | **Spacing** | Letter spacing, in points. Negative values set the letters closer. | | **Hide when the placeholders are empty** | Doesn't print the box, with its background and border, when its text comes out empty at export. | The **Box** section gives the text a box behind it: **Fill** with its opacity, **Border** colour, **Width** and style (**Solid**, **Dashed** or **Dotted**), **Corners** (the corner radius) and **Padding** between the box's edge and the text. **Hide when the placeholders are empty** only hides a box whose whole text is placeholders that are all empty. A box with `{{Classification}}` in a red border disappears when the export has no classification. A box with `Prepared for {{Recipient}}` still prints "Prepared for", so put the words in the placeholder's value or accept the label. ### Shapes and lines Boxes and ellipses have **Fill** with its opacity, **Border** colour, **Width** and **Solid**, **Dashed** or **Dotted**. Boxes also have **Corners**. A line has a **Color**, **Width** and style. Drag either end to move it; hold Shift to keep the line horizontal, vertical or at 45°. A line can run at any angle. ### Images and the logo The **Image** section of the panel sets where the picture comes from: - **Upload…** (or **Replace…**) picks an image file. Double-clicking an image does the same. - **Org logo** shows the organisation's icon. If the organisation has no icon yet, the panel says so and nothing prints there until it has one. - The address field takes an image URL or a `/files/…` address of an image uploaded to Kribble. Press Enter to use it. **Fit** decides how the picture fills its box: **Fit inside (contain)** shows all of it, **Fill and crop (cover)** fills the box and cuts off what doesn't fit, **Stretch** fills the box and distorts the picture. **Corners** rounds the corners. Uploaded images are stored in the template itself. Large pictures are scaled down to 1800 pixels on their longest side first, and an image can be 4 MB at most. Prefer uploads, the logo and `/files/` addresses to images on other websites: the header and footer can't load images from the web. ### Colours Click a colour to open its choices: preset colours, a colour picker and a field for a hex value such as `#1d4ed8`. **Fill**, **Border** and **Background** also have **None**. The swatch marked **B** is **Brand**: the organisation's brand colour from its **Theme** settings. A template that uses it follows the organisation's colour when it changes. An organisation without a brand colour prints amber. ### Placeholders in the designer The **Placeholders** section on the left lists the placeholders with the sample values the designer shows. Click one to insert it: - into the text you're typing, at the cursor; - into the selected text box, at the cursor of the panel's **Text** field, or at the end; - with nothing selected, in a new text box. The list holds the built-in placeholders and the template's own ones, marked "asked at export". The logo and brand colour have their own buttons (**Logo**, **Org logo** and **Brand**) instead. To add a placeholder of your own, type its name in the field under the list ("Your own, e.g. Version") and press Enter or click the plus. Names can use letters, digits and underscores and can't start with a digit. The export dialog then asks for its value under **Fields of this template**, and the settings page lists it under the template's name. You can also type a placeholder into a text directly, such as `{{ProjectCode}}`. In the header and footer, `{{PageNumber}}` and `{{TotalPages}}` print the page number and the number of pages, for example `Page {{PageNumber}} of {{TotalPages}}`. They count the pages after the cover. On the cover they print nothing. ### Select, move and resize - Click an element to select it. Shift-click adds or removes elements, and dragging across an empty part of the page selects everything the rectangle touches. - Drag a selected element to move it. Hold Shift to move only across or only up and down. - Drag one of the eight handles to resize. Hold Shift on a corner handle to keep the proportions. Moving and resizing snap to the page's edges and centre, the 18 mm side margins of the body text, and the edges and centres of the other elements. Red guides show what an edge snapped to. Hold Alt to move freely, or click the magnet in the bar above the page to turn snapping off. ### Layers, lock and arranging Elements lie on top of each other in order. The **Layers** list on the left shows them, top first; click a name to select that element, Shift-click to add it. Use the arrow buttons at the bottom of the panel (or the bar above the page) to bring an element forward or send it backward, and the next two buttons to bring it to the front or send it to the back. The lock next to the element's name (**Lock in place**) keeps it from being dragged, resized, nudged or aligned by accident. A locked element can still be selected, changed in the panel and deleted. With one element selected, the six align buttons under its position line it up with the page: its left edge, centre or right edge, or its top, middle or bottom. With several selected, they line the elements up with each other. With three or more, **Across** and **Down** space them evenly. **Duplicate** and **Delete** are at the bottom of the panel. Undo and redo are at the left of the bar above the page. ### Keyboard shortcuts On a Mac, use ⌘ where it says Ctrl and Option where it says Alt. | Shortcut | What it does | | --- | --- | | Arrow keys | Move the selection 1 mm. With Shift, 10 mm; with Alt, 0.1 mm. | | Enter | Edit the selected text box | | Esc | Finish editing a text; deselect; with nothing selected, close the designer | | Delete or Backspace | Delete the selection | | Ctrl+A | Select everything | | Ctrl+D | Duplicate | | Ctrl+C, Ctrl+X, Ctrl+V | Copy, cut and paste. You can paste into another part, for example from the cover to the footer. | | Ctrl+Z | Undo | | Ctrl+Shift+Z or Ctrl+Y | Redo | | Ctrl+\] and Ctrl+\[ | Bring forward, send backward | | Ctrl+Shift+\] and Ctrl+Shift+\[ | Bring to front, send to back | | Ctrl and the mouse wheel | Zoom | Undo goes back through your changes since you opened the designer. Closing the designer starts the history again. ### Check the result The page in the designer is drawn the way the PDF prints it, in the same sizes and fonts. **Sample data** in the bar above the page fills placeholders with sample values: a made-up note ("Quarterly Risk Review") with your organisation's real name, icon and colour, and the template's own placeholders as their names, such as ‹Version›. **Placeholders** shows each placeholder by name, highlighted, to see where they are. **Sample PDF** in the top bar prints the template as it is in the designer, unsaved changes included, on the server: the cover, then a few pages of stand-in text under the header and footer, the way an export comes out. It opens in the browser's PDF viewer; **Download** saves it. It needs Chromium on the server, like any export. ### Limits - A text box has one style. To make one word bold, put it in a text box of its own. - Elements can't be rotated (lines can run at any angle) or grouped. - Text that doesn't fit runs over the edge of its box, and is cut off at the edge of the page or band. Nothing shrinks it to fit, so leave room for long values, such as a long note name in `{{Title}}`. - Images are stored in the template, so a template with large pictures takes up a few megabytes in the database. A part can hold 400 elements and 12 MB. - The header and footer are 26.67 mm tall, the body's top and bottom margins, and can't be made taller. - Changing between A4 and Letter keeps every element at the same position in millimetres. Letter is 17.6 mm shorter and 5.9 mm wider than A4, so check elements near the bottom and right edges and shapes that should span the page. - **Serif (system)** and **Sans (system)** depend on the fonts installed on the server. - Inter and IBM Plex Mono are embedded from Regular to Bold, so in upright Inter and in IBM Plex Mono, Light prints as Regular and Extra bold as Bold. Fraunces prints every weight. ## Write a part in HTML HTML gives full control over a part, for layouts the designer can't make. A part that was never designed is HTML already: its card shows the HTML editor. To turn a designed part into HTML, click **Advanced: HTML** on its card. The part becomes the HTML its design makes, which you can then change by hand. To go back, click **Design visually**. If you haven't changed the HTML, saved the template or switched templates since, the design comes back as it was. Otherwise Kribble warns that the designer can't read HTML and starts from the starter layout, and the HTML is replaced when you save. Saving the template while a part is HTML keeps only the HTML. Each HTML part has an editor and a live preview that updates as you type, filled with sample values. The preview isn't drawn at paper size, so a full-page cover is cut off at its width. The buttons: - **Default**: loads the built-in template into the editor, as a starting point for your own. - **Clear**: empties the part, so it uses the built-in default. - **Fullscreen**: edits the part full screen, with the preview beside it. Esc closes it. What to know when you write the HTML: - Placeholder values are HTML-escaped. Write a placeholder with three braces, such as `{{{Title}}}`, to insert the value as raw HTML. - So that an empty element doesn't leave a gap or a stray border, the built-in cover's styles hide empty elements with the classes `cover-classification`, `cover-subtitle` and `cover-meta-row`. Use those classes, or the `cover-page` class for the built-in full-page cover layout, when you write your own cover. - In the header and footer, `` and `` become the page number and the page count. These are filled in by the PDF renderer, not by Kribble. `{{PageNumber}}` and `{{TotalPages}}` work only in the designer. - Set a font size in header and footer HTML: without one the text is printed very small. - The header and footer are inset 18 mm from the sides to line up with the body text. Give the outer element `margin: 0 -18mm` to reach the paper's edges. - Inter is always available. Name `Fraunces` or `IBM Plex Mono` in a `font-family` and Kribble embeds that font in the PDF too.