From 77f64d28625fc55b2c79267a940400aebe280ce9 Mon Sep 17 00:00:00 2001
From: root <root@claude.deathstar-home.one>
Date: Thu, 26 Feb 2026 15:15:53 -0600
Subject: [PATCH] Add Tailwind CSS toggle, Markdown/WASM modes, and npm import
 resolution

- Tailwind CSS: toolbar checkbox injects Play CDN into preview, persisted
  per-fiddle via new options JSON column
- Markdown mode: uses marked.js CDN, renders markdown to HTML preview with
  CSS tab for custom styling
- WASM mode: starter template with inline WebAssembly add function, supports
  top-level await via module detection
- npm imports: auto-detect bare import specifiers in module code and inject
  importmap pointing to esm.sh CDN
- Module auto-detection for html-css-js mode (import/export statements)
- DB migration adds options column, server passes through all API endpoints
- All features work across preview, export, and embed
---
 db.js                         | 11 +++++---
 public/browse.html            |  2 ++
 public/css/style.css          | 12 +++++++++
 public/index.html             |  6 +++++
 public/js/app.js              | 51 ++++++++++++++++++++++++++++++-----
 public/js/browse.js           |  2 ++
 public/js/editors.js          | 11 ++++++++
 public/js/embed.js            | 39 +++++++++++++++++++++------
 public/js/export.js           | 38 +++++++++++++++++++-------
 public/js/import-map.js       | 43 +++++++++++++++++++++++++++++
 public/js/js-preprocessors.js | 42 +++++++++++++++++++++++++++--
 public/js/preview.js          | 46 +++++++++++++++++++++++++------
 server.js                     | 11 ++++----
 13 files changed, 273 insertions(+), 41 deletions(-)
 create mode 100644 public/js/import-map.js

diff --git a/db.js b/db.js
index 7e81ccb..fd7e44a 100644
--- a/db.js
+++ b/db.js
@@ -31,6 +31,11 @@ try {
   db.exec(`ALTER TABLE fiddles ADD COLUMN listed INTEGER NOT NULL DEFAULT 1`);
 } catch (_) { /* column already exists */ }
 
