OLED Pixel Editor is a free, browser-based bitmap design tool for monochrome OLED displays. It lets embedded developers, Arduino hobbyists, and ESP32 makers draw pixel art for SSD1306 128×64, SSD1306 128×32, SH1106, and other display controllers — and export it as a ready-to-flash Arduino sketch or C Array header, all without installing any software.
The tool runs entirely in your browser as a single HTML file. No backend, no data collection, and no internet connection required after the initial load. It is fully compatible with Netlify, GitHub Pages, or any static host.
OLED Pixel Editor was created by Sujan S, an embedded systems maker who publishes Arduino and ESP32 tutorials on YouTube under the channel BlinkNBuild. The editor was built to simplify the process of designing bitmap graphics for OLED displays without needing a separate image conversion pipeline.
Click the Arduino Sketch button to download a complete .ino file pre-wired for the Adafruit SSD1306 library. The sketch calls display.drawBitmap() and works with Arduino Uno, Nano, Mega, ESP8266, and ESP32 out of the box. For a raw header file, click C Array. Both formats are compatible with any board that supports the Adafruit GFX library.
Drawing tools: pencil with adjustable brush size, eraser, flood fill, line, rectangle (outline and filled), ellipse, circle, triangle, diamond, star, arrow, rounded rectangle, and cross. A rectangular selection tool supports move, copy, cut, paste, resize, and transform.
Export formats: PNG, CSV pixel data, C Array header (.h), and ready-to-flash Arduino sketch (.ino). Import previously saved CSV files to resume editing.
Additional features: 80-step undo/redo, 16+ preset canvas resolutions, custom size up to 1024×1024, pinch-to-zoom touch support, bitmap transforms (flip, rotate, invert), and zoom from 50% to 2000%.
Yes. After the initial page load, OLED Pixel Editor runs fully offline with zero server communication. Every drawing, transform, and export operation happens locally in your browser.
16 presets including 128×64 (standard SSD1306), 128×32, 96×16, 96×64, 128×128, 240×128, 256×64, and more. Enter any custom size up to 1024×1024 pixels.
A full step-by-step tutorial for OLED Pixel Editor is available on YouTube: OLED Pixel Editor Tutorial on YouTube by BlinkNBuild. The video covers drawing tools, shape usage, canvas setup, and exporting a complete Arduino sketch for the SSD1306 OLED display.
Compatible output for SSD1306 (128×64 and 128×32), SH1106, SSD1309, and other I²C or SPI monochrome OLED controllers. Works with Arduino Uno, Nano, Mega, ESP8266 (NodeMCU), ESP32, Raspberry Pi Pico, STM32, and any board supporting the Adafruit GFX and Adafruit SSD1306 libraries.
A free, fully client-side pixel art editor for designing monochrome bitmaps on SSD1306, SH1106, Arduino & ESP32 OLED displays. Draw, transform, and export directly to a ready-to-flash Arduino .ino sketch, C Array header, PNG, or CSV — all without leaving your browser.
.ino file, or C Array for a .h header you can paste into any project.Watch the full step-by-step walkthrough on YouTube — from drawing your first pixel to exporting an Arduino sketch:
Watch on YouTube — OLED Pixel Editor TutorialTop 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 |