pxls.space template fiddle header image

Documentation

The pxls.space Template Fiddle lets you easily make template images for the pxls.space pixel canvas.

This documentation covers each section and option in detail, though most are self-explanatory and you should be able to use the pxls.space Template Fiddle without any particular need to read this documentation.
⚠️ NOTE: The site was recently updated, and this documentation is currently incomplete and, in rare cases, incorrect.

Page-wide tips

ℹ️ TIP: For all pixelized images - and many images inside this documentation - you can move your mouse cursor over the image to see a 4x zoom of that region.
ℹ️ TIP: Many input values are interactive, allowing you to modify them and see the results immediately. This also applies to the 4x zoom region; click on a value you want to change, hover over the image to get the zoom window, then use your keyboard's arrow keys to adjust the value and see the changes in the zoomed image as well.
ℹ️ TIP: Output values relay information that has been calculated by the Template Fiddle. Move your mouse over a calculated value to get quick information on how these values were established - leave your mouse there for a little longer to highlight related values.

'anonymous cross-origin policy'

Several parts of the pxls.space template fiddle require reading pixels from images, and writing them to canvas elements.
In order to do this, the image must either be hosted on the same domain (in this case, jsfiddle.net, which is not an option), or the domain hosting it and the requesting site must agree upon cross-origin resource sharing (CORS).
Because no such agreement can easily be set up, the pxls.space template fiddle instead requires that the image host allows an anonymous cross-origin policy.
There are several image hosting sites that qualify, but imgur is probably the most well-known, allows anonymous uploads, and retains images practically indefinitely, making it ideal for the purposes of the pxls.space template fiddle.

An option to bypass this requirement using a proxy is offered, but please note that as with all proxies it has privacy implications; the proxy host may record your IP address and the image being loaded
interface image - CORS bypass button

Cooldown per untouched pixel

interface image - number of users online The optional 'cooldown per untouched pixel' field lets you specify the cooldown time (time until you can place another pixel) for untouched pixels.
At the time of this writing, this timer increases by 60% if you place on a pre-existing pixel (as opposed to an untouched pixel - a pixel at a location where nobody has placed a pixel yet).
ℹ️ TIP: Open the graph to the right to see the cooldown mechanic on pxls.space at the time of this writing. ⚠️ NOTE: pxls.space sometimes has an event where the cooldown time is much lower.

Changing this value affects any other displays of how long it would take a single person, working non-stop, to build a given piece of art.
interface image - cooldown per untouched pixel

Further Configuration

The 'further configuration' button shows/hides internal configuration settings. For details about these configuration settings, please see the 'Further Configuration' section.


Turn an image into pixel art

Turning an image into pixel art is an art form. The tools provided here are only for quick conversions of existing pixel art or other images to the 'right' size, and correct color palette.
However, these tools are 'dumb'. If it believes a cartoon character's jacket most closely matches mauve, then there is no way to tell it that you would prefer purple. If these tools don't yield the results you want, you may have to manually (pre-)process your image.

Your input image

You can provide any PNG, JPG, GIF, or even SVG for conversion.
Once provided, your input image will automatically be processed. First it will be checked if anonymous CORS is supported by its host (see above).
( if not supported, a proxy bypass option will be offered )
ℹ️ TIP: You can also drag-and-drop an image from your computer's file manager, another browser window/tab, and paste images directly. ⚠️ NOTE: When pasting images copied from e.g. a graphics editor, transparency information may be lost. This is a limitation caused by applications/the host system. If your image uses transparency, consider saving the file and drag-and-drop it instead. ❌ NOTE: Animated GIFs are not supported - only the first frame will be processed.

After that, some basic statistics for the image will be displayed, such as its width and height, and how many total pixels there are to place.
The total amount of pixels to place depends on at least two things: the transparency of the pixels, and the colors of the pixels.
If a pixel in your input image is completely transparent, then it won't count as a pixel that would have to be placed.
Similarly, if a pixel in your input image matches the current canvas background color exactly, then it won't count as a pixel that would have to be placed.
Based on the total number of pixels that would have to be placed, an estimate for how long it would take a single person working non-stop to build it, based on the pxls.space number of users, will be given.

