OLED Pixel Editor is a free, browser-based pixel art editor designed for embedded systems developers, Arduino hobbyists, and ESP32 makers. It lets you design monochrome bitmap graphics for common OLED displays — including SSD1306 128×64, SSD1306 128×32, SH1106, and many other display controller variants — directly in your browser without installing any software.
The tool runs entirely in the browser as a single HTML file, making it fully compatible with Netlify, GitHub Pages, and any static web host. No backend or internet connection is required after loading.
The editor includes a full drawing toolkit: pencil with adjustable brush size, eraser, flood fill, line, rectangle (outline and filled), ellipse, circle, triangle, diamond, star, arrow, rounded rectangle, and cross tools. A rectangular selection tool supports move, copy, cut, paste, resize, and transform operations on any area of the canvas.
Export options include PNG image download, CSV pixel data, C Array header files for direct use in Arduino and ESP32 sketches, and fully ready-to-flash Arduino .ino sketch files pre-configured for the Adafruit SSD1306 library. You can also import previously exported CSV files to continue editing saved work.
Additional features include 80-step undo/redo history, 16+ preset canvas resolutions ranging from 50×16 to 256×64, custom resolution up to 1024×1024, pinch-to-zoom touch support for tablets and phones, bitmap transforms (flip horizontal, flip vertical, rotate 90°, invert), and a zoom range from 50% to 2000%.
Select a drawing tool from the left sidebar or use keyboard shortcuts (P for pencil, E for eraser, F for fill, L for line, R for rectangle, C for circle, T for triangle, D for diamond, S for select). Choose your target canvas resolution from the dropdown — 128×64 is the standard SSD1306 OLED resolution — or enter a custom size.
Draw pixels on the canvas using your mouse or finger. Use the brush size controls in the top toolbar to paint multiple pixels at once. When your artwork is complete, click the export button that matches your target format. For Arduino and ESP32 projects, the "Arduino Sketch" export generates a complete .ino file that draws your bitmap using display.drawBitmap() from the Adafruit SSD1306 library.
To load an existing design, export it as CSV and re-import it later using the Import button. The canvas auto-resizes to match the imported CSV dimensions.
This OLED bitmap editor generates compatible output for SSD1306 (the most common 128×64 and 128×32 OLED driver), SH1106 (96×64 and 128×64), SSD1309, and other I2C or SPI monochrome OLED controllers. It works with Arduino Uno, Nano, Mega, ESP8266 (NodeMCU), ESP32, Raspberry Pi Pico, STM32, and any board that supports the Adafruit GFX and Adafruit SSD1306 libraries.
.ino file, or C Array for a .h header you can paste into any project.Top toolbar — Undo/Redo, Brush size, Transform operations, Export buttons, Canvas resolution picker, Zoom controls.
Left sidebar — All drawing and shape tools. Hover any tool icon to see its name and keyboard shortcut.
Canvas area — The pixel grid. Each cell represents one pixel on your OLED display. White = ON (lit), dark grey = OFF.
Selection toolbar — Appears automatically below the main toolbar when you have an active selection. Contains copy, cut, paste, transform and crop actions scoped to the selection.
Status bar — Shows current tool, cursor position, brush size, canvas dimensions, selection info, lit pixel count, and zoom level.
Click to toggle pixels. Drag to paint a continuous line. Clicking an ON pixel switches to erase mode for that stroke — so one drag toggles consistently.
Always turns pixels OFF. Drag to erase in a line. Brush size applies — a 3px eraser clears a 3px circular area per point.
Flood-fills a contiguous region of same-state pixels. Click an OFF pixel to fill the connected area ON, or click ON to erase it. Does not respect brush size.
Applies to Pencil, Eraser, and all Shape tools. The 3 dot presets set 1/2/3px. Type any value 1–64 in the custom box. Shapes are drawn at 1px then dilated to match brush size.
The Invert, ↔ H, ↕ V, ↻ 90° buttons in the toolbar are selection-aware. If a selection is active they operate only on the selected pixels; otherwise they transform the whole canvas.
Swaps every pixel: ON→OFF and OFF→ON. Useful for white-on-black to black-on-white.
Mirrors the image horizontally or vertically. Both work on selection or full canvas.
Rotates clockwise 90°. On a selection, the selection box resizes (W↔H swap) and recentres. On the full canvas the pixel grid is rotated.
Erases the entire canvas. Undoable with Ctrl+Z.
All shape tools work the same way: click to set the start point, drag to the end point, release to commit. A green live preview tracks your drag. An orange dot marks the anchor (start) point. Brush size thickens all outlines.
Draws a straight line between two points using Bresenham's algorithm. Supports brush size for thick lines.
Drag to draw a hollow rectangle outline. Use Filled Rect below it for a solid filled box.
Rectangle with rounded corners. Corner radius scales automatically with the box size (max 6px).
Free-form ellipse from corner to corner of the bounding box. Hold Shift during drag for a perfect circle.
Always draws a perfect circle. Drag from the top-left corner — the radius is the smaller of horizontal/vertical distance.
Isosceles triangle — apex at the top-centre, base at the bottom. Filled variant available below it.
Draws a 4-point diamond (rotated square) inside the drag bounding box. Filled variant available.
Draws a 5-point star outline inside the bounding box. Inner radius is 40% of the outer radius.
Line with an arrowhead at the end point. Head length is ~28% of the shaft length.
Draws a plus-sign cross. Arm thickness scales to ~15% of the bounding box size.
Press S or click the dashed-rectangle icon at the bottom of the sidebar to activate the selection tool.
Click and drag inside the selection box to move it. Selected pixels are lifted off the canvas (shown semi-transparent while floating) and stamped down when you release. Hold Alt while starting a drag to duplicate instead of move. Use arrow keys to nudge 1px, Shift+Arrow to jump 8px.
Eight blue square handles appear at the corners and edge midpoints of the active selection. Drag any handle to resize the selection content. The pixels inside are scaled using nearest-neighbour to fit the new size — exactly like MS Paint. The original pixels are removed from the canvas as soon as you start dragging a handle.
Copies selection pixels to internal clipboard. Does not modify the canvas.
Copies to clipboard and erases selection pixels from the canvas.
Pastes clipboard as a floating selection at position (2,2). Drag to reposition before it stamps down.
Erases all pixels outside the selection. The selection itself is cleared afterwards.
Erases all pixels inside the selection. Undoable.
Invert, Flip H/V, and Rotate 90° in the selection toolbar apply only to the selected area.
Exports the canvas as a 1:1 monochrome PNG at the native pixel resolution (e.g. 128×64 px). White pixels = ON, black = OFF. Use for previewing or sharing your design.
Exports a text file where each row is a canvas row and each value is 0 (OFF) or 1 (ON). Use this to save your work and re-import it later for continued editing.
Exports a const uint8_t bitmap[] PROGMEM array. Paste into any Arduino / ESP32 sketch. Each byte packs 8 horizontal pixels, MSB first — compatible with Adafruit GFX drawBitmap().
Exports a complete, ready-to-flash Arduino sketch pre-configured for the Adafruit SSD1306 library. Includes all #includes, display init, and drawBitmap() call. Default wiring: SDA=D2, SCL=D1 (ESP8266/ESP32 NodeMCU).
.csv file. If the file dimensions differ from the current canvas, the canvas will automatically resize to match and the history will be cleared.After exporting C Array, open the downloaded oled_bitmap.h and copy the array declaration into your sketch, or #include it. Then call:
display.drawBitmap(x, y, bitmap, WIDTH, HEIGHT, SSD1306_WHITE);
Replace x, y with your desired screen position. WIDTH and HEIGHT match your canvas resolution.
Use the Canvas dropdown to change resolution. 16 presets cover all common OLED sizes:
SSD1306: 128×64, 128×32 | SH1106: 128×64 | SSD1327: 128×128 | SSD1309: 128×64 | Tiny OLEDs: 96×16, 72×40, 64×32, 50×16
Choose Custom… to enter any width × height up to 1024×1024. Changing resolution when the canvas has content will ask for confirmation and clear the artwork.
Wire.begin() so it works on standard board defaults (Uno, Nano, ESP32, ESP8266 default mapping). If your board requires custom I²C pins, change it to Wire.begin(SDA, SCL).| Key | Action |
|---|---|
| P | Pencil tool |
| E | Eraser tool |
| F | Flood Fill tool |
| L | Line tool |
| R | Rectangle tool |
| C | Perfect Circle tool |
| T | Triangle tool |
| D | Diamond tool |
| S | Selection tool |
| Key | Action |
|---|---|
| CtrlZ | Undo (up to 80 steps) |
| CtrlY or CtrlShiftZ | Redo |
| CtrlC | Copy selection |
| CtrlX | Cut selection |
| CtrlV | Paste |
| Del / Backspace | Delete selection pixels |
| Esc | Cancel / deselect |
| Key | Action |
|---|---|
| ↑ ↓ ← → | Nudge selection 1px |
| Shift + Arrow | Jump selection 8px |
| Key / Action | Result |
|---|---|
| Scroll wheel | Zoom in / out centred on cursor |
| Pinch (touch) | Zoom in / out (mobile/tablet) |
| Middle-click + drag | Pan the canvas |
| Ctrl + left-drag | Pan the canvas |
| Shift + drag (Ellipse) | Constrain to perfect circle |
| Alt + drag selection | Duplicate instead of move |
SCREEN_ADDRESS (0x3C or 0x3D) matches your specific OLED module — some modules use 0x3D.| Module / Controller | Default Address | Notes |
|---|---|---|
| SSD1306 128×64 (most) | 0x3C | SA0 pin low (default) |
| SSD1306 128×64 (alt) | 0x3D | SA0 pin high |
| SSD1306 128×32 | 0x3C | — |
| SH1106 128×64 | 0x3C | Use Adafruit_SH110X lib |
| SSD1327 128×128 | 0x3C | Greyscale — use with GFX |