diff --git a/.phpunit.result.cache b/.phpunit.result.cache
index 98e9272..3422f20 100644
--- a/.phpunit.result.cache
+++ b/.phpunit.result.cache
@@ -1 +1 @@
-{"version":1,"defects":{"MetricPoster\\MetricPosterTest::test_get_results":4,"MetricPoster\\MetricPosterTest::test_get_results_with_facet":4,"MetricPoster\\MetricPosterTest::test_get_results_with_facet_and_no_metrics":4,"MetricPoster\\MetricPosterTest::test_get_results_with_no_facet":4,"MetricPoster\\MetricPosterTest::test_get_results_with_no_facet_and_no_metrics":4,"MetricPoster\\MetricPosterTest::test_get_results_with_no_facet_and_no_metrics_and_no_app_id":4,"MetricPoster\\MetricPosterTest::test_get_results_with_no_facet_and_no_metrics_and_no_app_id_and_no_nr_id":4,"MetricPoster\\MetricPosterTest::test_get_results_with_no_facet_and_no_metrics_and_no_app_id_and_no_nr_id_and_no_nr_browser_guid":4,"MetricPoster\\MetricPosterTest::test_get_results_with_no_facet_and_no_metrics_and_no_app_id_and_no_nr_id_and_no_nr_browser_guid_and_no_nr_app_guid":4,"MetricPoster\\MetricPosterTestFunctions::test_dom_string_replace":3,"MetricPoster\\MetricPosterTestFunctions::test_number_format_short":3,"MetricPoster\\MetricPosterTestFunctions::test_get_correct_year":3,"MetricPoster\\MetricPosterTestFunctions::test_getPrevKey":4,"MetricPoster\\MetricPosterTestNewRelic::test_get_results":4},"times":{"MetricPoster\\MetricPosterTest::test_get_results":0.098,"MetricPoster\\MetricPosterTest::test_get_results_with_facet":0.002,"MetricPoster\\MetricPosterTest::test_get_results_with_facet_and_no_metrics":0.409,"MetricPoster\\MetricPosterTest::test_get_results_with_no_facet":0.421,"MetricPoster\\MetricPosterTest::test_get_results_with_no_facet_and_no_metrics":0.448,"MetricPoster\\MetricPosterTest::test_get_results_with_no_facet_and_no_metrics_and_no_app_id":0.431,"MetricPoster\\MetricPosterTest::test_get_results_with_no_facet_and_no_metrics_and_no_app_id_and_no_nr_id":0.55,"MetricPoster\\MetricPosterTest::test_get_results_with_no_facet_and_no_metrics_and_no_app_id_and_no_nr_id_and_no_nr_browser_guid":0.449,"MetricPoster\\MetricPosterTest::test_get_results_with_no_facet_and_no_metrics_and_no_app_id_and_no_nr_id_and_no_nr_browser_guid_and_no_nr_app_guid":0.422,"MetricPoster\\MetricPosterTestFunctions::test_get_week_start_end":0.005,"MetricPoster\\MetricPosterTestNewRelic::test_get_results":0.072,"MetricPoster\\MetricPosterTestFunctions::test_dom_string_replace":0.001,"MetricPoster\\MetricPosterTestFunctions::test_get_prev_week_number":0.001,"MetricPoster\\MetricPosterTestFunctions::test_getPrevKey":0,"MetricPoster\\MetricPosterTestFunctions::test_number_format_short":0,"MetricPoster\\MetricPosterTestFunctions::test_get_correct_year":0.001}}
\ No newline at end of file
+{"version":1,"defects":{"MetricPoster\\MetricPosterTest::test_get_results":4,"MetricPoster\\MetricPosterTest::test_get_results_with_facet":4,"MetricPoster\\MetricPosterTest::test_get_results_with_facet_and_no_metrics":4,"MetricPoster\\MetricPosterTest::test_get_results_with_no_facet":4,"MetricPoster\\MetricPosterTest::test_get_results_with_no_facet_and_no_metrics":4,"MetricPoster\\MetricPosterTest::test_get_results_with_no_facet_and_no_metrics_and_no_app_id":4,"MetricPoster\\MetricPosterTest::test_get_results_with_no_facet_and_no_metrics_and_no_app_id_and_no_nr_id":4,"MetricPoster\\MetricPosterTest::test_get_results_with_no_facet_and_no_metrics_and_no_app_id_and_no_nr_id_and_no_nr_browser_guid":4,"MetricPoster\\MetricPosterTest::test_get_results_with_no_facet_and_no_metrics_and_no_app_id_and_no_nr_id_and_no_nr_browser_guid_and_no_nr_app_guid":4,"MetricPoster\\MetricPosterTestFunctions::test_dom_string_replace":3,"MetricPoster\\MetricPosterTestFunctions::test_number_format_short":3,"MetricPoster\\MetricPosterTestFunctions::test_get_correct_year":3,"MetricPoster\\MetricPosterTestFunctions::test_getPrevKey":4,"MetricPoster\\MetricPosterTestNewRelic::test_get_results":4},"times":{"MetricPoster\\MetricPosterTest::test_get_results":0.098,"MetricPoster\\MetricPosterTest::test_get_results_with_facet":0.002,"MetricPoster\\MetricPosterTest::test_get_results_with_facet_and_no_metrics":0.409,"MetricPoster\\MetricPosterTest::test_get_results_with_no_facet":0.421,"MetricPoster\\MetricPosterTest::test_get_results_with_no_facet_and_no_metrics":0.448,"MetricPoster\\MetricPosterTest::test_get_results_with_no_facet_and_no_metrics_and_no_app_id":0.431,"MetricPoster\\MetricPosterTest::test_get_results_with_no_facet_and_no_metrics_and_no_app_id_and_no_nr_id":0.55,"MetricPoster\\MetricPosterTest::test_get_results_with_no_facet_and_no_metrics_and_no_app_id_and_no_nr_id_and_no_nr_browser_guid":0.449,"MetricPoster\\MetricPosterTest::test_get_results_with_no_facet_and_no_metrics_and_no_app_id_and_no_nr_id_and_no_nr_browser_guid_and_no_nr_app_guid":0.422,"MetricPoster\\MetricPosterTestFunctions::test_get_week_start_end":0.037,"MetricPoster\\MetricPosterTestNewRelic::test_get_results":0.082,"MetricPoster\\MetricPosterTestFunctions::test_dom_string_replace":0.001,"MetricPoster\\MetricPosterTestFunctions::test_get_prev_week_number":0.001,"MetricPoster\\MetricPosterTestFunctions::test_getPrevKey":0,"MetricPoster\\MetricPosterTestFunctions::test_number_format_short":0,"MetricPoster\\MetricPosterTestFunctions::test_get_correct_year":0}}
\ No newline at end of file
diff --git a/metric-poster.php b/metric-poster.php
index 134cb7f..9754300 100644
--- a/metric-poster.php
+++ b/metric-poster.php
@@ -4,7 +4,7 @@
  * Plugin Name: Metric Poster
  * Plugin URI: https://github.com/Automattic/metrics-poster
  * Description: A plugin to generate a post from a template and post it to a P2 site.