interface image - processing progress indicator During processing, you may notice a yellow line going vertically across your input image. This is the current line of pixels in your input image that is being processed. For most images this line should zip right by, but for larger outputs, with the accurate color matching option and full dithering, this gives a good indication of progress.
Depending on your image source, you may sometimes see this line skipping ahead; this is when it has to match colors that it has matched previously and can skip the relatively slow matching process.

Input adjustments

The input adjustments affect your input image before it is resized.

Horizontal Offset / Vertical Offset

When an image is scaled down for pixel art, the scaling method has to choose which pixels contribute to the smaller image.
Depending on your source image, you may find that adding a small offset yields a better output image.
exammple image - input image with incorrect offsetexammple image - offset inputA particular use case is when your source image is already 'pixel art' but has a grid overlay. For example, the image to the left, when scaled down to its correct size, shows remnants of its grid in the output image shown to the right.

example image - input image offset resultsBut by applying an offset to the input image before scaling, this grid can be eliminated entirely for practically all such images. In the example image, shifting 4 pixels to the right and then 4 pixels upward (a value of -4) clears the output up nicely.
ℹ️ TIP: Set 'Match Palette' to 'No' to make it easier to see if 'dirty' output, such as from grids, is from the input image, or from color matching.

Border

An image that has transparency included (either directly or through the masking feature - see further configuration) can be given a single pixel border, which is commonly used on pixel canvases in order to contrast the art against background patterns such as lattices.
The border features allow you to choose a custom color, a color from the palette using the dropdown, as well as one of two border styles; sparse = border pixels are not placed on diagonals, full - border pixels are placed on diagonals.
example image - border styles

Alpha threshold

example image: alpha thresholdexample image: alpha threshold source imageYour provided image can have transparency - but you can't draw with transparency on the pxls.space canvas.
A decision thus has to be made as to which pixels should be drawn with all transparency removed, and which pixels should be made completely transparent and not be drawn.
The alpha threshold value determines the transparency value (alpha, ranging 0 through 255) below which the pixels are made completely transparent. As an example, the image to the left is a simple red image with swirly transparency. To the right are results with this threshold value set to 0, 51, 102, 153, 204, and 255.
The default, 128, is right in the middle and works well for typical usage. ⚠️ NOTE: When set to 0 (zero), all pixels will be drawn even if they were completely transparent in the input image. This may result in unexpected colors, or black, if the image did not store color information for fully transparent pixels, as shown in the example. This is often configurable in a graphics editor before saving.

Output adjustments

The output adjustments affect how your image is resized, and how your image is changed after it has been resized.

Output width/height

Depending on what image you chose to try and build, you may find that it is much too large.
The output image can easily be changed, and you will practically immediately see what it would look like if resized to a smaller size.
Smaller images take less time to build, but may have less detail.

example image: pixel art input image If your input image is already pixel art, but it is too big - for example because the author scaled it up for display on popular websites - there are a few easy steps to find the 'right' size:
  1. example image - pixel art with pixel count and dimensions indicated example image - pixel art with pixel count and dimensions indicatedCount the number of blocks across. This is easier if the image has a clean grid overlay. If you can count the number of blocks there are, then this is your exact 'Output width' value. In the example image, 61 full blocks can be counted and the grid is well-aligned, so an 'Output width' of 61 should be correct.
  2. Find out how big the blocks are. If each block is 4x4 pixels, then your 'Output width' is the image's original width divided by 4; for a 100 pixel wide image this means the 'Output width' would be set to 100 / 4 = 25. In the example image, each block is measured as roughly 12 pixels by 12 pixels (the grid is not perfect) which, given an original width of 736 pixels, gives 736 / 12 ~= 61 pixels.
  3. example image - output sizeStart at a rough low estimate, and increase the value slowly until it looks right. This works under the presumption that pixel art is usually small and it is easy to see when the 'Output width' is too small as details disappear. Increasing the value slowly means you should eventually get the size that it should be without actually making the output too big.
    This method is probably the one you would end up using the most, as it requires very little effort, especially with grid overlay images as it is easy to see when you've got the 'right' size: the remnants of the grid show either disappear or become very broad. In the example image, 'Output width' was started at 56 and brought up to 61.
    ℹ️ TIP: If the grid doesn't disappear but does become very broad, try using the 'Horizontal and Vertical offset' values.
