nittygrid Docs
llms.txt llms-full.txt Open nittygrid →
Start Here
Raw .md

Welcome to nittygrid

Design, preview, and export LED matrix animations on standard pixel grids or custom SVG layouts—with optional background image alignment, AI generation, and offline exports.

nittygrid is a browser tool for making animations for LED displays. You describe what you want (or draw it), see it play on a preview of your display, and export it for your hardware or as a video.

An LED matrix is simply a display made of many small lights (LEDs) in a grid, like a tiny screen. Yours can be a plain rectangle (for example 16×16 lights) or any custom shape, like a car light bar, drawn as an SVG file.

How it works

  1. Set up your display

    Pick a grid size (such as 16×16) or upload an SVG where each shape is one LED. You can also import a photo of your product and place the LEDs on top of it, so the preview looks like the real thing.

  2. Create an animation

    Each animation is a block on the canvas called an animation node. Make one by asking the AI, picking a built-in effect, writing a little JavaScript, painting pixels, drawing a path, or mapping a video.

  3. Connect and export

    Wire your nodes from Start to End to set the playback order. Then export a .ngrender.zip for LED controllers or an .mp4 video for presentations.

Where to go next

File & Export Formats →What gets saved where, and which file to use for what.SVG Matrices & Layouts →How to prepare an SVG for a custom-shaped display.Animations & render_code →How animations work, and the full JavaScript API.Main Product Tools →A tour of every tool in the studio.

Four ideas to remember

  • Recipe vs. frames. Inside a project, an animation is stored as a small recipe (settings or code), so you can always tweak it. Only when you export does it become a fixed list of colors per frame.
  • Position vs. playback. Where a node sits on the canvas is just for your own tidiness. Playback follows the wires from Start to End.
  • One coordinate system. Every animation draws on a simple grid starting at the top-left (0, 0). Custom SVG layouts are converted to this once, so effects work on any display shape.
  • Built to last. A .ngrender.zip contains plain JSON, the exact layout.svg, schemas, and a written spec. You can read it decades from now without nittygrid.

For AI agents and scripts

Every page here is plain Markdown, with tables generated from the app itself, so the details always match the app.

  • /docs/llms.txt — short index of all pages with raw .md links.
  • /docs/llms-full.txt — all pages in one plain-text file, including every table and the render_code API.
  • Raw Markdown per page: add .md to any URL (for example /docs/formats.md), or use Copy Markdown at the top of a page.