- * Version: 1.0.27
+ * Version: 1.0.28
  */
 
 declare(strict_types=1);
@@ -57,4 +57,14 @@
 
 	$cron = new CronSetup();
 	$cron->run();
+
+	\add_shortcode( 'metric-poster', function () {
+		$template = __DIR__ . '/src/UI/json-table-converter.php';
+		\ob_start();
+		include $template;
+		return \ob_get_clean();
+	});
+
 });
+
+
diff --git a/src/UI/json-table-converter.php b/src/UI/json-table-converter.php
new file mode 100644
index 0000000..f3a2db7
--- /dev/null
+++ b/src/UI/json-table-converter.php
@@ -0,0 +1,187 @@
+<?php
+
+// strict types
+declare(strict_types=1);
+
+// namespace
+namespace MetricPoster;
+
+use MetricPoster\JsonToGutenbergTable;
+
+// check if form is submitted.
+if (isset($_POST['submit'])) {
+    $json_data = $_POST['json_data'];
+
+    // remove slashes.
+    $json_data = stripslashes($json_data);
+
+    // decode json data.
+    $json_data = json_decode($json_data, true);
+
+    // check if json data is valid.
+    if (json_last_error() === JSON_ERROR_NONE) {
+        
+        try {
+            // create table.
+            // create table from json data.
+            $table = new JsonToGutenbergTable($json_data['data'], $json_data['headers']);
+
+            $caption = $json_data['caption'] ?? '';
+            $table->addCaption($caption);
+            $table_html = $table->getTableHtml();
+        } catch (\Exception $e) {
+            $error_message = $e->getMessage();
+        }
+
+    } else {
+        $error_message = json_last_error_msg();
+    }
+}
+
+?>
+
+<style>
+    #json_data {
+        width: 100%;
+        height: 200px;
+    }
+
+    /* emulate dark code editor textarea */
+    #json_data {
+        background-color: #1e1e1e;
+        color: #d4d4d4;
+        font-family: monospace;
+        font-size: 1rem;
+        padding: 10px;
+    }
+
+    .table-output {
+        margin-top: 20px;
+    }
+
+    .error {
+        background-color: #f8d7da;
+        color: #721c24;
+        padding: 10px;
+        margin-top: 20px;
+    }
+
+    .toast {
+        background-color: #f8d7da;
+        color: #721c24;
+        padding: 10px;
+        margin-top: 20px;
+    }
+
+    .toast h2 {
+        margin-top: 0;
+    }
+
+    .toast p {
+        margin-bottom: 0;
+    }
+
+    .output-wrapper {
+        position: relative;
+    }
+
+    #copy-button {
+        position: absolute;
+        top: 0;
+        right: 0;
+    }
+
+    #table-html {
+        font-family: monospace;
+        font-size: 1rem;
+        padding: 10px;
+        border: 1px solid #ccc;
+        white-space: pre-wrap;
+    }
+
+    pre {
+        white-space: pre-wrap;
+    }
+
+    table {
+        border-collapse: collapse;
+        width: 100%;
+    }
+
+    .example-code {
+        background-color: #f8f9fa;
+        padding: 10px;
+        border: 1px solid #ccc;
+        font-size: 0.85rem;
+        width: 100%;
+    }
+
+    .example-wrapper {
+        margin-top: 20px;
+    }
+
+    .example-wrapper p {
+        margin-bottom: 0;
+    }
+
+    #submit-json__btn {
+        margin-top: 20px;
+        padding: 10px;
+        background-color: #0073aa;
+        color: #fff;
+        border: none;
+        cursor: pointer;
+        border-radius: 4px;
+    }
+    
+</style>
+
+<?php if (isset($table_html)) : ?>
+    <div class="table-output">
+        <h2>Table</h2>
+        <!-- output html code with copy button -->
+        <div class="output-wrapper">
+            <button id="copy-button">Copy</button>
+            <pre id="table-html"><?php echo htmlspecialchars($table_html); ?></pre>
+        </div>
+
+        <script>
+            document.getElementById('copy-button').addEventListener('click', function() {
+                var tableHtml = document.getElementById('table-html');
+
+                // copy tableHTML.innerText to clipboard.
+                navigator.clipboard.writeText(tableHtml.innerText).then(function() {
+                    alert('Table HTML copied to clipboard');
+                }, function(err) {
+                    console.error('Failed to copy: ', err);
+                });
+            });
+        </script>
+    </div>
+<?php endif; ?>
+
+<?php if (isset($error_message)) : ?>
+    <div class="error toast">
+        <h2>Error</h2>
+        <p><?php echo $error_message; ?></p>
+    </div>
+<?php endif; ?>
+
+<form method="post">
+    <label for="json_data">Paste JSON data here:</label>
+    <textarea name="json_data" id="json_data" cols="30" rows="10"><?php echo $_POST['json_data'] ?? ''; ?></textarea>
+
+    <div class="example-wrapper">
+        <p>example: </p>
+        <pre class="example-code">
+        { 
+            "headers": [ "Metric", "Week 2", "Week 3"],
+            "data": [ [ "LCP", "1.2", "1.3"], ["CLS", "0.5", "0.7"] ],
+            "caption": "Metrics for the week"
+        }
+        </pre>
+    </div>
+
+    <input id="submit-json__btn" type="submit" name="submit" value="Submit">
+
+</form>
diff --git a/src/class-json-to-table.php b/src/class-json-to-table.php
index a1f49f5..3ddafae 100644
--- a/src/class-json-to-table.php
+++ b/src/class-json-to-table.php
@@ -155,7 +155,7 @@ public function addTableComments() : void {
      * @param string $caption_text Caption text.
      * @return void
      */
-    public function addCaption( string $caption_text ) : void {
+    public function addCaption( string $caption_text = '' ) : void {
 
         $figure = $this->table_html->createElement('figure');
 		$figure->setAttribute('class', 'wp-block-table');
@@ -165,9 +165,10 @@ public function addCaption( string $caption_text ) : void {
         $table = $this->table_html->getElementsByTagName('table')[0];
         $figure->appendChild($table);
 
-        $caption_element = $this->table_html->createElement('figcaption', $caption_text);
-        $caption_element->setAttribute('class', 'wp-element-caption');
-        $figure->appendChild($caption_element);
+        if ( ! empty($caption_text) ) {
+            $figcaption = $this->table_html->createElement('figcaption', $caption_text);
+            $figure->appendChild($figcaption);
+        }
     }
 
     /**
@@ -196,6 +197,7 @@ public function getTableHtml() : string {
             $this->has_comments = true;
         }
 
+        // return preg_replace('~<(?:!DOCTYPE|/?(?:html|body))[^>]*>\s*~i', '', $this->table_html->saveHTML());
         return $this->table_html->saveHTML();
     }
 }
\ No newline at end of file