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

Add responsive preview, editor themes, template gallery, devtools, and autocomplete

Browse Source 
- Device breakpoint toggles (mobile 375px / tablet 768px / desktop 100%)
- Editor theme selector with 6 themes (VS Dark/Light, High Contrast, Monokai, Dracula, GitHub Dark)
- Starter template gallery with 8 pre-built templates (Todo, API Fetch, CSS Animation, etc.)
- Code autocomplete with DOM/React type definitions and snippet completions
- Devtools panels: console, network, elements, performance
- Code formatter (Prettier), diff view, and linter integration
This commit is contained in:
root
2026-02-27 01:22:01 -06:00
parent b18c9c1dc8
commit 6ca8519250
19 changed files with 1755 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
public/index.html
View File

@@ -32,6 +32,14 @@
<option value="vim">Vim</option>
<option value="emacs">Emacs</option>
</select>
<select id="editor-theme">
<option value="vs-dark">VS Dark</option>
<option value="vs">VS Light</option>
<option value="hc-black">High Contrast</option>
<option value="monokai">Monokai</option>
<option value="dracula">Dracula</option>
<option value="github-dark">GitHub Dark</option>
</select>
</div>
<div class="toolbar-right">
<div class="tags-input-wrap">
@@ -43,6 +51,7 @@
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
<button id="btn-templates" class="btn-secondary" title="Starter templates gallery">Templates</button>
<button id="btn-resources" class="btn-secondary" title="External CSS/JS resources">Resources</button>
<button id="btn-shortcuts" class="btn-secondary" title="Keyboard shortcuts (?)" aria-label="Keyboard shortcuts">?</button>
<label class="tailwind-toggle" title="Enable Tailwind CSS">
@@ -73,13 +82,48 @@
</div>
<div class="divider divider-col" id="divider-col"></div>
<div class="panel panel-preview">
<div class="panel-label">Preview</div>
<iframe id="preview-frame" sandbox="allow-scripts allow-same-origin"></iframe>
<div class="panel-label">
<span>Preview</span>
<span class="device-toggles">
<button class="device-btn active" data-device="desktop" title="Desktop (100%)">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
</button>
<button class="device-btn" data-device="tablet" title="Tablet (768px)">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="2" width="16" height="20" rx="2"/><line x1="12" y1="18" x2="12" y2="18" stroke-linecap="round"/></svg>
</button>
<button class="device-btn" data-device="mobile" title="Mobile (375px)">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12" y2="18" stroke-linecap="round"/></svg>
</button>
</span>
</div>
<div class="preview-viewport" id="preview-viewport">
<iframe id="preview-frame" sandbox="allow-scripts allow-same-origin"></iframe>
</div>
</div>
<div class="divider divider-row" id="divider-row"></div>
<div class="panel panel-console">
<div class="panel-label">Console <button id="btn-clear-console" class="btn-small">Clear</button></div>
<div id="console-output"></div>
<div class="devtools-tabs">
<button class="devtools-tab active" data-tab="console">Console</button>
<button class="devtools-tab" data-tab="network">Network</button>
<button class="devtools-tab" data-tab="elements">Elements</button>
<button class="devtools-tab" data-tab="performance">Performance</button>
<span class="devtools-spacer"></span>
<button id="btn-clear-devtools" class="btn-small">Clear</button>
</div>
<div class="devtools-panels">
<div class="devtools-panel active" id="panel-console">
<div id="console-output"></div>
</div>
<div class="devtools-panel" id="panel-network">
<div id="network-output"></div>
</div>
<div class="devtools-panel" id="panel-elements">
<div id="elements-output"></div>
</div>
<div class="devtools-panel" id="panel-performance">
<div id="performance-output"></div>
</div>
</div>
</div>
</main>
@@ -114,6 +158,8 @@
<tr><td><kbd>Ctrl/Cmd</kbd> + <kbd>Enter</kbd></td><td>Run code</td></tr>
<tr><td><kbd>Ctrl/Cmd</kbd> + <kbd>S</kbd></td><td>Save fiddle</td></tr>
<tr><td><kbd>?</kbd></td><td>Show shortcuts</td></tr>
<tr><td><kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>F</kbd></td><td>Format code (Prettier)</td></tr>
<tr><td><kbd>Ctrl/Cmd</kbd> + <kbd>D</kbd></td><td>Toggle diff view</td></tr>
<tr class="shortcuts-divider"><td colspan="2">Keybinding Modes</td></tr>
<tr><td><kbd>Vim</kbd></td><td>Full vim keybindings (select in toolbar)</td></tr>
<tr><td><kbd>Emacs</kbd></td><td>Full emacs keybindings (select in toolbar)</td></tr>
@@ -133,6 +179,16 @@
</div>
</div>
<div id="templates-modal" class="modal-overlay hidden">
<div class="modal-content templates-modal-content">
<div class="modal-header">
<span>Starter Templates</span>
<button id="templates-modal-close" class="btn-small">&times;</button>
</div>
<div class="templates-grid" id="templates-grid"></div>
</div>
</div>
<div id="share-toast" class="toast hidden"></div>
<script>