diff --git a/src/App.tsx b/src/App.tsx
index 108388e..9f57eea 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,7 +8,7 @@ import { renderToStaticMarkup } from 'react-dom/server'
 type TemplateEntry = (typeof templates)[number]
 
 type DeviceMode = 'desktop' | 'mobile'
-type ContentMode = 'preview' | 'html'
+type ContentMode = 'preview' | 'html' | 'json'
 
 function App() {
   const [selectedId, setSelectedId] = useState<TemplateId>('invitation')
@@ -37,6 +37,11 @@ function App() {
 </html>`
   }, [SelectedComponent, selected])
 
+  const json = useMemo(
+    () => JSON.stringify(selected.props, null, 2),
+    [selected],
+  )
+
   return (
     <div className="app-shell">
       <aside className="app-panel app-sidebar">
@@ -143,9 +148,18 @@ function App() {
             >
               HTML
             </button>
+            <button
+              type="button"
+              className={
+                'chip' + (contentMode === 'json' ? ' chip--active' : '')
+              }
+              onClick={() => setContentMode('json')}
+            >
+              JSON
+            </button>
           </div>
         </div>
-        {contentMode === 'preview' ? (
+        {contentMode === 'preview' && (
           <div className="preview-frame">
             <div
               className={
@@ -161,13 +175,15 @@ function App() {
               </div>
             </div>
           </div>
-        ) : (
+        )}
+        {contentMode === 'html' && (
           <div className="preview-frame">
-            <textarea
-              className="html-output"
-              readOnly
-              value={html}
-            />
+            <textarea className="html-output" readOnly value={html} />
+          </div>
+        )}
+        {contentMode === 'json' && (
+          <div className="preview-frame">
+            <textarea className="html-output" readOnly value={json} />
           </div>
         )}
       </main>