Inputism

Turn images into checkbox mosaics.

The next big tiny art movement. Make something worth checking out.

<script type="module" src="https://esm.sh/inputism/element"></script>
<inputism-image src="cat.jpg" density="32" mark="checked"></inputism-image>

Copy

Examples

A small set of examples using the web component.

Density 32

<inputism-image src="cat.jpg" density="32" mark="checked"></inputism-image>
<inputism-image src="cat.jpg" density="32" mark="indeterminate"></inputism-image>
<inputism-image src="cat.jpg" density="32" mark="background"></inputism-image>

Copy

Original

A ginger cat resting on blue bedding by a window

Checked

Indeterminate

Background

Cross-origin source

This example uses an external image with anonymous CORS enabled.

<inputism-image
  crossorigin="anonymous"
  src="https://images.pexels.com/photos/34574310/pexels-photo-34574310.jpeg"
  density="32"
  mark="checked"
></inputism-image>

Copy

Original

Checked

Indeterminate

Background

Encoded image source

Pass an encoded image data URL directly through src or assign it from JavaScript.

<!-- The full base64 value is shortened here. -->
<inputism-image
  src="data:image/jpeg;base64,BASE64_IMAGE_DATA"
  density="32"
  mark="checked"
></inputism-image>

Copy

// The encoded image can also be assigned from JavaScript.
const encodedImage = "data:image/jpeg;base64,BASE64_IMAGE_DATA";
const element = document.querySelector("inputism-image");
element?.setAttribute("src", encodedImage);

Copy

Original

Accessible label

The component applies role="img" to its internal grid. Use label like an alt value to name that image.

<inputism-image
  src="cat2.jpg"
  density="32"
  mark="checked"
  label="A tabby cat lying on a patterned rug"
></inputism-image>

Copy

Labeled image

Lazy loading

Add loading="lazy" to wait until the component approaches the viewport before decoding its source.

<inputism-image
  src="cat4.jpg"
  loading="lazy"
  density="32"
  mark="checked"
></inputism-image>

Copy

Lazy image

Raw HTML export

Render the grid as ordinary HTML with styles embedded directly in the generated elements.

import { createInputismImageFromUrl } from "inputism/source";
import { renderInputismHtml } from "inputism/html";

const image = await createInputismImageFromUrl("cat.jpg", {
  density: 32,
});
const container = document.querySelector(".raw-html-output");

if (container) {
  renderInputismHtml(container, image, {
    mark: "checked",
    inlineStyles: true,
  });
}

Copy

Generated HTML

Error handling

Listen for inputism-error and decide how your application presents it.

const image = document.querySelector("inputism-image");

image?.addEventListener("inputism-error", (event) => {
  const error = (event as CustomEvent<unknown>).detail;
  console.error("Inputism could not load the image", error);
});

Copy

Live example

Waiting for the component to emit inputism-error…

Install

Add Inputism to a TypeScript project.

npm install inputism

Copy

pnpm add inputism

Copy

yarn add inputism

Copy

API

Sources provide pixels, the core creates the image model, and renderers display it.

inputism/element registers the preferred <inputism-image> web component.

createInputismImage(rgbaImage, options) creates a complete image model.

createInputismImageFromUrl(source, options) loads a browser image source and creates the model.

createInputismLayout(width, height, options) creates the stable cell layout.

createInputismColors(rgbaImage, layout) samples RGB colors for that layout.

renderInputismHtml(container, image, options) creates raw HTML, with optional inline styles.