example image - U.S. flag pixel artexample image - U.S. flagFor images that aren't already 'pixel art', the 'right' size really depends more on what you think looks good and what you think you can build in a reasonable amount of time.
This American flag from wikipedia, for example, looks great at an 'Output width' of 210 pixels (with a 'Horizontal offset' of 3), but would take a single person more than a week to draw if they draw non-stop without sleep.

example image - U.S. flag pixel art, smallMaking it small enough that it would take just under a day, however, causes it to lose much of its details and compromises have to be made with some of the colors in order to fit the stripes.

example image - U.S. flag pixel art, hand-drawnThis is as good a time as any to point out once again that, ultimately, pixel art is an art form, and that for some art you may have to just draw your images by hand. The flag in this example can't really be made any smaller without it ending up very fuzzy with very little definition, while a pixel artist might instead draw something like the image to the right which, while not a 100% accurate depiction of the American flag, is crisp and on a pixel canvas would unmistakably be seen as the American flag.

Transform

When a canvas gets filled in with art, you may find that your image doesn't fit well in its original orientation. Flipping the image horizontally (sometimes called mirroring), flipping it vertically (upside down), or rotating the image may help to fit the image better onto the canvas.
ℹ️ TIP: Trying to rotate the image 180 degrees? Flip the image horizontally and vertically.

Match Palette

example image - color matching methodsexample image - color chart input Your input image may not be using the same palette as pxls.space or, worse, may not be a pixel art image at all.
In order to properly draw the image at pxls.space, it's recommended that you convert it to the pxls.space palette first.
The 'match palette' options allow you to use automated tools to try and conver the input image's colors to those of the pxls.space palette.
Three options are given: 'No', which leaves your input image's colors alone, 'Yes, fast', which uses a fast but relatively inaccurate homebrew algorithm (luma-weighted RGB) to match colors, and 'Yes, accurate', which uses a fairly accurate but slow algorithm (CIEDE2000).
Given the input image on the left, the image on the right shows the 'fast' and 'accurate' color matching options. While both produce similar results, the 'fast' algorithm does tend to include unnecessary colors into grey scale areas, but on some images may yields results that you prefer.

Use dithering

example image - color chart color matched with ditheringBecause of the limited number of colors in the pxls.space palette, some colors in your input image may not 'look like' any one of them.
However, mixing two colors may make it look pretty close. While colors can't be mixed at pxls.space, dithering can be employed instead.
Compare the image to the right to those above it from the Match Palette section.

While there are many dithering algorithms - Bayer, Floyd-Steinberg, Jarvis, Judice & Ninke - most of these are ill-suited to automatic conversion for pixel art as they can often generate dithering artifacts that make them appear to be part of the art's design, rather than being close dithered color matches.
Instead, the pxls.space template fiddle uses a single-level checkerboard dither (similar to single-level Bayer with a 2x2 matrix) to minimize such errors, while still greatly expanding the number of 'colors' in the palette.
ℹ️ INFO: You may notice color changes in dithered results when scrolling. The dither pattern if left 'as is' can cause extreme flickering depending on display refresh technology. To prevent this flickering, the images are temporarily blurred, resulting in a minor color change.

example image - dither checker orderThe dither process further takes into account whether a color is considered 'light' or 'dark' in order to prevent adjacent dithered areas from having neighboring pixels being 'light' or 'dark' which would introduce similar artifacts.

