Document Elements

This guide covers all available document elements in json2doc. Each element type has specific properties and use cases for creating professional documents.

Markdown Formatting Support

All text elements in json2doc support Markdown formatting for rich text styling. You can use bold, italic, and hyperlinks in any text content including headings, paragraphs, list items, table cells, and captions.

Supported Formatting:

• Bold text: **text** → text
• Italic text: *text* → text
• Hyperlinks: [text](url) → text
• Bold links: [**text**](url) → text
• Italic links: [*text*](url) → text

Text Elements

Text elements form the foundation of document content, providing various levels of hierarchy and formatting options.

Headings (h1-h6)

Headings create document structure and hierarchy. Six levels are available, from h1 (largest) to h6 (smallest).

Properties

Property	Type	Required	Description	Default
type	string	✓	Element type: "h1", "h2", "h3", "h4", "h5", or "h6"	-
text	string	✓	Heading text (supports markdown)	-
fontFamily	string	✗	Font family override	From defaults
fontSize	number	✗	Font size in points (6-72)	From defaults
align	string	✗	Text alignment: "left", "center", "right", "justify"	From defaults
color	string	✗	Text color in hex format (#000000)	From defaults
spacing	object	✗	Custom spacing override	From defaults

Heading Examples

{
  "document": {
    "type": "pdf",
    "filename": "heading-elements-example"
  },
  "sections": [
    {
      "type": "flow",
      "content": [
        {
          "type": "h1",
          "text": "Main Document Title",
          "align": "center",
          "color": "#0066cc",
          "fontSize": 32
        },
        {
          "type": "h2",
          "text": "Chapter Heading with **Bold** Text",
          "fontSize": 24
        },
        {
          "type": "h3",
          "text": "Section Heading",
          "fontFamily": "Times New Roman",
          "fontSize": 18
        },
        {
          "type": "h4",
          "text": "Subsection with Custom Spacing",
          "fontSize": 16,
          "spacing": {
            "before": 20,
            "after": 10
          }
        },
        {
          "type": "h5",
          "text": "Minor Heading",
          "fontSize": 14
        },
        {
          "type": "h6",
          "text": "Smallest Heading Level",
          "fontSize": 12
        }
      ]
    }
  ]
}

Text Elements

Regular text content with markdown support for formatting.

Properties

Property	Type	Required	Description	Default
type	string	✓	Element type: "text" or "text2"	-
text	string	✓	Text content (supports markdown)	-
fontFamily	string	✗	Font family override	From defaults
fontSize	number	✗	Font size in points (6-72)	From defaults
fontWeight	string	✗	Font weight: "normal" or "bold"	From defaults
align	string	✗	Text alignment: "left", "center", "right", "justify"	From defaults
color	string	✗	Text color in hex format	From defaults
spacing	object	✗	Custom spacing override	From defaults

note

text2 is a smaller text variant, typically used for captions, footnotes, or supplementary information.

Text Examples

{
  "document": {
    "type": "pdf",
    "filename": "text-elements-example"
  },
  "sections": [
    {
      "type": "flow",
      "content": [
        {
          "type": "text",
          "text": "Regular paragraph text with **bold**, *italic*, and ***bold italic*** formatting. You can also include [hyperlinks](https://example.com) in your text."
        },
        {
          "type": "text",
          "text": "This paragraph demonstrates justified alignment, which distributes text evenly across the full width of the page for a professional appearance.",
          "align": "justify"
        },
        {
          "type": "text",
          "text": "Centered text with custom color and Bold",
          "align": "center",
          "color": "#0066cc",
          "fontWeight": "bold"
        },
        {
          "type": "text",
          "text": "Text with custom spacing and font",
          "fontFamily": "Times New Roman",
          "spacing": {
            "before": 20,
            "after": 15
          }
        },
        {
          "type": "text2",
          "text": "This is text2 style - smaller and typically used for captions or footnotes"
        }
      ]
    }
  ]
}

Visual Elements

Images

Images can be embedded with various sizing and alignment options. You can use both uploaded files and public URLs.

Properties

Property	Type	Required	Description	Default
type	string	✓	Element type: "image"	-
src	string	✓	Image source: file path (starts with /) or public URL (http/https)	-
alt	string	✗	Alternative text for accessibility	-
width	number	✗	Image width in pixels (10-2000)	Auto
height	number	✗	Image height in pixels (10-2000)	Auto
align	string	✗	Image alignment: "left", "center", "right"	"left"
spacing	object	✗	Custom spacing override	From defaults

Image Examples

{
   "document":{
      "type":"pdf",
      "filename":"image-elements-example"
   },
   "defaults":{
      "fontSize":20
   },
   "sections":[
      {
         "type":"flow",
         "content":[
            {
               "type":"text",
               "text":"Left aligned with custom spacing (uploaded file):"
            },
            {
               "type":"image",
               "src":"/image/2025-11-01/cmh107bik0001116um9xyurjo/8db55720-ec15-4424-985c-c73ce0d9955f.png",
               "alt":"Company Logo",
               "width":150,
               "align":"left",
               "spacing":{
                  "before":20,
                  "after":100
               }
            },
            {
               "type":"text",
               "text":"Center aligned (public URL):"
            },
            {
               "type":"image",
               "src":"https://dummyimage.com/600x400/14b5b8/fafafa.png&text=Simple+Chart",
               "alt":"Sample Chart from Public URL",
               "width":300,
               "align":"center"
            },
            {
               "type":"text",
               "text":"Right aligned (uploaded file):"
            },
            {
               "type":"image",
               "src":"/image/2025-11-01/cmh107bik0001116um9xyurjo/4294a034-8a21-4602-b35b-2dc74344a11d.png",
               "alt":"Process Diagram",
               "align":"right",
               "width":300
            }
         ]
      }
   ]
}

QR Codes

Generate and embed QR codes dynamically for URLs, WiFi credentials, or contact cards (vCard). QR codes are always square (1:1 aspect ratio).

Properties

Property	Type	Required	Description	Default
type	string	✓	Element type: "qrcode"	-
qrType	string	✓	QR code type: "url", "wifi", or "vcard"	-
data	object	✓	QR code content (structure depends on qrType)	-
size	number	✗	QR code size in pixels (50-1000, always square)	200
errorCorrection	string	✗	Error correction level: "L" (~7%), "M" (~15%), "Q" (~25%), "H" (~30%)	"M"
align	string	✗	QR code alignment: "left", "center", "right"	"left"
spacing	object	✗	Custom spacing override	From defaults

QR Code Types

URL QR Code (qrType: "url"):

• url (required): Any valid URL (max 2000 chars)

WiFi QR Code (qrType: "wifi"):

• ssid (required): Network name (max 32 chars)
• password (optional): Network password (max 63 chars)
• encryption (optional): "WPA", "WEP", or "nopass" (default: "WPA")
• hidden (optional): Boolean, whether network is hidden (default: false)

vCard QR Code (qrType: "vcard"):

• firstName (optional): First name (max 100 chars)
• lastName (optional): Last name (max 100 chars)
• organization (optional): Company name (max 100 chars)
• phone (optional): Phone number (max 50 chars)
• email (optional): Email address (max 100 chars)
• url (optional): Website URL (max 200 chars)
• address (optional): Physical address (max 200 chars)
• note (optional): Additional notes (max 500 chars)

QR Code Examples

{
  "document": {
    "type": "pdf",
    "filename": "qrcode-elements-example"
  },
  "sections": [
    {
      "type": "flow",
      "content": [
        {
          "type": "h2",
          "text": "QR Code Examples"
        },
        {
          "type": "text",
          "text": "**URL QR Code** - Scan to visit website:"
        },
        {
          "type": "qrcode",
          "qrType": "url",
          "data": {
            "url": "https://www.json2doc.com"
          },
          "size": 150,
          "align": "center",
          "errorCorrection": "M"
        },
        {
          "type": "text",
          "text": "**WiFi QR Code** - Scan to connect to network:"
        },
        {
          "type": "qrcode",
          "qrType": "wifi",
          "data": {
            "ssid": "Office-Network",
            "password": "SecurePassword123",
            "encryption": "WPA",
            "hidden": false
          },
          "size": 200,
          "align": "center",
          "errorCorrection": "H"
        },
        {
          "type": "text",
          "text": "**vCard QR Code** - Scan to save contact:"
        },
        {
          "type": "qrcode",
          "qrType": "vcard",
          "data": {
            "firstName": "John",
            "lastName": "Doe",
            "organization": "TechSolutions AG",
            "phone": "+49 30 1234 5678",
            "email": "john.doe@techsolutions.com",
            "url": "https://www.techsolutions.com",
            "address": "Alexanderplatz 1, 10178 Berlin, Germany"
          },
          "size": 250,
          "align": "center",
          "errorCorrection": "H"
        }
      ]
    }
  ]
}

Data Elements

Lists

Lists organize information in ordered or unordered formats with support for nesting.

Properties

Property	Type	Required	Description	Default
type	string	✓	Element type: "list"	-
ordered	boolean	✗	true = numbered list, false = bullet list	false
items	array	✓	List items (strings or objects with nested items)	-
spacing	object	✗	Custom spacing override	From defaults

List Item Properties

Property	Type	Required	Description
text	string	✓	Item text (supports markdown)
items	array	✗	Nested list items

List Examples

{
  "document": {
    "type": "pdf",
    "filename": "list-elements-example"
  },
  "sections": [
    {
      "type": "flow",
      "content": [
        {
          "type": "list",
          "ordered": false,
          "items": [
            "Simple bullet point with **bold text**",
            "Another item with *italic formatting*",
            "Item with [hyperlink](https://example.com)"
          ]
        },
        {
          "type": "list",
          "ordered": true,
          "items": [
            "First numbered item",
            {
              "text": "Second item with nested list",
              "items": [
                "Nested bullet point",
                "Another nested item with **formatting**",
                {
                  "text": "Deeply nested item",
                  "items": [
                    "Level 3 item",
                    "Another level 3 item"
                  ]
                }
              ]
            },
            "Third main item"
          ]
        },
        {
          "type": "list",
          "ordered": false,
          "items": [
            "**Technology Stack**",
            {
              "text": "*Frontend Technologies*",
              "items": [
                "React with **TypeScript**",
                "Next.js for [SSR](https://nextjs.org)",
                "Tailwind CSS for styling"
              ]
            },
            {
              "text": "*Backend Technologies*",
              "items": [
                "Node.js with ***Express***",
                "PostgreSQL database",
                "Redis for caching"
              ]
            }
          ],
          "spacing": {
            "after": 20
          }
        }
      ]
    }
  ]
}

Tables

Tables display structured data with extensive styling options.

Properties

Property	Type	Required	Description	Default
type	string	✓	Element type: "table"	-
headers	array	✗	Table header row (max 20 columns)	-
rows	array	✓	Table data rows (max 100 rows, 20 columns each)	-
caption	string	✗	Table caption	-
spacing	object	✗	Custom spacing override	From defaults
style	object	✗	Table styling options	Default styles

Table Style Properties

Property	Type	Description
borders.outer	object	Outer border styling (width, color, style)
borders.inner	object	Inner border styling (width, color, style)
header	object	Header row styling (backgroundColor, color, fontSize, fontWeight, align)
rows	object	Data row styling (backgroundColor, color, fontSize, fontWeight, align, alternateBackgroundColor)
cellPadding	object	Cell padding (top, right, bottom, left)

Table Examples

{
  "document": {
    "type": "pdf",
    "filename": "table-elements-example"
  },
  "sections": [
    {
      "type": "flow",
      "content": [
        {
          "type": "table",
          "caption": "Employee Directory",
          "headers": ["Name", "Department", "Role"],
          "rows": [
            ["John Doe", "Engineering", "**Senior Developer**"],
            ["Jane Smith", "Marketing", "*Content Manager*"],
            ["Bob Johnson", "Sales", "Account Executive"]
          ]
        },
        {
          "type": "table",
          "caption": "Quarterly Performance Metrics 2024",
          "headers": ["Quarter", "Revenue", "Growth", "Status", "Notes"],
          "rows": [
            ["**Q1**", "$1,250,000", "+12%", "**Good**", "*Target met*"],
            ["**Q2**", "$1,480,000", "+18%", "**Excellent**", "***Exceeded target***"],
            ["**Q3**", "$1,620,000", "+22%", "**Excellent**", "**Above expectations**"],
            ["**Q4**", "$1,850,000", "+28%", "***Outstanding***", "[Details](https://example.com)"]
          ],
          "style": {
            "borders": {
              "outer": {
                "width": 2,
                "color": "#0066cc",
                "style": "solid"
              },
              "inner": {
                "width": 1,
                "color": "#cccccc",
                "style": "dashed"
              }
            },
            "header": {
              "backgroundColor": "#0066cc",
              "color": "#ffffff",
              "fontSize": 12,
              "fontWeight": "bold",
              "align": "center"
            },
            "rows": {
              "backgroundColor": "#f8f9fa",
              "color": "#333333",
              "fontSize": 10,
              "fontWeight": "normal",
              "align": "left",
              "alternateBackgroundColor": "#ffffff"
            },
            "cellPadding": {
              "top": 12,
              "right": 12,
              "bottom": 12,
              "left": 12
            }
          }
        },
        {
          "type": "table",
          "headers": ["Feature", "Basic", "Pro", "Enterprise"],
          "rows": [
            ["API Access", "**Limited**", "**Full**", "**Full**"],
            ["Storage", "1 GB", "100 GB", "***Unlimited***"],
            ["Support", "*Email*", "*Email + Chat*", "**24/7 Phone**"],
            ["Price", "$0", "$49/mo", "[Contact](mailto:sales@example.com)"]
          ],
          "style": {
            "borders": {
              "outer": {
                "width": 1,
                "color": "#00aa00",
                "style": "solid"
              },
              "inner": {
                "width": 0.5,
                "color": "#dddddd",
                "style": "dotted"
              }
            },
            "header": {
              "backgroundColor": "#00aa00",
              "color": "#ffffff",
              "fontSize": 11,
              "fontWeight": "bold",
              "align": "center"
            },
            "rows": {
              "backgroundColor": "#f0f8f0",
              "color": "#006600",
              "fontSize": 9,
              "fontWeight": "normal",
              "align": "center",
              "alternateBackgroundColor": "#ffffff"
            }
          }
        }
      ]
    }
  ]
}

Layout Elements

Page Break

Page breaks control document flow and can change page orientation.

Properties

Property	Type	Required	Description	Default
type	string	✓	Element type: "pageBreak"	-
orientation	string	✗	Page orientation: "portrait" or "landscape"	Current orientation

Page Break Examples

{
  "document": {
    "type": "pdf",
    "filename": "pagebreak-elements-example"
  },
  "sections": [
    {
      "type": "flow",
      "content": [
        {
          "type": "text",
          "text": "Content before page break"
        },
        {
          "type": "pageBreak"
        },
        {
          "type": "text",
          "text": "Content on new page with same orientation"
        },
        {
          "type": "pageBreak",
          "orientation": "landscape"
        },
        {
          "type": "text",
          "text": "Content on landscape page"
        },
        {
          "type": "pageBreak",
          "orientation": "portrait"
        },
        {
          "type": "text",
          "text": "Back to portrait orientation"
        }
      ]
    }
  ]
}

Element Spacing

All elements support custom spacing overrides through the spacing property:

Property	Type	Description	Range
before	number	Spacing before element in points	0-100
after	number	Spacing after element in points	0-100

Spacing Example

{
  "type": "text",
  "text": "Text with custom spacing",
  "spacing": {
    "before": 20,
    "after": 15
  }
}

Markdown Support

Most text elements support markdown formatting:

• Bold text: **bold**
• Italic text: *italic*
• Bold italic: ***bold italic***
• Links: [link text](url)

Markdown Example

{
  "type": "text",
  "text": "This text has **bold**, *italic*, ***bold italic***, and [link](https://example.com) formatting."
}

Best Practices

1. Use appropriate heading levels to create clear document hierarchy
2. Leverage markdown formatting for emphasis and links within text
3. Apply consistent spacing using defaults and selective overrides
4. Choose appropriate alignments based on content type and document style
5. Use tables for structured data with proper headers and styling
6. Optimize images for document size and quality
7. Structure lists logically with appropriate nesting levels
8. Use page breaks strategically to control document flow and orientation

Next Steps

• Learn about Document Structure for organizing sections
• Explore Builder API for programmatic document creation
• Check API Reference for complete endpoint documentation