# jvalen/pixel-art-react

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/jvalen-pixel-art-react).**

5,849 stars · 330 forks · JavaScript · mit

## Links

- GitHub: https://github.com/jvalen/pixel-art-react
- Homepage: https://www.pixelartcss.com/
- awesome-repositories: https://awesome-repositories.com/repository/jvalen-pixel-art-react.md

## Topics

`animation` `css` `draw` `javascript` `pixel-art` `react` `redux`

## Description

Pixel Art React is a browser-based pixel art editor that runs entirely client-side with no server dependency. It provides a grid canvas for drawing and editing pixel art, along with a frame-based animation engine that cycles through multiple frames with configurable playback speed controls.

The editor distinguishes itself through its export capabilities, offering multi-format downloads as static images, animated GIFs, or sprite sheets. It also generates CSS code using box-shadow and keyframe techniques, allowing pixel art and animations to be embedded directly into web pages. Projects are persisted locally in the browser's storage, enabling session-free save and load without any backend infrastructure.

The application includes anonymous usage tracking that collects visit statistics through server logs and client-side page visibility events, avoiding cookies or personal identifiers. The rendering pipeline uses CSS box-shadow on a single DOM element rather than a grid of HTML elements, and exports by rendering grid data onto an off-screen canvas element.

## Tags

### Graphics & Multimedia

- [Grid Canvas Editors](https://awesome-repositories.com/f/graphics-multimedia/pixel-art-editors/grid-canvas-editors.md) — Provides a grid canvas for drawing and editing pixel art with tools for placing and removing individual pixels. ([source](https://cdn.jsdelivr.net/gh/jvalen/pixel-art-react@master/README.md))
- [Frame-Based Animation Engines](https://awesome-repositories.com/f/graphics-multimedia/image-editing-processing/image-processing/image-sequence-processors/animation-frame-sequencers/canvas-frame-animations/frame-based-animation-engines.md) — Provides a frame-based animation engine that cycles through pixel art frames with configurable playback speed.
- [Pixel Art Editors](https://awesome-repositories.com/f/graphics-multimedia/pixel-art-editors.md) — Draws pixel art on a grid canvas with tools for placing and removing individual pixels.
- [Animation Tools](https://awesome-repositories.com/f/graphics-multimedia/pixel-art-editors/animation-tools.md) — Provides a browser-based pixel art editor with frame-by-frame animation and configurable playback speed controls.
- [Pixel Art Animation Tools](https://awesome-repositories.com/f/graphics-multimedia/pixel-art-editors/pixel-art-animation-tools.md) — Animates pixel art by defining multiple frames and controlling playback speed. ([source](https://cdn.jsdelivr.net/gh/jvalen/pixel-art-react@master/README.md))
- [Multi-Format Asset Exports](https://awesome-repositories.com/f/graphics-multimedia/video-converters/multi-format-exporters/multi-format-asset-exports.md) — Downloads pixel art as static images, animated GIFs, or sprite sheets for diverse project use. ([source](https://cdn.jsdelivr.net/gh/jvalen/pixel-art-react@master/README.md))

### Part of an Awesome List

- [Sprite Sheet Generators](https://awesome-repositories.com/f/awesome-lists/media/pixel-art-and-sprite-tools/sprite-sheet-generators.md) — Exports pixel art as animated GIFs or sprite sheets for use in games and web projects.

### Data & Databases

- [Canvas Data Exports](https://awesome-repositories.com/f/data-databases/data-import-and-export/canvas-data-exports.md) — Exports pixel art by rendering grid data onto an off-screen canvas and converting to PNG, GIF, or sprite sheets.
- [Local Storage Persistence](https://awesome-repositories.com/f/data-databases/local-storage-persistence.md) — Saves pixel art projects in the browser's local storage so they persist across sessions without a server. ([source](https://www.pixelartcss.com/privacy-and-data))
- [Browser Storage Persistence](https://awesome-repositories.com/f/data-databases/state-persistence/browser-storage-persistence.md) — Persists project data as JSON blobs in the browser's localStorage API for session-free save and load.

### User Interface & Experience

- [Box-Shadow Renderers](https://awesome-repositories.com/f/user-interface-experience/pixel-art-css-toolkits/box-shadow-renderers.md) — Renders pixel art using CSS box-shadow on a single DOM element instead of a grid of HTML elements.
- [Pixel Art CSS Toolkits](https://awesome-repositories.com/f/user-interface-experience/pixel-art-css-toolkits.md) — Generates ready-to-use CSS code that renders pixel art via box-shadow and keyframes. ([source](https://cdn.jsdelivr.net/gh/jvalen/pixel-art-react@master/README.md))
- [CSS Code Generators](https://awesome-repositories.com/f/user-interface-experience/pixel-art-css-toolkits/css-code-generators.md) — Generates CSS code using box-shadow and keyframes to render pixel art and animations on web pages. ([source](https://www.pixelartcss.com/))

### Web Development

- [Browser-Based Drawing Applications](https://awesome-repositories.com/f/web-development/browser-based-drawing-applications.md) — Runs entirely in the browser as a drawing application with local storage persistence and no server dependency.