Design Syntax

Hi there,

I have a few questions about designing the output documents.

I have just tried to “design” my own invoice pdfs but I am a bit struggling with the syntax which seems to be slightly different from the syntax I see on the website. Playing around in their “playground” works fine but adjusting my custom layout in InvoiceNinja leads to errors all the time…

Is there a more InvoiceNinja-related tutorial anywhere?

Another question is how to get the “items table” redesigned. It seems to me that it is a single variable that outputs the whole table. I would like to have an “article name” and “article description” in one single column where the name is bold, like that (hopefully this displays like I want):

Article/Description Quantity Single price price
My work in words 3 hrs 75 bugs 225 bugs
Detailed description of what I have done,
can contain more than one line.

(this should be a table…)

I would like to have a “Master”-Logo on the first page and a version of the logo on the following pages. Is it possible to place different items depending on page numbers? Where do I have to put a second image file (the main logo comes from the InvoiceNinja settings).

And last but not least: Is there a reference of available variables i can use in the layouts?

Thanks very much for any advice!

It could be an issue with quotes, all field names and properties need to be surrounded in double quotes in the app. I think single/no quotes works in the playground.

Just this short video:

In our next version we’re making the columns more customizable, you can make words bold with markdown. ie, This would be bold.

Those changes sound like they’d require adjustments to the code.

If you’ve created your first invoice and click ‘Help’ on /settings/customize_design you’ll see a list of variables.

Thans for your reply!

It`s not only the quotes-problem but also creating new blocks.

I have two columns at the top containing

  • client address on the left
  • my company details on the right.

That works fine.

Adding another row with 2 columns below with

  • invoice number on the left
  • invoice date on the right

does not work.

Also adding a single row does not work. There is no error shown but also no content.

I added the following code:


"columns": [
        "text": "client-address",
        "style": "styleX"
     {  "text": "my-company-details",
        "style": "styleY"

"columns": [
        "text": "invoice-number",
        "style": "styleA"
     {  "text": "invoice-date",
        "style": "styleB"


but the second couple of columns “overwrites” the first one so I only can see the invoice-number and -date parts…

Do I have to add more brackets like [ { () } ] or a “stack” of columns?

Is is working in the pdfmake playground?

Ah, I now it works. It there were some “[{()}]” missing… Sorry!

But there is still another question: Can I add varibles to the default text entries for conditions? I would like to write “Please pay 123.45 € until 11. Nov 2017.”

“text”:["Please pay ", “$balance”, " until ", “$dueDate”]

Thanks, this is very helpful!
Does it also work within the “default condition text field” in the invoiceNinja Settings to set it as a default value?


$balance does not work:

Uncaught TypeError: h.replace is not a function

Is this an error?

Try $balanceAmount instead.

it`s the same: Uncaught TypeError: h.replace is not a function

I think this is a bug, I believe it should be fixed in our next release (in 1 to 2 weeks).