Threshold for mixes

example image - wikipedia logo ditheredexample image - dithering levels Finally, because dithering relies on mixing one color with another, naive implementations may result in strange combinations such as yellow+blue = grey, which can have obvious visual patterning.
To prevent such combinations, a mixing threshold can be set. The lower the mixing threshold, the more alike two colors have to be in order to be considered a viable mix. This reduces the number of strange pairings, but also reduces the number of potential 'colors' in the palette.

The image to the left shows 'Threshold for mixes' values of 15, 25, 50, and 100. Notice that at 100, colors like pure black and pure white are combined to make a 50% grey, but even at 50 it combines orange and dark green. While this yields many more color combinations, these colors may appear to clash. At a value of 25, there are fewer color combinations, but the color combinations that are still present are much more sensible.

The image to the right shows another example with a more realistic input image; the wikipedia logo. At 100, the black/white dithering causes the result to look odd. At 25, while having fewer combinations, the result is visually more pleasing.
ℹ️ TIP: If you just want as many 'colors' as possible, set the threshold to 100%

The output result image

interface image - image statisticsWhen you first provide a valid input image, and whenever changing one of the settings, a new output image is generated, along with some basic statistics about this image.
These statistics follow the same information as for the input image: width and height, number of pixels to draw, how long it would take to draw, etc.

interface image - image color matching statistics An additional statistic is how many colors (colors, not pixels) in the input image were re-mapped to pxls.space colors. ⚠️ If your input image is supposed to already be using the pxls.space palette (e.g. from you editing the image in The GIMP or Paint.net and applying the palette), you may have an error in your editing process that changed their colors slightly.
In the example image to the right, the pxls.space logo contains the old light grey palette color, which does not match the current (as of this writing) light grey color.

example image - increased build times due to color dithering On some occasions, the process of mapping and dithering colors in your image may increase the number of pixels that have to be drawn, even though you decreased the output size. This happens when the image resizing process creates new blended colors from colors that were originally transparent or matching the background color.

Copy this result to the next section

After you have turned an image into 'pixel art', you'll probably still want to continue to turn it into a template style image.
For your convenience, you can simply press this button and the 'Turn pixel art into a dot/letter/Hearts template image' section will be taken care of automatically using your result image from this section.

De-templatizing an image

If the image provided was the result of a pxls.space Template Fiddle template style, that template style will be removed producing a non-stylized image. If this is the case, that will be indicated in the following information. interface image - de-templatized image


Turn pixel art into a dot/letter/Hearts template image

Pixel art can be used as a template 'as is' at pxls.space. However, it was quickly discovered that the way that template images are displayed on top of the pixel canvas allows one to use templates where each canvas pixel is subdivided into further pixels.
The most common form of template image makes use of this by only showing the intended color of the canvas pixel as a dot in the middle, leaving the rest transparent. This makes it easy to see what color a canvas pixel should be, as well as the current color of the canvas pixel.
Later, other forms were designed to aid with distinguishing colors: a white and a beige dot can look very similar, but by using the letters 'w' and 'g' ('b' being used to dinstinguish black from dark grey) it's much easier to realize which color to use.

Your input image

As with the pixel art section, you can enter the URL, drag and drop, or paste an image for processing.
When the image has been processed, its basic information will be displayed - size, an estimate of how many pixels to place, how long it would take a single person to do so, etc. ℹ️ TIP: If you just processed an image in the previous section, check out the "Copy this result to the next section" button to automatically load it into this section! ❌ NOTE: Because vector images often lack an exact pixel scale or are set to be stupendously large, attempting to load an SVG image will result in an error message. Vector images must always be processed into pixel art first.

Because images can be used here without first running them through the pixel art section, the image will also be checked to see if it has any semi-transparent pixels, or any colors that do not match the pxls.space palette. A warning will be displayed if anything appears to be amiss.
interface image - template input image checks

Output template images

Once provided, your input image will automatically be processed into several different template styles:

