Welcome to Blocker

Blocker is an isometric block editor. It allows you to create isometric pixel sketches right in the browser.

Getting Started

To start drawing, select a color from the toolbar on the bottom of the screen and click on the canvas. A transparent block shows you where the next block will be placed when you click. You can add or remove blocks from the canvas easily by switching drawing modes.

Drawing Modes

Single block mode adds one block at at time to the canvas. In multiple blocks mode, you can add multiple blocks and can control the number of blocks using the sliders to adjust the grid size.

Delete mode removes blocks from the canvas. Selecting one or multiple blocks will turn them black indicating what blocks will be removed - then click the delete button in the toolbar or hitting the backspace button on the keyboard.

The history buttons in the toolbar allow you to redo or undo your actions.

Import and Export

Sketches saved as json files can be imported. Sketches can be saved to the local web storage or exported in either a json or html format.

In the file menu you can:

Save your sketch to your local machine.
Load a sketch that you have saved to your local machine.
Import a sketch that was exported in a json format.
Export a sketch to either an html or a json file. Export it as html to embed your sketch on other websites. Export it as json if you want to import and modify your sketch at a later date using this editor.

Keyboard shortcuts

Press the numbers 1 - 6 to change the block color.
Press ctrl + q for single block mode.
Press ctrl + m for multiple block mode.
Press ctrl + d for delete mode.
Press ctrl + z for undo.
Press ctrl + shift + z for redo.
Press ctrl + s to open the save menu.
Press ctrl + o to open the import menu.
Press ctrl + e to open the export menu.
Press ctrl + h to toggle this help box.
Press ctrl + k to switch between editor and gallery.
In single block mode, hold shift while moving the mouse to draw blocks faster.
In delete mode, hold shift while dragging to select multiple blocks.
In delete mode, press backspace to delete selected blocks.

Pro Tips

You can use transparent blocks to build hovering objects. Just build an object as you normally would using transparent blocks as scaffolding. When you're done click "Delete Blocks" / "Delete transparent blocks" to remove all transparent blocks.
Mac users can use the cmd key instead of ctrl for shortcuts.

If you want to share your sketches with others, you can upload it it to our gallery.