Build a pixel-art editor as a static web app in this directory: index.html, style.css, …

claude-codeclaude-fable-5 · 37 steps · 8m 45s · 7 filessession 976f0ecc-d91@patrick-toulme

Build a pixel-art editor as a static web app in this directory: index.html, style.css, editor.js, palette.js. A 32x32 grid canvas with pencil/eraser/fill/eyedropper tools, color palette + custom picker, undo/redo, zoom, grid toggle, export as PNG (scaled 10x) and as JSON, import from JSON, keyboard shortcuts, dark theme, and tests.html + tests.js exercising the flood-fill and undo stack logic. Run the tests headless with node and fix what fails.

same matchclaude-code · 37 steps codex · 80 steps opencode · 31 steps pi · 29 steps antigravity · 34 steps

compare in arena

step 08 / 37

index.htmlchange 1/1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pixel Editor</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="app">
    <header class="topbar">
      <h1>Pixel Editor <span class="tag">32×32</span></h1>
      <div class="toolbar">
        <div class="group" role="toolbar" aria-label="Tools">
          <button class="tool" data-tool="pencil" title="Pencil (P)">Pencil</button>
          <button class="tool" data-tool="eraser" title="Eraser (E)">Eraser</button>
          <button class="tool" data-tool="fill" title="Fill (F)">Fill</button>
          <button class="tool" data-tool="eyedropper" title="Eyedropper (I)">Pick</button>
        </div>
        <div class="group">
          <button id="undo" title="Undo (Ctrl+Z)">↺ Undo</button>
          <button id="redo" title="Redo (Ctrl+Shift+Z)">↻ Redo</button>
        </div>
        <div class="group">
          <button id="zoom-out" title="Zoom out (−)">−</button>
          <span id="zoom-label" class="zoom-label">14×</span>
          <button id="zoom-in" title="Zoom in (+)">+</button>
          <button id="grid-toggle" title="Toggle grid (G)" aria-pressed="true">Grid</button>
        </div>
        <div class="group">
          <button id="export-png" title="Export PNG at 10× scale">PNG ↓</button>
          <button id="export-json" title="Export JSON">JSON ↓</button>
          <button id="import-json" title="Import JSON">Import…</button>
          <input id="import-file" type="file" accept=".json,application/json" hidden>
        </div>
      </div>
    </header>
 
    <main class="workspace">
      <div class="canvas-wrap">
        <canvas id="canvas" width="448" height="448"></canvas>
      </div>
      <aside class="sidebar">
        <section>
          <h2>Color</h2>
          <div class="current-color">
            <span id="current-swatch"></span>
            <code id="current-hex">#ff004d</code>
          </div>
          <label class="custom">
            <input type="color" id="custom-color" value="#ff004d">
            Custom color
          </label>
        </section>
        <section>
          <h2>Palette</h2>
          <div id="palette" class="palette"></div>
        </section>
        <section class="shortcuts">
          <h2>Shortcuts</h2>
          <ul>
            <li><kbd>P</kbd> pencil &nbsp;<kbd>E</kbd> eraser</li>
            <li><kbd>F</kbd> fill &nbsp;<kbd>I</kbd> eyedropper</li>
            <li><kbd>Ctrl</kbd>+<kbd>Z</kbd> undo</li>
            <li><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> redo</li>
            <li><kbd>+</kbd> / <kbd>−</kbd> zoom</li>
            <li><kbd>G</kbd> toggle grid</li>
          </ul>
        </section>
      </aside>
    </main>
 
    <footer id="status" class="status">pencil</footer>
  </div>
 
  <script src="palette.js"></script>
  <script src="editor.js"></script>
</body>
</html>
 

80 lineshtml

Writes …/index.html

Files at this step

drag the rail to scrub

Discussion

No comments yet. Start the discussion. Recorded by @patrick-toulme.

#claude #claude-code #claude-fable-5 #css #graphics #html #javascript #quick #testing #ui

d1-claude

← all sessions