example image - 'none' template style none
In the 'none' template style, your input image is used 'as is'. This can be useful to check what your built image looks like on the canvas, or position your template on the canvas, as the scale (zoom) level of the canvas can sometimes make the other styles appear/disappear.


example image - 'dotted' template style dotted
In the 'dotted' template style, each pixel on the canvas is subdivided into 9 squares, with only the center square filled in. This makes it easy to see which color you should be placing on the canvas pixel (the color of the center square), as well as what color the canvas pixel currently is (the surrounding square).


example image - 'symbols' template style symbols
The 'symbols' template style is almost the same as the 'dotted' template style, except that black and white are displayed as + symbols, and beige is displayed as an x.
This style was created because in some situations, it's not easy to see the difference between light grey and white, beige and white, and dark grey and black. Now when you seen an 'x', you'll know it has to be white or black, and not light grey/beige or dark grey.


example image - 'letters' template style letters
An extension of the 'symbols' style, in this style all the grey scale colors use letters, rather than dots or symbols; wwhite, light grey, medium grey, dark grey, black, and additionally beige. The other colors still use center dots.
This template style divides each canvas pixel into 25 squares. For large input images, this means that with the template image becoming 5 times as big, it may not load correctly on e.g. mobile devices.


example image - 'hearts' template style hearts
A modification of the 'letters' style, in this style the dots used for the other colors are replaced with little heart shapes instead.


example image - 'custom' template style custom
The 'custom' template style divides a canvas pixel into 49 squares, with each color having a possible different shape;
white, light grey, medium grey, dark grey, black, and beige use the same letters as in the 'letters' style, except larger letters.
pink is a bow, red is a heart, maroon is a drop of blood, orange is an orange, brown is uhh.. yeah, yellow is a sun, lime is a lime, green is a shamrock, cyan, cerulean, and blue are waves, mauve is a thing, magenta is a tulip, and purple is a bow.

But the reason it's called 'custom' is because this style you can customize yourself in the 'Further Configuration' section.

Do note that because it expands each pixel into 49 squares (sub-pixels), even mid-sized input images will create large output template images. For example, a 200x200 pixel input image becomes a 1400x1400 pixel output template image.

The 'glow' output variant

example image - 'glow' template variant For each template output style, another is generated on a second row. This is the 'glow' variant, which adds your original input image as a semi-transparent background.
Like the 'none' type, this adds the advantage of making it easier to see and position your template image where other styles may appear/disappear depending on the canvas scale (zoom) level.
One down side is that this semi-transparent color gets mixed with the actual pixel canvas color, and for some combinations it might not be easy to see what the actual canvas color is. ℹ️ TIP: pxls.space lets you toggle the visibility of your template image by pressing the 'v' key or going into the pxls.space settings.

Output pxls.space links

Below each of the template output styles is also a link to pxls.space that includes your template image. By opening this link, you can easily preview your template image on the pxls.space canvas before finalizing it, or position your template image before generating a template link.
⚠️ WARNING: These links include your template image in the link itself. This makes these links very, very, very...very long, and not suitable for sharing with your friends or faction. You should absolutely read on! If for any reason you really, really don't want to go through the other steps, at least do everybody else a favor and use a URL shortener so that they won't see a wall of base64-encoded image data in their messages. Several options are suggested above your template image outputs.
ℹ️ TIP: The links default to placing your template in the center of the canvas. If you provide a template link template in the Generate a template link section, its coordinates will be used instead.

Output template images, continued

When you're satisfied with your template image and how it looks on the canvas, you have two options:
A. Click/tap on the image to automatically upload it to imgur for anonymous hosting.
B. save the image to your device (right-click and save image, tap-and-hold and save image, etc.), and then upload it to another image host. This image host does not need to support anonymous CORS, but it is still recommended.


Generate a template link for a template image

This section can be used to take a hosted (template) image and turn it into a template link.

Optional step (template link...template)

