Paragraphs & Headings

Paragraphs and headings are the most fundamental content elements. Both render text with optional inline formatting and can reference a named style.

Paragraphs

{ "p": "Your text content here.", "style": "styleName" }

Property	Type	Required	Description
p	string	Yes	The paragraph text, which may contain inline formatting tags
style	string	No	Name of a style defined in the styles object

Headings

Headings provide semantic structure with built-in default font sizes. No style definition is needed — headings render with appropriate sizing out of the box.

{ "h1": "Document Title" }
{ "h2": "Section Heading" }
{ "h3": "Subsection" }

Property	Default size	HTML equivalent
h1	24pt	<h1>
h2	18pt	<h2>
h3	14pt	<h3>
h4	12pt	<h4>
h5	10pt	<h5>

Headings support all the same inline formatting tags as paragraphs:

{ "h1": "[color, #1A1A2E]Annual Report[/color] — Q1 2026" }

To override the default sizing, apply a custom style:

{
  "document": {
    "styles": {
      "brandHeading": { "fontSize": 28, "color": "#0F4C75", "fontStyle": "italic" }
    },
    "content": [
      { "h1": "Custom Styled Heading", "style": "brandHeading" },
      { "h2": "This uses the default 18pt" },
      { "p": "Regular paragraph text." }
    ]
  }
}

If you define a style named h1 in your styles object, it becomes the default for all h1 elements — no need to set "style": "h1" on each one.

Inline formatting tags

Inline formatting tags use square bracket syntax and can be applied anywhere within paragraph text. Most tags come in opening and closing pairs.

Bold, italic, underline

Tag	Description	Example
[b]...[/b]	Bold	[b]important[/b]
[i]...[/i]	Italic	[i]emphasis[/i]
[bi]...[/bi]	Bold italic	[bi]strong emphasis[/bi]
[u]...[/u]	Underline	[u]underlined text[/u]

{ "p": "This has [b]bold[/b], [i]italic[/i], and [u]underlined[/u] text." }

Font color

Change the text color for a span using a hex color code.

{ "p": "Status: [color, #27AE60]Active[/color]" }

The tag format is [color, #RRGGBB]...[/color].

Font size

Override the font size for a span, specified in points.

{ "p": "Normal text [fontsize, 18]large text[/fontsize] normal again." }

The tag format is [fontsize, N]...[/fontsize] where N is the size in points.

Superscript and subscript

Tag	Description	Example
[sup]...[/sup]	Superscript	10[sup]2[/sup] renders as 10^2
[sub]...[/sub]	Subscript	H[sub]2[/sub]O renders as H2O

{ "p": "Water formula: H[sub]2[/sub]O. Area: 100m[sup]2[/sup]." }

Text alignment

Override the paragraph's text alignment inline.

Value	Meaning
l	Left
r	Right
c	Center
j	Justified

{ "p": "[align, c]This paragraph is centered.[/align]" }

Line break

Insert a line break within a paragraph without starting a new content element.

{ "p": "Line one[br]Line two[br]Line three" }

Tab stop

Insert a horizontal tab to position text at a specific offset.

{ "p": "Label[tab, 200, 0]Value" }

The format is [tab, X, Y] where:

• X is the horizontal offset in points from the left margin
• Y is the vertical offset (typically 0)

Tab stops are useful for aligning labels and values, or placing content on the left and right sides of a line (e.g., in headers).

{ "p": "Invoice #INV-2026-0042[tab, 400, 0]Date: March 30, 2026" }

Combining tags

Shortcodes can be nested and combined freely.

{ "p": "[b][color, #CC0000]URGENT:[/color][/b] Shipment [i]SF-20260330[/i] requires clearance by [u]end of day[/u]." }

This renders:

• URGENT: in bold red
• SF-20260330 in italic
• end of day underlined

Inline images

Images can be embedded directly within paragraph text. See Images for details.

{ "p": "[image, /assets/flag-us.png, 20|14] Chicago, IL" }

Inline barcodes

Barcodes can be embedded within paragraph text. See Barcodes for details.

{ "p": "Tracking: [barcode, qrcode, SF-20260330-001, 60|60]" }

Inline form fields

Interactive form fields can be placed within paragraph text. See Form Fields for details.

{ "p": "Full Name: [textfield, fullName, John Doe, 200|20]" }

Data references

Paragraphs support $data references that are resolved at generation time. See Data Binding for details.

{ "p": "Invoice for $data.client.companyName" }

Full example

{
  "document": {
    "styles": {
      "title": { "fontSize": 22, "fontWeight": "bold", "color": "#1A1A2E" },
      "body": { "fontSize": 10, "color": "#333333", "textAlign": "justify" },
      "caption": { "fontSize": 8, "fontStyle": "italic", "color": "#999999" }
    },
    "content": [
      { "p": "Shipment Confirmation", "style": "title" },
      {
        "p": "Your shipment [b]SF-20260330-001[/b] from [color, #0066CC]Chicago[/color] to [color, #0066CC]Toronto[/color] has been confirmed.[br][br]Estimated delivery: [b]April 3, 2026[/b].",
        "style": "body"
      },
      {
        "p": "Tracking code: [barcode, qrcode, SF-20260330-001, 80|80]",
        "style": "body"
      },
      { "p": "Generated by DocPayload on March 30, 2026", "style": "caption" }
    ]
  }
}