LED Matrix online editor


I would like to introduce my new mini-project LED Matrix Editor created for the Arduino community.

This is online tool for editing and creating animations for LED dot matrices.

It looks very simple, but it has some handy features:

  • Online, free and safe. No additional software required.
  • Toggle LEDs using a mouse
  • Toggle a whole row or column by clicking the appropriate matrix's index
  • Shift the matrix Up, Down, Left or Right via the single click
  • Invert or Clear matrix
  • Collect matrices in the bottom pane and then reorder them using the Drag-and-Drop
  • Update images as well as insert new or delete existing
  • Save images as a C code for Arduino
  • Use browsing history and save images as a link or bookmark, so you never lost your creations

I hope you will be fun and happy using it.

And the sample how to use generated code:

#include <LedControl.h>

const int DIN_PIN = 7;
const int CS_PIN = 6;
const int CLK_PIN = 5;

const uint64_t IMAGES[] = {
  0x3e2222223e3e0808, 0x3e22223e3e2a0808, 0x3e223e3e2a2a0808, 0xbe3e3e2a2a2a0808,
  0xbe223e3e2a2a0808, 0xbe22223e3e2a0808, 0xbe2222223e3e0808, 0xbe22223e3e2a0808,
  0xbe223e3e2a2a0808, 0xbebe3e2a2a2a0808, 0xbea23e3e2a2a0808, 0xbea2223e3e2a0808,
  0xbea222223e3e0808, 0xbea2223e3e2a0808, 0xbea23e3e2a2a0808, 0xbebebe2a2a2a0808,
  0xbea2be3e2a2a0808, 0xbea2a23e3e2a0808, 0xbea2a2223e3e0808, 0xbea2a23e3e2a0808,
  0xbea2be3e2a2a0808, 0xbebebeaa2a2a0808, 0xbea2bebe2a2a0808, 0xbea2a2be3e2a0808,
  0xbea2a2a23e3e0808, 0xbea2a2be3e2a0808, 0xbea2bebe2a2a0808, 0xbebebeaaaa2a0808,
  0xbea2bebeaa2a0808, 0xbea2a2bebe2a0808, 0xbea2a2a2be3e0808, 0xbea2a2bebe2a0808,
  0xbea2bebeaa2a0808, 0xbebebeaaaaaa0808, 0xbea2bebeaaaa0808, 0xbea2a2bebeaa0808,
  0xbea2a2a2bebe0808, 0xbea2a2a2a2be1c08, 0xbea2a2a2a2a21c1c, 0xbea2a2a2a222001c,
  0xbea2a2a22222001c, 0xbea2a2222222001c, 0xbea222222222001c, 0xbe2222222222001c,
  0x3e2222222222001c, 0x3e2222222222001c, 0x3e22222222221c1c, 0x3e222222223e1c08
const int IMAGES_LEN = sizeof(IMAGES) / sizeof(uint64_t);

LedControl display = LedControl(DIN_PIN, CLK_PIN, CS_PIN);

void setup() {
  display.shutdown(0, false);
  display.setIntensity(0, 10);

void displayImage(uint64_t image) {
  for (int i = 0; i < 8; i++) {
    byte row = (image >> i * 8) & 0xFF;
    for (int j = 0; j < 8; j++) {
      display.setLed(0, i, j, bitRead(row, j));

int i = 0;

void loop() {
  if (++i >= IMAGES_LEN ) {
    i = 0;

While it is much more tedious to scroll through, I prefer to define fonts as binary declarations, so you can actually view the characters - and modify them - as needed.

Paul__B, thanks for your review.

Are you about this form?

byte image[] = {
    0, 0, 0, 0, 1, 0, 0, 0,
    0, 0, 0, 1, 1, 0, 0, 0,
    0, 0, 0, 0, 1, 0, 0, 0,
    0, 0, 0, 0, 1, 0, 0, 0,
    0, 0, 0, 0, 1, 0, 0, 0,
    0, 0, 0, 0, 1, 0, 0, 0,
    0, 0, 0, 0, 1, 0, 0, 0,
    0, 0, 0, 1, 1, 1, 0, 0

I think that is true, if you are working with small amount of images. And if you have a good sight.
I'm not sure that I see character "1" in the code above...

But I definitely see it here:

In my code I keep this image as a 64-bit integer;

uint64_t image = 0x3810101010101810;

If I'm correct, it takes 8 times less memory, than the array of bytes ...

Then imagine you are going to make an animation with quite large amount of frames.

Shifting, reordering, removing, copying - all of this is much easier and clearly using the tool.

I think what Paul__B meant is that this would be readable and take up the same space as your hex codes:

byte image[] = {


Nice project.

If I'm correct, it takes 8 times less memory, than the array of bytes ...

Takes the same space. You are using 1 uint64_t x 64 bits, which is 8 uint8_t x 8 bits, same number of bits and probably stored in the same way as array of bytes.

Takes the same space.

No, Xantorohara's suggestion in post #3 would indeed take 64 bytes, 8 times more. But Paul_B's/my suggestion would take 64 bits, the same size as the less readable hex format in post #1.

I just added option to save matrices as arrays of bytes (as it was mentioned by PaulRB and Paul__B)

So, now it is possible to choose preferred type.

And here is a code sample

Good show!

Thanks for the app! I used on my PIC uC project, it works fine! The result:

Mind you, the "foot" on that numeral 1 is a bit excessive. One pixel either side is adequate.

Will do Paul! This was just to check if the program was working on the PIC, obviously it was :D.