If you just used the 'Turn pixel art into a dot/letter/hearts template image' section, clicked one of the links there, and positioned your image just right, you can copy the pxls.space URL from your browser's address bar and paste it here.
This will analyze the URL you pasted and re-use the same settings (other than the template image URL and opacity) such as the positon of your template image on the canvas, its size, and the current canvas view position and zoom.
This can be useful if you're updating an existing template image and just need that new image inserted into the URL.
interface image - template link template

Your input URL

When you have a template image hosted somewhere - either as the result of the built-in uploading functionality or perhaps after saving and uploading the results from previous section - enter its URL here.
Once provided, the image will be processed to check what its correct on-canvas size would be, as template images typically subdivide the original image's pixels into subpixels to create a specific template style.
Depending on the source of the image and the image's characteristics, its size is determined as follows:

Scale factor prompt

interface image - scale factor prompt If you do run into one of the latter situations, you will be prompted for the correct scale. Setting a scale factor here will display the calculated original dimensions.
If you set a scaling factor that does not appear to be correct, you will see a warning message. If you're absolutely positive that you're correct, you can ignore this warning message.

Link output

If all is well, your pxls.space output link will be displayed and ready for any final adjustments on the canvas or sharing.
By default your template image will be placed in the center of the canvas with your view centered on your template as well.
If you used the optional 'template link'-template, then positioning information will have been taken from that instead.


Further Configuration

The settings available in the Further Configuration section - accessed by clicking the 'further configuration' button - control some of the internal parameters of the template fiddle.
⚠️ NOTE: Most of these settings do not automatically update processed outputs. After changing, for example, palette colors you will have to re-run the 'pixel art' feature to actually see the result of this new palette.

Thumbnail size

Sets the width of thumbnail images in the template fiddle, unrelated to actual processing or output.

Canvas width/height

Sets the canvas width/height. These are used primarily in limited template output sizes and calculating the center of the canvas for link output.

Palette

Sets the canvas palette. These are used in both pixel art generation and the template styles. For pixel art generation, the colors determine what colors should be mapped to. For template styles, they rely on knowing the colors to determine which style to apply. For all but the 'custom' style, these are hard-coded.
Your colors should be set to match the pxls.space color palette if you want to use the template fiddle for its intended purpose.

Palette subset

Lets you quickly reduce the palette to a subset - for example only greyscale colors. This can be used to force color matching to pure grey colors for any greyscale image that may have color artifacts, for example.
The colors white, and dark grey/black, can be optionally excluded if you choose one of the colored presets.

The palette table

The palette table is divided into three rows, with a column per each palette color.

  1. Color values in hex are what are used internally for storing the colors. Changing a color value here will a automatically look up a matching name from XKCD's color naming survey and adjust the color swatch.
    The color values row is also the only row where you can add a color by entering a color value in the very last column, or removing a color by setting that color's value blank.
  2. Color names are what are used internally for storing the color names. Changing a color name to one of the color names that may appear when you type will actually select that color and adjust the color value as well. Entering a completely new color name will cause that color value's name to be renamed instead.
  3. Color swatches are provided to make color selection easier. Changing a color swatch will update the value as well as the name.
    On Firefox, this will happen in real time even as you are picking a color, while on other browsers you may have to close the color picking dialog for the change to show.

Clicking on any element in the palette table will cause the appropriate color to be 'selected' for the next feature.

Custom template output

The 'custom' template style lets you set up patterns for each individual color.
'Select' a color first by clicking on its column in the palette table.
Then you can adjust the template output grid to the style desired. A black square will cause a pixel to be drawn there, while a non-black square will be ignored in the output (set transparent).
The grid can be adjusted simply by clicking each cell, click-and-dragging (drawing mode), or with keyboard input using arrow keys or WASD and home/end/pageUp/pageDown to navigate and the space bar to toggle a cell's state.
The currently active cell is displayed with a thin highlighting border.

Background color

