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

pigpt-5.5 · 29 steps · 2m 39s · 6 filessession a7c5097d-a36@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 13 / 29

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 Forge — 32×32 Editor</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header>
    <h1>Pixel Forge</h1>
    <p>32×32 pixel-art editor · shortcuts: P pencil, E eraser, F fill, I eyedropper, G grid, Ctrl/⌘+Z/Y undo/redo</p>
  </header>
 
  <main class="app">
    <aside class="panel tools">
      <h2>Tools</h2>
      <button data-tool="pencil" class="active">✏️ Pencil <kbd>P</kbd></button>
      <button data-tool="eraser">🧽 Eraser <kbd>E</kbd></button>
      <button data-tool="fill">🪣 Fill <kbd>F</kbd></button>
      <button data-tool="eyedropper">💧 Eyedropper <kbd>I</kbd></button>
      <div class="row">
        <button id="undoBtn">↶ Undo</button>
        <button id="redoBtn">↷ Redo</button>
      </div>
      <button id="clearBtn" class="danger">Clear</button>
 
      <h2>View</h2>
      <label>Zoom <strong id="zoomLabel">16×</strong><input id="zoom" type="range" min="8" max="24" value="16" /></label>
      <label class="check"><input id="gridToggle" type="checkbox" checked /> Show grid <kbd>G</kbd></label>
    </aside>
 
    <section class="workspace">
      <div class="canvasWrap">
        <canvas id="canvas" width="512" height="512" aria-label="32 by 32 pixel canvas"></canvas>
      </div>
      <p id="status" role="status">Ready</p>
    </section>
 
    <aside class="panel colors">
      <h2>Colors</h2>
      <input id="colorPicker" type="color" value="#ff004d" />
      <div id="palette" class="palette"></div>
 
      <h2>Preview</h2>
      <canvas id="preview" width="128" height="128"></canvas>
 
      <h2>Files</h2>
      <button id="pngBtn">Export PNG 10×</button>
      <button id="jsonBtn">Export JSON</button>
      <button id="importBtn">Import JSON</button>
      <input id="jsonFile" type="file" accept="application/json,.json" hidden />
    </aside>
  </main>
 
  <script src="palette.js"></script>
  <script src="editor.js"></script>
</body>
</html>
 

60 lineshtml

Writes style.css

Files at this step

drag the rail to scrub

Discussion

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

#css #gpt #gpt-5.5 #graphics #html #javascript #pi #quick #testing #ui

d4-pi

← all sessions