chrisryn/fiddle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add QoL features: preview theme, external resources, shortcuts, mobile layout

Browse Source 
- Dark/light preview theme toggle with localStorage persistence and
  dark CSS injection in preview, export, and embed
- External CSS/JS resources modal with per-fiddle persistence in
  options column, injected as link/script tags
- Keyboard shortcuts cheat sheet modal (? button or ? key)
- Mobile-responsive CSS with breakpoints at 768px and 480px
  for both editor and browse pages
This commit is contained in:
root
2026-02-26 15:39:16 -06:00
parent 77f64d2862
commit b18c9c1dc8
8 changed files with 239 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
public/js/preview.js
View File

@@ -107,12 +107,26 @@ export function renderPreview(html, css, js, mode = 'html-css-js', extraCss = ''
? `<script src="https://cdn.tailwindcss.com"><\/script>\n`
: '';
// Dark preview theme
const darkCss = options.previewTheme === 'dark'
? `<style>body { background: #1e1e1e; color: #ccc; }</style>\n`
: '';
// External resources
let resourceTags = '';
if (options.resources && options.resources.length) {
for (const r of options.resources) {
if (r.type === 'css') resourceTags += `<link rel="stylesheet" href="${r.url}">\n`;
else if (r.type === 'js') resourceTags += `<script src="${r.url}"><\/script>\n`;
}
}
const doc = `<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
${consoleInterceptor}
${tailwindScript}<style>${allCss}</style>
${darkCss}${resourceTags}${tailwindScript}<style>${allCss}</style>
${importMapTag}
</head>
<body>
@@ -120,5 +134,7 @@ ${bodyContent}
${loaderScript}
</body>
</html>`;
// Update iframe bg class
frame.classList.toggle('preview-dark', options.previewTheme === 'dark');
frame.srcdoc = doc;
}