Specifies the color that is used as the background color on the canvas. This mainly affects build time estimates, as colors that match the background color do not necessarily need to be built.
On the 6th pxls.space canvas, a game mechanic was introduced where one can only place pixels adjacent to other pixels already placed, which may require you to place at least some of the pixels that match the background color after all.

Pixel art mask color when pasting

As mentioned in the 'Turn an image into pixel art' section, when pasting images from some sources you may lose transparency information.
This is not something that can be fixed, and it's best to work around it by first saving your image to e.g. a PNG with transparency intact and drag-and-dropping that instead.
However, it might fit in your work flow to use a mask color. This is similar to e.g. a green screen effect used in video and film, where the green color can be set transparent.
The default mask color is a strong pink color with value 255,64,128 / ff4080. By creating a new layer in your image editor with this color and setting it as the background layer, you can now copy/paste your image from the image editor and still get transparency even if otherwise it would not work correctly.

Glow opacity

Controls the opacity of the 'glow' effect in the 'glow' template style variants.

Don't apply template style to translucent colors

Some template authors use semi-transparent colors to indicate special features in their templates, such as borders and boundaries.
Those borders and boundaries should remain as clear pixels, rather than having the template style applied to them.
If you want all pixels to have the template style applied to them, even if they're semi-transparent, uncheck this option.

Settings storage

Changing the settings here will only change them for as long as you keep your browser tab open. The buttons here let you save settings to, and load/delete settings from your device.
Saved settings will automatically be loaded from storage when loading the template fiddle.
Because storage doesn't expire (unlike browser cookies), a button is offered to let you delete them from your device as well.

Saving settings saves not only the settings in this section, but also common processing settings such as the palette matching options and 'template link' template.

interface image - loading older settingsinterface image - loading newer settings When settings are loaded (when loading the fiddle or loading settings manually), a quick check is performed to make sure that the settings you saved are compatible with the version of the template fiddle you're using. A mismatch between them can result in either the settings not being loaded at all, or only being loaded if you force them to be loaded.

Raw settings

Intended primarily for development use, the template fiddle's raw internal settings can also be viewed and modified. Modifying the values does not make them go into effect immediately - you must save the settings and reload the template fiddle instead. Similarly, the settings displayed are a snapshot from when you open the raw settings. Changing any settings will not update this display - close and re-open the display instead.
Another use however is with sharing your settings - especially if you made a new 'custom' template style. Simply copy the settings and ask the other person to paste, save, and reload.
Note that if there's an error in the settings, a code-style error will be displayed. Fixing any problems with settings changes is well beyond the scope of this documentation.


MicroText Renderer

The MicroText renderer lets you render, or draw, pixel art text into an image. While many programs can be used to make small text, not all small text is drawn well at the very small sizes typically used on pixel canvases without a special font. These fonts, in turn, are often not optimized for legibility.

Font

example image - MicroText and 3by5 fonts The MicroText renderer offers two fonts, a variant of MicroText which was customized specifically for pixel canvases, and "3by5 - mini pixel font, not monospaced." by a1ber ( License: CC-BY-NC-ND 3.0 ), which is popular on pixel canvases as well.
Both fonts work well on pixel canvases, but MicroText in particular has anti-aliasing and kerning features, which often results in cleaner looking text in a smaller space. However, it is also a very small font which can make indvidual characters be diffcult to recognize.

Color

Both the color of the text as well as the color of the background can be adjusted to any custom color, or one of the pixel canvas palette color using the drop-downs.

Kerning

example image - MicroText kerning Kerning is the spacing between letters, especially when referred to as special adjustments to that spacing when certain letter combinations arise. For example, the letter P and the letter j, written next to each other, can often be put closer together without reducing legibility; in fact, without doing so the often look out of place.
The MicroText font allows for three kerning styles: Kerned, which applies these changes to spacing. Non-kerned, which treats each letter as if it was in its own small rectangle that can't overlap with neighoring rectangles, and Fixed-width, which treat each letter as if it was in its own rectangle that is as wide as the widest character in the font, similar to fixed-width text on old typewriters or dot matrix printers.