+// Migration: add options column (JSON string for per-fiddle settings like tailwind)
+try {
+  db.exec(`ALTER TABLE fiddles ADD COLUMN options TEXT NOT NULL DEFAULT '{}'`);
+} catch (_) { /* column already exists */ }
+
 // Tags tables
 db.exec(`
   CREATE TABLE IF NOT EXISTS tags (
@@ -51,14 +56,14 @@ db.exec(`CREATE INDEX IF NOT EXISTS idx_fiddles_listed_updated ON fiddles(listed
 
 export const stmts = {
   insert: db.prepare(`
-    INSERT INTO fiddles (id, title, html, css, css_type, js, js_type, listed)
-    VALUES (@id, @title, @html, @css, @css_type, @js, @js_type, @listed)
+    INSERT INTO fiddles (id, title, html, css, css_type, js, js_type, listed, options)
+    VALUES (@id, @title, @html, @css, @css_type, @js, @js_type, @listed, @options)
   `),
   get: db.prepare('SELECT * FROM fiddles WHERE id = ?'),
   update: db.prepare(`
     UPDATE fiddles SET title = @title, html = @html, css = @css,
       css_type = @css_type, js = @js, js_type = @js_type, listed = @listed,
-      updated_at = datetime('now')
+      options = @options, updated_at = datetime('now')
     WHERE id = @id
   `),
   list: db.prepare('SELECT id, title, css_type, js_type, created_at, updated_at FROM fiddles ORDER BY updated_at DESC LIMIT 50'),
diff --git a/public/browse.html b/public/browse.html
index ea4b7bc..dd6a40b 100644
--- a/public/browse.html
+++ b/public/browse.html
@@ -22,6 +22,8 @@
       <option value="react-ts">React + TS</option>
       <option value="vue">Vue</option>
       <option value="svelte">Svelte</option>
+      <option value="markdown">Markdown</option>
+      <option value="wasm">WASM</option>
     </select>
     <select id="filter-sort">
       <option value="updated">Recently Updated</option>
diff --git a/public/css/style.css b/public/css/style.css
index 5a66aae..af74a0e 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -195,6 +195,18 @@ body.resizing iframe { pointer-events: none; }
 }
 .auto-run-toggle input { cursor: pointer; }
 
+/* Tailwind toggle */
+.tailwind-toggle {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--text-dim);
+  cursor: pointer;
+  user-select: none;
+}
+.tailwind-toggle input { cursor: pointer; }
+
 /* Dividers */
 .divider { background: var(--border); transition: background 0.15s; z-index: 2; }
 
diff --git a/public/index.html b/public/index.html
index 5f4f43a..4949b9b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -17,6 +17,8 @@
         <option value="react-ts">React + TS</option>
         <option value="vue">Vue</option>
         <option value="svelte">Svelte</option>
+        <option value="markdown">Markdown</option>
+        <option value="wasm">WASM</option>
       </select>
       <input type="text" id="title-input" placeholder="Untitled" spellcheck="false">
       <select id="layout-mode">
@@ -37,6 +39,10 @@
         <datalist id="tags-datalist"></datalist>
         <div id="tags-display" class="tags-display"></div>
       </div>
+      <label class="tailwind-toggle" title="Enable Tailwind CSS">
+        <input type="checkbox" id="tailwind-checkbox">
+        Tailwind
+      </label>
       <label class="listed-toggle" title="Show in browse page">
         <input type="checkbox" id="listed-checkbox" checked>
         Listed
diff --git a/public/js/app.js b/public/js/app.js
index 24c74dc..776a6e9 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -47,8 +47,22 @@ const STARTER_TEMPLATES = {
     js: `<script>\n  let count = 0;\n</script>\n\n<h1>Hello Svelte</h1>\n<button on:click={() => count++}>Count: {count}</button>\n\n<style>\n  h1 { color: #ff3e00; }\n  button { padding: 8px 16px; cursor: pointer; }\n</style>`,
     css: '',
   },
+  'markdown': {
+    js: `# Hello Markdown\n\nThis is a **Markdown** fiddle. Write your content here and see it rendered in the preview.\n\n## Features\n\n- Headers, **bold**, *italic*\n- Lists (ordered and unordered)\n- Code blocks with syntax highlighting\n- Links, images, and more\n\n### Code Example\n\n\`\`\`javascript\nconst greeting = "Hello, World!";\nconsole.log(greeting);\n\`\`\`\n\n> Blockquotes work too!\n\n| Column 1 | Column 2 |\n|----------|----------|\n| Cell A   | Cell B   |`,
+    css: `body {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n  max-width: 720px;\n  margin: 0 auto;\n  padding: 24px;\n  line-height: 1.6;\n  color: #1a1a1a;\n}\n\nh1, h2, h3 { margin-top: 1.5em; margin-bottom: 0.5em; }\nh1 { border-bottom: 2px solid #eee; padding-bottom: 0.3em; }\n\ncode {\n  background: #f4f4f4;\n  padding: 2px 6px;\n  border-radius: 3px;\n  font-size: 0.9em;\n}\n\npre {\n  background: #f4f4f4;\n  padding: 16px;\n  border-radius: 6px;\n  overflow-x: auto;\n}\n\npre code { background: none; padding: 0; }\n\nblockquote {\n  border-left: 4px solid #ddd;\n  margin: 1em 0;\n  padding: 0.5em 1em;\n  color: #555;\n}\n\ntable {\n  border-collapse: collapse;\n  width: 100%;\n  margin: 1em 0;\n}\n\nth, td {\n  border: 1px solid #ddd;\n  padding: 8px 12px;\n  text-align: left;\n}\n\nth { background: #f4f4f4; font-weight: 600; }`,
+  },
+  'wasm': {
+    html: '<h1>WebAssembly Demo</h1>\n<div id="output"></div>',
+    css: `body {\n  font-family: monospace;\n  padding: 24px;\n  background: #1a1a2e;\n  color: #0f0;\n}\n\nh1 { color: #00d4ff; margin-bottom: 16px; }\n#output { white-space: pre; font-size: 14px; line-height: 1.8; }`,
+    js: `// Inline WebAssembly "add" module (no external URL needed)\n// WAT source: (module (func (export "add") (param i32 i32) (result i32) local.get 0 local.get 1 i32.add))\nconst wasmBytes = new Uint8Array([\n  0x00, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00,\n  0x01, 0x07, 0x01, 0x60, 0x02, 0x7f, 0x7f, 0x01, 0x7f,\n  0x03, 0x02, 0x01, 0x00,\n  0x07, 0x07, 0x01, 0x03, 0x61, 0x64, 0x64, 0x00, 0x00,\n  0x0a, 0x09, 0x01, 0x07, 0x00, 0x20, 0x00, 0x20, 0x01, 0x6a, 0x0b\n]);\n\nconst out = document.getElementById('output');\n\ntry {\n  const { instance } = await WebAssembly.instantiate(wasmBytes);\n  const add = instance.exports.add;\n\n  out.textContent = [\n    \`WASM loaded successfully!\`,\n    \`\`,\n    \`add(2, 3) = \${add(2, 3)}\`,\n    \`add(100, 200) = \${add(100, 200)}\`,\n    \`add(-5, 10) = \${add(-5, 10)}\`,\n  ].join('\\n');\n} catch (e) {\n  out.textContent = 'Error: ' + e.message;\n}`,
+  },
 };
 
