Adding HTML Documents to Composite Templates in Docusign REST API v2.1

I am trying to use Composite Templates to send an envelope for signatures from Salesforce. I have 3 server templates that I am referencing in my request. I am able to send the three server templates over for signatures without any problem. Recently, we had a requirement to send another document, which would have a table with data from salesforce. This table is not static and varies from time to time depending on the number of available rows in salesforce.

So I decided to leverage 'htmlDefinition' property in the 'document' object to send the html markup that I prepare from Salesforce.

When I send the request it does not load my htmlDefinition document and says 'You have no documents'. Please find below my request file. Any help is appreciated as I've be at it for almost a week now! :(

WHAT I'VE TRIED: I am able to send the htmlDefinition document using regular sending method, But it doesnt work with Composite templates

{
  "status": null,
  "enforceSignerVisibility": "true",
  "emailSubject": "EMAIL_SUBJECT",
  "emailBlurb": "EMAIL_BLURB",
  "compositeTemplates": [
    {
      "serverTemplates": null,<**NOT PASSING ANY serverTemplates, I want the html document below to be rendered instead**>
      "inlineTemplates": [
        {
          "sequence": "1",
          "recipients": {
            "signers": [
              {
                "tabs": {
                  "textTabs": null,
                  "signHereTabs": null,
                  "fullNameTabs": null,
                  "dateSignedTabs": null
                },
                "signerRole": "Signer",
                "routingOrder": "1",
                "roleName": null,
                "recipientId": "1",
                "name": "PuppySaturation",
                "excludedDocuments": null,
                "email": "[email protected]"
              }
            ]
          },
          "customFields": null
        }
      ],
      "document": {
        "name": "Contract",
        "htmlDefinition": {
          "source": "<html>HTML markup to create a table data. This table data is dynamically generated on salesforce apex side, I verified the markup, It was clean and had no issues in it. The markup also has ds-signature data-ds-role='Signer' to match the signer role of 1st recipient</html>"
        },
        "documentId": "1",
        "documentBase64": null<**NOT PASSING base64, I want html source to render. Could this be the issue?**>
      },
      "compositeTemplateId": "1"
    }
  ]
}

UPDATE: Per Larry K's answer, the below modification to the document object worked:

"document": {
    "name": "Contract",
    "documentId": "1",
    "documentBase64": <base64EncodedHTML>,
    "fileExtension" : "html"
  }

Solution

There are two ways to use HTML documents as the doc source.

This live demo shows both techniques.

Send HTML instead of a PDF. In this case, base64 encode the html:

"document": {
    "name": "Contract",
    "documentId": "1",
    "documentBase64": html_base64_encoded,
    "fileExtension": "html" // VERY important!
},

Using this technique, you do NOT need the responsive signing support.

Send HTML, enabled for responsive signing, and perhaps for "smart sections" too. This enables you to encode tab locations within your HTML. It also enables your HTML to include sections that will fold/unfold for the signer to see. Documentation

This is where you use the html definition attribute.