Documentation
  • Welcome to Documentero Docs
  • General
    • Usage Limits and Quotas
    • Manage Account & Plans
    • Documentero Roadmap / Changelog
    • Privacy Policy
    • Frequently Asked Questions
  • templates
    • Templates Introduction & Tutorial
    • Template Upload/Re-upload
    • Organize Templates into Folders
    • Fields
    • Fields - Images
    • Fields - QRCodes
    • Fields - Links
    • Fields - HTML Support
    • Fields - Markdown Support
    • Fields - Mermaid Support
    • Fields - Formatters
    • Sections
    • Sections - Types & Options
    • Smart Fields
    • Smart Sections
    • Template Variables
  • Charts & Diagrams
  • Forms
    • Create Documents using Form
    • How to customize document form
    • Fields/Sections - General Settings
    • Field- Types & Options
      • Field - Multi Checkbox
      • Field - Checkbox
      • Field - Radio Button
      • Field - Datepicker
      • Field - Radio Select
      • Field - Select
      • Field - Multiline
      • Field - Number
      • Field - TextField
    • Conditional Fields & Sections
    • Shared Forms
      • Sharing Forms
      • Shared Form Configuration
      • Consent Form (GDPR)
      • Embeed & customize shared form on your website
  • Spreadsheet
    • Create Documents using Spreadsheet
  • API
    • Create Documents using API & JSON
    • Integrate with Documentero Cloud API
  • ChatGPT
    • Create Documents using ChatGPT
  • Integrations
    • Zapier
    • Make.com
    • Integrately
    • Pabbly Connect
    • Albato
    • Bubble.io Plugin
    • Webflow
    • Flutterflow
Powered by GitBook
On this page
  1. templates

Fields - HTML Support

You can pass HTML as a field value to get the dynamic formatted text inside the output Document.

You need to add an "*" in front of your field name The final syntax should be: {*fieldName}

{description} - Regular Field that supports only text and newline character
{*description} - Special field that supports HTML as input

Supported HTML Tags

There is a limited number of HTML tags that you can use for HTML to Document conversion here is the list:

<a>
<b>
<br>
<code>
<del>
<div> is treated as <p>
<em>
<h1-h6> tags, they translate to paragraphs with different font-size
<i>
<img>
<ins>
<p>
<pre>
<s>
<span>
<strike>
<strong>
<sub> and <sup>
<table>, <tr>, <td>, <tbody>, <thead>, <tfoot>, <th> tags
<ul>, <ol> and <li> for ordered (bullet list) and unordered lists

Inline styles

Experimental: Documentero can also parse styling properties. Keep in mind that specific styles work only on specific elements, and if a value is unrecognized or cannot be converted into the document format, the styling will be omitted.

'background'
'background-color'
'border'
'border-bottom'
'border-collapse'
'border-color'
'border-left'
'border-right'
'border-style'
'border-top'
'border-width'
'color'
'column-span'
'display'
'font'
'font-size'
'font-weight'
'height'
'line-height'
'margin'
'margin-left'
'margin-right'
'page-break-after'
'text-align'
'vertical-align'
'width'

Links

If you pass link elements they will be added as clickable hyperlinks to your document

<a href="URL">Linktext</a>

Page Breaks

Pass div element with class 'page-break' or style property 'page-break-after'

<p class="break-break"></p> - Creates page-break in output document

Mermaid Diagrams

<p class="mermaid">
  graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D;
</p>

Hints

  • Font settings for text in HTML content will be inherited from your template's Regular Text Styling Settings. You can change them in your document template styling unless they are explicitly defined with styling properties.

  • Unknown tags in HTML will be omitted in the output document.

  • HTML tags cannot be used inline with other text or bindings. Use them in a separate paragraph:

Some text {*description} rest of text ====> INCORRECT

{#section}  {*description} {/section} ====> INCORRECT

Some text:
{*description} 
rest of text ====> CORRECT

{#section}
{*description}
{/section} ====> CORRECT
PreviousFields - LinksNextFields - Markdown Support

Last updated 28 days ago

You can pass mermaid charts, and diagrams using the syntax below. . Read more about mermaid syntax:

https://mermaid.js.org/intro/