+function getTailwindChecked() {
+  const cb = $('#tailwind-checkbox');
+  return cb ? cb.checked : false;
+}
+
 async function run() {
   const mode = getCurrentMode();
   const { html, css, js } = getEditorValues();
@@ -66,10 +80,16 @@ async function run() {
       });
     }
 
-    renderPreview(html, compiledCss, result.js, mode, result.extraCss || '');
+    const options = {
+      tailwind: getTailwindChecked(),
+      isModule: result.isModule || false,
+      renderedHtml: result.renderedHtml || null,
+    };
+
+    renderPreview(html, compiledCss, result.js, mode, result.extraCss || '', options);
   } catch (e) {
     clearConsole();
-    renderPreview(html, '', '', mode);
+    renderPreview(html, '', '', mode, '', { tailwind: getTailwindChecked() });
     window.postMessage({ type: 'console', method: 'error', args: [`Compile error: ${e.message}`] }, '*');
   }
 }
@@ -94,12 +114,13 @@ async function save() {
   const js_type = MODE_TO_JS_TYPE[getCurrentMode()] || 'javascript';
   const listed = $('#listed-checkbox').checked ? 1 : 0;
   const tags = currentTags.slice();
+  const options = JSON.stringify({ tailwind: getTailwindChecked() });
   try {
     if (currentId) {
-      await updateFiddle(currentId, { title, html, css, css_type, js, js_type, listed, tags });
+      await updateFiddle(currentId, { title, html, css, css_type, js, js_type, listed, options, tags });
       showToast(`Saved! Share: ${location.origin}/f/${currentId}`);
     } else {
-      const result = await createFiddle({ title, html, css, css_type, js, js_type, listed, tags });
+      const result = await createFiddle({ title, html, css, css_type, js, js_type, listed, options, tags });
       currentId = result.id;
       history.pushState(null, '', `/f/${currentId}`);
       showToast(`Saved! Share: ${location.origin}/f/${currentId}`);
@@ -116,8 +137,9 @@ async function fork() {
   const js_type = MODE_TO_JS_TYPE[getCurrentMode()] || 'javascript';
   const listed = $('#listed-checkbox').checked ? 1 : 0;
   const tags = currentTags.slice();
+  const options = JSON.stringify({ tailwind: getTailwindChecked() });
   try {
-    const result = await createFiddle({ title, html, css, css_type, js, js_type, listed, tags });
+    const result = await createFiddle({ title, html, css, css_type, js, js_type, listed, options, tags });
     currentId = result.id;
     $('#title-input').value = title;
     history.pushState(null, '', `/f/${currentId}`);
@@ -148,6 +170,11 @@ async function loadFromUrl() {
     currentTags = (fiddle.tags || []).map(t => t.name);
     renderTags();
 
+    // Restore options (tailwind checkbox)
+    const opts = JSON.parse(fiddle.options || '{}');
+    const twCb = $('#tailwind-checkbox');
+    if (twCb) twCb.checked = !!opts.tailwind;
+
     setEditorValues(fiddle);
     setTimeout(run, 100);
   } catch (e) {
@@ -204,6 +231,12 @@ async function init() {
   autoRunCb.checked = getPref('autoRun');
   autoRunCb.addEventListener('change', (e) => setPref('autoRun', e.target.checked));
 
+  // Tailwind checkbox
+  const twCb = $('#tailwind-checkbox');
+  if (twCb) {
+    twCb.addEventListener('change', () => scheduleRun());
+  }
+
   // Layout selector
   const layoutSel = $('#layout-mode');
   const savedLayout = getPref('layout') || 'default';
@@ -259,7 +292,13 @@ async function init() {
     try {
       const compiledCss = await compileCss(css, cssType);
       const result = await compileJs(js, mode);
-      exportHtml({ title, html, css: compiledCss, js: result.js, mode, extraCss: result.extraCss, isModule: result.isModule });
+      exportHtml({
+        title, html, css: compiledCss, js: result.js, mode,
+        extraCss: result.extraCss,
+        tailwind: getTailwindChecked(),
+        isModule: result.isModule || false,
+        renderedHtml: result.renderedHtml || null,
+      });
     } catch (e) {
       showToast(`Export failed: ${e.message}`);
     }
diff --git a/public/js/browse.js b/public/js/browse.js
index 88533fe..831e7c3 100644
--- a/public/js/browse.js
+++ b/public/js/browse.js
@@ -12,6 +12,8 @@ const JS_TYPE_LABELS = {
   'react-ts': 'React+TS',
   vue: 'Vue',
   svelte: 'Svelte',
+  markdown: 'MD',
+  wasm: 'WASM',
 };
 
 function relativeTime(dateStr) {
diff --git a/public/js/editors.js b/public/js/editors.js
index b48dda8..78a1660 100644
--- a/public/js/editors.js
+++ b/public/js/editors.js
@@ -39,6 +39,15 @@ export const MODE_TABS = {
     { id: 'js', label: 'Svelte', lang: 'html' },
     { id: 'css', label: 'CSS', lang: 'css' },
   ],
+  'markdown': [
+    { id: 'js', label: 'Markdown', lang: 'markdown' },
+    { id: 'css', label: 'CSS', lang: 'css' },
+  ],
+  'wasm': [
+    { id: 'html', label: 'HTML', lang: 'html' },
+    { id: 'css', label: 'CSS', lang: 'css' },
+    { id: 'js', label: 'JavaScript', lang: 'javascript' },
+  ],
 };
 
 // Map mode names to js_type values stored in DB
@@ -49,6 +58,8 @@ export const MODE_TO_JS_TYPE = {
   'react-ts': 'tsx',
   'vue': 'vue',
   'svelte': 'svelte',
+  'markdown': 'markdown',
+  'wasm': 'wasm',
 };
 
 export const JS_TYPE_TO_MODE = Object.fromEntries(
diff --git a/public/js/embed.js b/public/js/embed.js
index 58919ef..ece92be 100644
--- a/public/js/embed.js
+++ b/public/js/embed.js
@@ -1,5 +1,6 @@
 import { loadFiddle } from './api.js';
 import { getFrameworkRuntime } from './js-preprocessors.js';
+import { extractBareImports, buildImportMapTag } from './import-map.js';
 
 const MODE_MAP = {
   javascript: 'html-css-js',
@@ -8,6 +9,8 @@ const MODE_MAP = {
   'react-ts': 'react-ts',
   vue: 'vue',
   svelte: 'svelte',
+  markdown: 'markdown',
+  wasm: 'wasm',
 };
 
 async function init() {
@@ -26,6 +29,7 @@ async function init() {
     const fiddle = await loadFiddle(match[1]);
     const mode = MODE_MAP[fiddle.js_type] || 'html-css-js';
     const runtime = getFrameworkRuntime(mode);
+    const opts = JSON.parse(fiddle.options || '{}');
 
     // For embed, we compile client-side using the same preprocessors
     const { compileCss } = await import('./preprocessors.js');
@@ -36,32 +40,51 @@ async function init() {
 
     const allCss = result.extraCss ? `${compiledCss}\n${result.extraCss}` : compiledCss;
 
+    const finalHtml = result.renderedHtml || fiddle.html;
+    const finalJs = result.renderedHtml ? '' : result.js;
+
     let bodyContent;
     if (mode === 'vue' || mode === 'svelte') {
-      bodyContent = fiddle.html ? `${fiddle.html}\n${runtime.bodyHtml}` : runtime.bodyHtml;
+      bodyContent = finalHtml ? `${finalHtml}\n${runtime.bodyHtml}` : runtime.bodyHtml;
     } else if (runtime.bodyHtml) {
-      bodyContent = `${fiddle.html}\n${runtime.bodyHtml}`;
+      bodyContent = `${finalHtml}\n${runtime.bodyHtml}`;
     } else {
-      bodyContent = fiddle.html;
+      bodyContent = finalHtml;
+    }
+
+    const isModule = result.isModule || mode === 'svelte';
+
+    // Build importmap for module scripts with bare imports
+    let importMapTag = '';
+    if (isModule && finalJs) {
+      const bareImports = extractBareImports(finalJs);
+      if (bareImports.length) {
+        importMapTag = buildImportMapTag(bareImports);
+      }
     }
 
     let scripts = '';
-    if (result.js) {
-      if (result.isModule) {
-        scripts = `<script type="module">\n${escapeScriptClose(result.js)}\n<\/script>`;
+    if (finalJs) {
+      if (isModule) {
+        scripts = `<script type="module">\n${escapeScriptClose(finalJs)}\n<\/script>`;
       } else {
         for (const url of runtime.scripts) {
           scripts += `<script src="${url}"><\/script>\n`;
         }
-        scripts += `<script>\n${escapeScriptClose(result.js)}\n<\/script>`;
+        scripts += `<script>\n${escapeScriptClose(finalJs)}\n<\/script>`;
       }
     }
 
+    const tailwindScript = opts.tailwind
+      ? `<script src="https://cdn.tailwindcss.com"><\/script>\n`
+      : '';
+
     const doc = `<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
-<style>${allCss}</style>
+${tailwindScript}<style>${allCss}</style>
+${importMapTag}
 </head>
 <body>
 ${bodyContent}
diff --git a/public/js/export.js b/public/js/export.js
index aef30c1..79fcced 100644
--- a/public/js/export.js
+++ b/public/js/export.js
@@ -1,42 +1,62 @@
 import { getFrameworkRuntime } from './js-preprocessors.js';
+import { extractBareImports, buildImportMapTag } from './import-map.js';
 
 /**
  * Export a fiddle as a standalone HTML file and trigger download.
  */
-export function exportHtml({ title, html, css, js, mode, extraCss = '', isModule = false }) {
+export function exportHtml({ title, html, css, js, mode, extraCss = '', isModule = false, tailwind = false, renderedHtml = null }) {
   const runtime = getFrameworkRuntime(mode);
   const allCss = extraCss ? `${css}\n${extraCss}` : css;
 
+  const finalHtml = renderedHtml || html;
+  const finalJs = renderedHtml ? '' : js;
+
   let bodyContent;
   if (mode === 'vue' || mode === 'svelte') {
-    bodyContent = html ? `${html}\n${runtime.bodyHtml}` : runtime.bodyHtml;
+    bodyContent = finalHtml ? `${finalHtml}\n${runtime.bodyHtml}` : runtime.bodyHtml;
   } else if (runtime.bodyHtml) {
-    bodyContent = `${html}\n${runtime.bodyHtml}`;
+    bodyContent = `${finalHtml}\n${runtime.bodyHtml}`;
   } else {
-    bodyContent = html;
+    bodyContent = finalHtml;
+  }
+
+  const effectiveIsModule = isModule || mode === 'svelte';
+
+  // Build importmap for module scripts with bare imports
+  let importMapTag = '';
+  if (effectiveIsModule && finalJs) {
+    const bareImports = extractBareImports(finalJs);
+    if (bareImports.length) {
+      importMapTag = buildImportMapTag(bareImports);
+    }
   }
 
   let scripts = '';
-  if (js) {
-    if (isModule) {
-      scripts = `<script type="module">\n${js}\n<\/script>`;
+  if (finalJs) {
+    if (effectiveIsModule) {
+      scripts = `<script type="module">\n${finalJs}\n<\/script>`;
     } else {
       for (const url of runtime.scripts) {
         scripts += `<script src="${url}"><\/script>\n`;
       }
-      scripts += `<script>\n${js}\n<\/script>`;
+      scripts += `<script>\n${finalJs}\n<\/script>`;
     }
   }
 
+  const tailwindScript = tailwind
+    ? `<script src="https://cdn.tailwindcss.com"><\/script>\n`
+    : '';
+
   const doc = `<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>${escHtml(title)}</title>
-<style>
+${tailwindScript}<style>
 ${allCss}
 </style>
+${importMapTag}
 </head>
 <body>
 ${bodyContent}
diff --git a/public/js/import-map.js b/public/js/import-map.js
new file mode 100644
index 0000000..20d6530
--- /dev/null
+++ b/public/js/import-map.js
@@ -0,0 +1,43 @@
+/**
+ * Extract bare import specifiers from JS code.
+ * Matches `from 'pkg'`, `from "pkg"`, `import 'pkg'`, `import "pkg"`
+ * where the specifier doesn't start with `.`, `/`, `http:`, or `https:`.
+ */
+export function extractBareImports(jsCode) {
+  const imports = new Set();
+  const re = /(?:import\s+(?:[\s\S]*?\s+from\s+)?['"])([^'"\s][^'"]*?)(?=['"])/g;
+  let match;
+  while ((match = re.exec(jsCode)) !== null) {
+    const spec = match[1];
+    // Skip relative, absolute, and URL imports
+    if (spec.startsWith('.') || spec.startsWith('/') || spec.startsWith('http:') || spec.startsWith('https:')) {
+      continue;
+    }
+    // Skip svelte internal imports (already rewritten by the compiler)
+    if (spec.startsWith('svelte')) continue;
+    imports.add(spec);
+  }
+  return Array.from(imports);
+}
+
+/**
+ * Build an HTML <script type="importmap"> tag from bare import specifiers.
+ * Maps each bare import to its esm.sh URL.
+ */
+export function buildImportMapTag(bareImports) {
+  if (!bareImports.length) return '';
+  const imports = {};
+  for (const spec of bareImports) {
+    // Get the package name (handle scoped packages like @scope/pkg)
+    const parts = spec.split('/');
+    const pkgName = spec.startsWith('@') ? `${parts[0]}/${parts[1]}` : parts[0];
+    // Map the full specifier (e.g. 'lodash/fp' -> 'https://esm.sh/lodash/fp')
+    imports[spec] = `https://esm.sh/${spec}`;
+    // Also map the base package if it's different
+    if (spec !== pkgName) {
+      imports[pkgName] = `https://esm.sh/${pkgName}`;
+    }
+  }
+  const map = JSON.stringify({ imports }, null, 2);
+  return `<script type="importmap">\n${map}\n<\/script>`;
+}
diff --git a/public/js/js-preprocessors.js b/public/js/js-preprocessors.js
index 94cf028..d8adf58 100644
--- a/public/js/js-preprocessors.js
+++ b/public/js/js-preprocessors.js
@@ -3,6 +3,7 @@ import { loadScript } from './utils.js';
 let tsLoaded = false;
 let babelLoaded = false;
 let svelteLoaded = false;
+let markedLoaded = false;
 
 async function ensureTypeScript() {
   if (tsLoaded) return;
@@ -31,6 +32,19 @@ async function ensureBabel() {
   babelLoaded = true;
 }
 
+async function ensureMarked() {
+  if (markedLoaded) return;
+  await loadScript('https://cdnjs.cloudflare.com/ajax/libs/marked/15.0.7/marked.min.js');
+  if (typeof marked === 'undefined') {
+    await new Promise((resolve) => {
+      const check = setInterval(() => {
+        if (typeof marked !== 'undefined') { clearInterval(check); resolve(); }
+      }, 50);
+    });
+  }
+  markedLoaded = true;
+}
+
 async function ensureSvelte() {
   if (svelteLoaded) return;
   await loadScript('https://unpkg.com/svelte@4.2.19/compiler.cjs');
@@ -45,8 +59,10 @@ export async function compileJs(code, mode) {
   if (!code.trim()) return { js: '' };
 
   switch (mode) {
-    case 'html-css-js':
-      return { js: code };
+    case 'html-css-js': {
+      const isModule = /(?:^|\n)\s*(?:import\s|export\s)/m.test(code);
+      return { js: code, isModule };
+    }
 
     case 'typescript':
       return compileTypeScript(code);
@@ -63,6 +79,16 @@ export async function compileJs(code, mode) {
     case 'svelte':
       return compileSvelte(code);
 
+    case 'markdown':
+      return compileMarkdown(code);
+
+    case 'wasm': {
+      // WASM starter uses top-level await, always treat as module
+      const hasModuleSyntax = /(?:^|\n)\s*(?:import\s|export\s)/m.test(code);
+      const hasTopLevelAwait = /(?:^|\n)\s*(?:const|let|var)\s+.*=\s*await\b/m.test(code) || /(?:^|\n)\s*await\s/m.test(code);
+      return { js: code, isModule: hasModuleSyntax || hasTopLevelAwait };
+    }
+
     default:
       return { js: code };
   }
@@ -125,6 +151,12 @@ function compileVue(code) {
   return { js, extraCss };
 }
 
+async function compileMarkdown(code) {
+  await ensureMarked();
+  const renderedHtml = marked.parse(code);
+  return { js: '', renderedHtml };
+}
+
 async function compileSvelte(code) {
   await ensureSvelte();
   const result = svelte.compile(code, {
@@ -185,6 +217,12 @@ export function getFrameworkRuntime(mode) {
         bodyHtml: '<div id="app"></div>',
       };
 
+    case 'markdown':
+      return { scripts: [], bodyHtml: '' };
+
+    case 'wasm':
+      return { scripts: [], bodyHtml: '' };
+
     default:
       return { scripts: [], bodyHtml: '' };
   }
diff --git a/public/js/preview.js b/public/js/preview.js
index 78291d7..98fac6d 100644
--- a/public/js/preview.js
+++ b/public/js/preview.js
@@ -1,4 +1,5 @@
 import { getFrameworkRuntime } from './js-preprocessors.js';
+import { extractBareImports, buildImportMapTag } from './import-map.js';
 
 const consoleInterceptor = `
 <script>
@@ -56,26 +57,54 @@ function buildLoaderScript(runtimeUrls, userJs, isModule) {
   return parts;
 }
 
-export function renderPreview(html, css, js, mode = 'html-css-js', extraCss = '') {
+/**
+ * Render compiled code into the preview iframe.
+ * @param {string} html - HTML content
+ * @param {string} css - Compiled CSS
+ * @param {string} js - Compiled JS
+ * @param {string} mode - Framework mode
+ * @param {string} extraCss - Extra CSS (e.g. from Vue/Svelte)
+ * @param {object} options - { tailwind, isModule, renderedHtml }
+ */
+export function renderPreview(html, css, js, mode = 'html-css-js', extraCss = '', options = {}) {
   const frame = document.getElementById('preview-frame');
   const runtime = getFrameworkRuntime(mode);
 
   // Combine CSS
   const allCss = extraCss ? `${css}\n${extraCss}` : css;
 
+  // If renderedHtml is provided (e.g. Markdown), use it as the body and skip JS
+  const finalHtml = options.renderedHtml || html;
+  const finalJs = options.renderedHtml ? '' : js;
+
   // Determine body content
   let bodyContent;
   if (mode === 'vue' || mode === 'svelte') {
-    bodyContent = html ? `${html}\n${runtime.bodyHtml}` : runtime.bodyHtml;
+    bodyContent = finalHtml ? `${finalHtml}\n${runtime.bodyHtml}` : runtime.bodyHtml;
   } else if (runtime.bodyHtml) {
-    bodyContent = `${html}\n${runtime.bodyHtml}`;
+    bodyContent = `${finalHtml}\n${runtime.bodyHtml}`;
   } else {
-    bodyContent = html;
+    bodyContent = finalHtml;
   }
 
-  const isModule = mode === 'svelte';
-  const loaderScript = js
-    ? buildLoaderScript(runtime.scripts, js, isModule)
+  const isModule = options.isModule || mode === 'svelte';
+
+  // Build importmap for module scripts with bare imports
+  let importMapTag = '';
+  if (isModule && finalJs) {
+    const bareImports = extractBareImports(finalJs);
+    if (bareImports.length) {
+      importMapTag = buildImportMapTag(bareImports);
+    }
+  }
+
+  const loaderScript = finalJs
+    ? buildLoaderScript(runtime.scripts, finalJs, isModule)
+    : '';
+
+  // Tailwind CDN injection
+  const tailwindScript = options.tailwind
+    ? `<script src="https://cdn.tailwindcss.com"><\/script>\n`
     : '';
 
   const doc = `<!DOCTYPE html>
@@ -83,7 +112,8 @@ export function renderPreview(html, css, js, mode = 'html-css-js', extraCss = ''
 <head>
 <meta charset="UTF-8">
 ${consoleInterceptor}
-<style>${allCss}</style>
+${tailwindScript}<style>${allCss}</style>
+${importMapTag}
 </head>
 <body>
 ${bodyContent}
diff --git a/server.js b/server.js
index b497918..3a14e77 100644
--- a/server.js
+++ b/server.js
@@ -27,12 +27,12 @@ app.use(express.static('public', { index: false }));
 // API: Create fiddle
 app.post('/api/fiddles', (req, res) => {
   const id = nanoid(10);
-  const { title = 'Untitled', html = '', css = '', css_type = 'css', js = '', js_type = 'javascript', listed = 1, tags = [] } = req.body;
+  const { title = 'Untitled', html = '', css = '', css_type = 'css', js = '', js_type = 'javascript', listed = 1, options = '{}', tags = [] } = req.body;
   try {
-    stmts.insert.run({ id, title, html, css, css_type, js, js_type, listed: listed ? 1 : 0 });
+    stmts.insert.run({ id, title, html, css, css_type, js, js_type, listed: listed ? 1 : 0, options });
     if (tags.length) setFiddleTags(id, tags);
     const fiddleTags = stmts.getTagsForFiddle.all(id);
-    res.json({ id, title, html, css, css_type, js, js_type, listed, tags: fiddleTags });
+    res.json({ id, title, html, css, css_type, js, js_type, listed, options, tags: fiddleTags });
   } catch (e) {
     res.status(500).json({ error: e.message });
   }
@@ -104,12 +104,13 @@ app.put('/api/fiddles/:id', (req, res) => {
     js = existing.js,
     js_type = existing.js_type || 'javascript',
     listed = existing.listed,
+    options = existing.options || '{}',
     tags,
   } = req.body;
-  stmts.update.run({ id: req.params.id, title, html, css, css_type, js, js_type, listed: listed ? 1 : 0 });
+  stmts.update.run({ id: req.params.id, title, html, css, css_type, js, js_type, listed: listed ? 1 : 0, options });
   if (Array.isArray(tags)) setFiddleTags(req.params.id, tags);
   const fiddleTags = stmts.getTagsForFiddle.all(req.params.id);
-  res.json({ id: req.params.id, title, html, css, css_type, js, js_type, listed, tags: fiddleTags });
+  res.json({ id: req.params.id, title, html, css, css_type, js, js_type, listed, options, tags: fiddleTags });
 });
 
 // API: List tags