Letter / Line spacing

example image - letter spacingexample image - line spacing

The letter and line spacing values allow you to set (additional) spacing between letters and between lines if entering more than one line of text. Some text looks better when more spaced out overall, some other text on multiple lines may fit closely together without letters overlapping. After entering your text, play with these values to see what looks good.

Special characters

example image - manual kerning using special charactersexample image - manual text alignment The only characters supported by the MicroText renderer are:
!"#$%&'()*+,-./
0123456789
:;<=>?@
ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`
abcdefghijklmnopqrstuvwxyz{|}~

Special characters won't be drawn. Instead they will cause a single pixel width space to be inserted. This can be used to fine-tune alignment in multi-line text where regular spaces are too wide, or - combined with Non-kerned text and zero or even negative letter spacing - to manually kern text.

Process in 'pixel art' section

When you are satisfied with your resulting text, you can use the generated image as an input for the Turn an image into 'pixel art' section by pressing this button. That section can then be used to correct colors, rotate the text, etc.


Layer images

Intended largely for artists to combine their various projects, the image layering section can be used for any number of purposes - including generating a canvas-wide template.
⚠️ NOTE: Canvas-wide templates can't always be created correctly just from supplied templates alone. You may encounter projects that need to overlap another project in one area, but go under it in another area. Layers are fundamentally incompatible with such situations and would require 3 layers to be created.
When used for many projects across a canvas, consider the output as indicative of projects' overall locations, keep conflicts in mind, and always refer to the actual canvas state to determine which artists have allowed - voluntarily or otherwise - other projects to go over theirs.

The Layer images section works off of a javascript object that specifies each layer as its own sub-object. The details of each layer will be explained further down.

create layer from pxls.space link

While layers can be entered manually, more likely than not you will be using this button to automatically create the appropriate layer information for you.
Adjust the myLabel text to the label you want to give to the layer. This is mostly used for identification purposes. A common text may be "artistName / projectName".
Enter the pxls.space link in the adjacent field. This link should include the template link for the source image, as well as the ox and oy template coordinate values.
When you press the button, a new layer will be included at the top that has the image source and template coordinates already set.

combine layers

interface image - layers combined and processed Once you have added all the layers you want, you can press this button to actually combine all the layers together into a single image which is automatically set as the input for the Turn an image into 'pixel art' section, and processed.

highlight conflicts

example image - combined layers with conflicts highlighted When checked, any templates that overlap each other will have their overlapping areas be highlighted in the output image.

Combined layers special handling

interface image - layer label in zoom window When layers have been combined, hover over the resulting image to zoom in on the result. The zoom window will show the layer's name in the bottom left corner, making it easier to identify projects if there are many layers.
Additionally, if you then click while hovering over one of the projects of interest, that project's source image and template location will automatically be loaded into the appropriate sections of the pxls.space Template Fiddle.
This makes it easy to isolate a single project and re-process it, for example for a different template style.

Layer specification

Each layer object has the following possible information:

          "nerfarrow / Blue Lettuce": { // layer label/name
            "url": "http://i.imgur.com/ph2ftPc.png", // link to template image, must be 1:1 image - no template styles!
            "x": "10", // x coordinate of template
            "y": "-14", // y coordinate of template
            "added": "2018-03-20", // optional, to keep track of when the layer was added
            "background": "true", // optional, layer will be drawn behind other layers except other background layers
            "opacity": "0.5", // optional, opacity, layer will be drawn semi-transparent / invisible (0) without removing entirely
            "comment": "a comment", // optional, a comment, e.g. when manually reordering layers out of chronological order
          }
        
Any mistake in a layer object, or the top level object, will cause the layers not to be combined. Consult your browser console for details on where things may have gone wrong.
ℹ️ TIP: In order to get a 1:1 image, you can run a template image with a template style through the Turn an image into 'pixel art' section first - it will automatically be de-templatized.

π