# How to construct a dynamic html content using template node

In this tutorial we will be constructing an html snippet content based on the input payload using the template node.

  1. TBD Following is the payload used for is the use case.

     {
         "Org_Name" : "Kumologica",
         "Tag_line" : "API & Integration at the speed of serverless",
         "Subtext" : "Draw once deploy anywhere!!"
     }
    
  2. Drop the JSON node on to the canvas and keep all the values as default.

  3. Wire the TBD to JSON node.

  4. Drag and drop the template node from the transformation section in the pallete to the canvas. Double click the template node to open the editor.

  5. Set the property as msg.payload. Select the format as plain text. Select the syntax highlight as html. Set the output as plain text.

  6. Place the below template on the template node to furnish out the html content.

    <html>
     <h1>{{msg.payload.Org_Name}}</h1>
     <h3>{{msg.payload.Tag_line}}</h3>
     <p><b>{{msg.payload.Subtext}}</b></p>
    </html>
    
  7. Click Save.

  8. Drop the debug node to the end of the flow and name it as Completed.

  9. Now click the TBD to test the flow.

Observation

On the debug panel of the editor you could see the following html content printed.

<html><h1>{{msg.payload.Org_Name}}</h1>    <h3>{{msg.payload.Tag_line}}</h3>    <p><b>{{msg.payload.Subtext}}</b></p></html>