diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 37cba57..c7ddd4f 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -312,7 +312,25 @@
               <Shortcut global cmd={'swapFile'+index} keys={['F'+(index+1)]} on:trigger={()=>selectFile(file, index)} />
             </Shortcuts>
             <TabContent>
-              <Editor2D bind:file={file} refresh={refresh} bind:primaryColorIndex={primaryColorIndex} bind:secondaryColorIndex={secondaryColorIndex} bind:currentTool={currentTool} brushSize={brushSize} brushType={brushType} showCheckerboard={showCheckerboard} checkerboardSize={checkerboardSize} checkerboardColor1={checkerboardColor1} checkerboardColor2={checkerboardColor2} backgroundColor={backgroundColor} />
+              <Editor2D
+                bind:file={file}
+                refresh={refresh}
+                bind:primaryColorIndex={primaryColorIndex}
+                bind:secondaryColorIndex={secondaryColorIndex}
+                bind:currentTool={currentTool}
+                brushSize={brushSize}
+                brushType={brushType}
+                showCheckerboard={showCheckerboard}
+                checkerboardSize={checkerboardSize}
+                checkerboardColor1={checkerboardColor1}
+                checkerboardColor2={checkerboardColor2}
+                showGrid={showGrid}
+                backgroundColor={backgroundColor}
+                gridMajorColor={gridMajorColor}
+                gridMinorColor={gridMinorColor}
+                gridMajorSize={gridMajorSize}
+                gridMinorSize={gridMinorSize}
+              />
             </TabContent>
           {/each}
         </svelte:fragment>
diff --git a/frontend/src/sections/Editor2D.svelte b/frontend/src/sections/Editor2D.svelte
index d3826b9..034d95e 100644
--- a/frontend/src/sections/Editor2D.svelte
+++ b/frontend/src/sections/Editor2D.svelte
@@ -21,6 +21,12 @@
 
   export let backgroundColor: string = '#111111'
 
+  export let showGrid: boolean = true
+  export let gridMajorSize: number = 16
+  export let gridMajorColor: string = '#333333'
+  export let gridMinorSize: number = 1
+  export let gridMinorColor: string = '#222222'
+
   $: ((...args) => {
     canvasDirty = true
   })(showCheckerboard, checkerboardSize, checkerboardColor1, checkerboardColor2, backgroundColor)
@@ -165,6 +171,36 @@
       ctx.restore()
     }
 
+    // Draw our grid.
+    if (showGrid) {
+      // Minor grid lines.
+      ctx.strokeStyle = gridMinorColor
+      ctx.lineWidth = 0.5
+      ctx.beginPath()
+      for (let x = gridMinorSize; x < file.canvas.width; x += gridMinorSize) {
+        ctx.moveTo(offsetX*zoom+x*zoom, offsetY*zoom)
+        ctx.lineTo(offsetX*zoom+x*zoom, offsetY*zoom+file.canvas.height*zoom)
+      }
+      for (let y = gridMinorSize; y < file.canvas.height; y += gridMinorSize) {
+        ctx.moveTo(offsetX*zoom, offsetY*zoom+y*zoom)
+        ctx.lineTo(offsetX*zoom+file.canvas.width*zoom, offsetY*zoom+y*zoom)
+      }
+      ctx.stroke()
+      // Major grid lines.
+      ctx.strokeStyle = gridMajorColor
+      ctx.lineWidth = 0.5
+      ctx.beginPath()
+      for (let x = gridMajorSize; x < file.canvas.width; x += gridMajorSize) {
+        ctx.moveTo(offsetX*zoom+x*zoom, offsetY*zoom)
+        ctx.lineTo(offsetX*zoom+x*zoom, offsetY*zoom+file.canvas.height*zoom)
+      }
+      for (let y = gridMajorSize; y < file.canvas.height; y += gridMajorSize) {
+        ctx.moveTo(offsetX*zoom, offsetY*zoom+y*zoom)
+        ctx.lineTo(offsetX*zoom+file.canvas.width*zoom, offsetY*zoom+y*zoom)
+      }
+      ctx.stroke()
+    }
+
     // Draw our overlay with difference composition so visibility is better.
     ctx.save()
     ctx.globalCompositeOperation = 'difference'