Skip to main content

Document Elements

This page gives you a quick overview of all element types available in json2doc. Each element has its own dedicated page with detailed properties, defaults, and examples.

Markdown Formatting Support

All text-based elements in json2doc support Markdown formatting for rich text styling. You can use bold, italic, underline, highlight, 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
  • Underlined text: __text__ → text
  • ==Highlighted text==: ==text== → ==text==
  • Hyperlinks: [text](url) → text
  • Bold links: [**text**](url) → text
  • Italic links: [*text*](url) → text

Text & Headings​

Text and heading elements (h1–h6, text, text2) are the foundation of your document content.

Example JSON (headings + text):

{
  "document": {
    "...": "..."
  },
  "sections": [
    {
      "type": "flow",
      "content": [
        { "type": "h1", "text": "Report Title" },
        { "type": "h2", "text": "Section Heading" },
        { "type": "text", "text": "Regular paragraph with **markdown** support." },
        { "type": "text2", "text": "Smaller caption or footnote text." }
      ]
    }
  ]
}
Word headings in DOCX

When generating DOCX documents, heading elements h1–h6 are exported as real Word heading paragraphs ("Heading 1"–"Heading 6"). They are recognized by Word's navigation pane and automatic Table of Contents generation.

See full details on Text Elements.

Images​

The image element embeds images from uploaded files (storage URLs) or public HTTP/HTTPS URLs.

Example JSON:

{
  "document": {
    "...": "..."
  },
  "sections": [
    {
      "type": "flow",
      "content": [
        {
          "type": "image",
          "src": "https://example.com/image.png",
          "alt": "Example image",
          "width": 300,
          "align": "center"
        }
      ]
    }
  ]
}

See full details on Image Elements.

Tables​

The table element displays structured data in rows and columns with rich styling options.

Example JSON:

{
  "document": {
    "...": "..."
  },
  "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"]
          ]
        }
      ]
    }
  ]
}

See full details on Table Elements.

Lists​

Lists render ordered (numbered) and unordered (bulleted) lists, including nested items.

Example JSON:

{
  "document": {
    "...": "..."
  },
  "sections": [
    {
      "type": "flow",
      "content": [
        {
          "type": "list",
          "ordered": false,
          "items": [
            "First item",
            {
              "text": "Item with nested items",
              "items": [
                "Nested item 1",
                "Nested item 2"
              ]
            },
            "Last item"
          ]
        }
      ]
    }
  ]
}

See full details on List Elements.

Charts​

The chart element renders charts using a Chart.js-compatible configuration via the Chart API.

Example JSON:

{
  "document": {
    "...": "..."
  },
  "sections": [
    {
      "type": "flow",
      "content": [
        {
          "type": "chart",
          "width": 600,
          "align": "center",
          "config": {
            "type": "bar",
            "data": {
              "labels": ["Q1", "Q2", "Q3", "Q4"],
              "datasets": [
                {
                  "label": "Revenue (k$)",
                  "data": [125, 148, 162, 185]
                }
              ]
            }
          }
        }
      ]
    }
  ]
}

See full details on Chart Elements.

QR Codes​

The qrcode element encodes URLs, WiFi credentials, or vCard contact data as scannable QR codes.

Example JSON:

{
  "document": {
    "...": "..."
  },
  "sections": [
    {
      "type": "flow",
      "content": [
        {
          "type": "qrcode",
          "qrType": "url",
          "data": {
            "url": "https://www.json2doc.com"
          },
          "size": 180,
          "align": "center"
        }
      ]
    }
  ]
}

See full details on QR Code Elements.

Page Break​

Page breaks control document flow and can change page orientation.

Example JSON:

{
  "document": {
    "type": "pdf",
    "filename": "pagebreak-elements-example"
  },
  "sections": [
    {
      "type": "flow",
      "content": [
        {
          "type": "pageBreak"
        }
      ]
    }
  ]
}

See full details on Page Break Elements.

General​

Element Spacing​

All elements support custom spacing overrides through the spacing property:

PropertyTypeDescriptionRange
beforenumberSpacing before element in points0-100
afternumberSpacing after element in points0-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*
  • Underlined text: __underline__
  • ==Highlighted text==: ==highlight==
  • 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​