Overview
Cakedesk features a powerful templating system that allows you to create your own page layouts for invoices and proposals using HTML & CSS.
While there is a small learning curve involved, the ability to create templates with code means that you have full control over the appearance of your documents.
#Paged.js
HTML & CSS are primarily designed to layout web pages. With a little bit of help from Paged.js, it is possible to layout print media (like invoices and proposals) as well.
Paged.js is used by Cakedesk under the hood and you can use all the features of this library to layout to, for example:
#Anatomy of a template
A template consists of the following files:
#template.ejs
The HTML markup for the invoice/proposal, using the EJS templating language.
#styles.css
The CSS styles for the invoice/proposal. You can use cm and px units in the CSS. You can also use web fonts by placing them in the same directory as the CSS file and referencing them using a relative path.
#template.json
A JSON file containing metadata about the template. At minimum, it should include the template name:
{
"name": "My Template"
}
In addition to the name, the following fields can be specified in the template.json file:
| Field | Type | Description |
|---|---|---|
name | string | The name of the template as displayed in Cakedesk. |
documentTypes | string[] | The document types this template supports. Possible values are "INVOICE" and "PROPOSAL". If omitted, the template defaults to supporting both document types. |
stylesheets | string[] | Record<DocumentType, string[]> | The CSS files to load for this template. |
fields | CustomField[] | The custom fields used in this template. More info |
strings | Record<string, Record<Language, string>> | The translation strings used in this template. More info |
fonts | string[] | An array of font family names to make available in the font picker for this template's Font options. Fonts must be loaded via CSS @font-face in your styles.css. |