fixing the kitchen sink and linking to public playground

README.md

@@ -231,15 +231,17 @@ renderer = SVGRenderer(use_precise_measurement=False)
 
 Try markdown-svg in your browser with the interactive playground:
 
+**🚀 [Live Demo](https://markdown-svg-production.up.railway.app/)** — no installation required!
+
+Or run locally:
+
 ```bash
-# Clone the repo and run the playground
 git clone https://github.com/davefowler/markdown-svg
 cd markdown-svg
 make play
+# Open http://localhost:8765
 ```
 
-Then open http://localhost:8765
-
 Features:
 - Live preview as you type
 - Customize styling via JSON

examples/kitchen-sink.md

@@ -59,10 +59,14 @@ Images render at full width by default with a configurable aspect ratio (16:9 de
 
 ---
 
-### All Heading Levels
-#### Level 4
-##### Level 5
-###### Level 6
+## All Heading Levels
+
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
 
 ---
 

playground/index.html

@@ -573,6 +573,15 @@
         Examples
       </button>
 
+      <button id="clear-btn" class="primary white" title="Clear editor">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
+          <path d="M3 6h18"/>
+          <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+          <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
+        </svg>
+        Clear
+      </button>
+
       <button id="share-btn" class="primary white" title="Copy shareable URL">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <circle cx="18" cy="5" r="3"/>
@@ -1039,11 +1048,20 @@ <h2>Examples</h2>
       });
     }
 
+    // Clear editor
+    function clearEditor() {
+      markdownEditor.setValue('');
+      styleEditor.setValue(JSON.stringify(defaultStyle, null, 2));
+      currentExample = '';
+      updateActiveExample();
+    }
+
     // Event listeners
     markdownEditor.on('change', debouncedRender);
     styleEditor.on('change', debouncedRender);
     downloadBtn.addEventListener('click', downloadSvg);
     shareBtn.addEventListener('click', copyShareUrl);
+    document.getElementById('clear-btn').addEventListener('click', clearEditor);
 
     // Modal event listeners
     examplesBtn.addEventListener('click', openModal);
@@ -1064,9 +1082,9 @@ <h2>Examples</h2>
       // Try to load state from URL first
       const loadedFromUrl = loadStateFromUrl();
 
-      // If no URL state, load the first example
-      if (!loadedFromUrl && examplesList.length > 0) {
-        loadExample(examplesList[0].filename);
+      // If no URL state, load kitchen-sink as default
+      if (!loadedFromUrl) {
+        loadExample('kitchen-sink.md');
       }
 
       initDivider();