Documentation - Thunder Client

Chart View (Beta)

This feature is available in the paid version.

The feature is useful for response data visualization.
Create charts or tables from the response using tc.chartHTML() from the Tests tab scripting.
When you pass data to the tc.chartHTML(template, data) function, the data is available in the chart_data global variable.
The feature is in beta; please test it and let us know your feedback.

var template = `
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.8/handlebars.min.js"></script>
 
    <div id="output"></div>
    <script id="entry-template" type="text/x-handlebars-template">
          <div class="entry">
            <h2>{{first_name}}</h2>
            <div class="body">
              {{email}}
            </div>
          </div>
        </script>
    <script>
    
    var source = document.getElementById("entry-template").innerHTML;
    var templateData = Handlebars.compile(source);
 
    document.getElementById("output").innerHTML = templateData(chart_data[0]);
    </script>
`;
 
var data = tc.response.json.data;
tc.chartHTML(template, data);

Convert JSON Response to HTML Table

Here is a generic example to convert any response JSON array to an HTML table.

You can modify the style as needed.

var response = tc.response.json;
 
var html = `
    <style>
      body {
        font-size: 13px;
        font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
      }
 
      table {
        width: 100%;
        box-sizing: border-box;
        border-collapse: collapse;
        border-spacing: 0;
      }
 
      td,
      th {
        padding: 0;
      }
 
      th, td {
        padding: 4px 6px;
        text-align: left;
        border-bottom: 1px solid #E1E1E1;
      }
 
      th:first-child,
      td:first-child {
        padding-left: 0;
      }
 
      th:last-child,
      td:last-child {
        padding-right: 0;
      }
 
     /* for dark mode use .vscode-dark to override */
     .vscode-dark th, .vscode-dark td {
        border-bottom: 1px solid #555;
      }
  
  </style>
 
    <div id="container"></div>
    
    <script>
         // get the container element
         let container = document.getElementById("container");
         
         var cols = Object.keys(chart_data[0]);
 
          var headerRow = '<tr>';
          var bodyRows = '';
      
          cols.map(function(col) {
              headerRow += '<th>' + col + '</th>';
          });
      
          headerRow += '</tr>';
      
          chart_data.map(function(row) {
              bodyRows += '<tr>';
      
              cols.map(function(colName) {
                  bodyRows += '<td>' + row[colName] + '</td>';
              })
      
              bodyRows += '</tr>';
          });
      
          var tabledata=  '<table>' + headerRow + bodyRows + '</table>';
         container.innerHTML = tabledata; // set table html
      
   </script>`
   
   tc.chartHTML(html, response);

Dark Mode Styles

For dark mode use .vscode-dark to override styles, see example below

    /* for dark mode use .vscode-dark to override */
     .vscode-dark th, .vscode-dark td {
        border-bottom: 1px solid #555;
      }

Copying Text to Clipboard

The chat view is in an iframe and has no access to navigator.clipboard. You can copy text to the clipboard by using parent.postMessage() to send a message to the parent window.

parent.postMessage({ command: 'copy-text', "text": "textdatatocopy" });

The example below demonstrates how to copy text to the clipboard.

Chart View (Beta)

Convert JSON Response to HTML Table

Dark Mode Styles

Copying Text to Clipboard

Clipboard Example