Skip to main content

Create pixel art programmatically — PNG + HTML/CSS export, browser-based editor.

Project description

pixelart-py

A simple, expressive Python library for creating pixel art programmatically — with PNG export, HTML/CSS export, and a browser-based hand-drawing editor that generates Python code.


Installation

pip install pixelart-py

Or locally:

git clone https://github.com/yourname/pixelart-py
cd pixelart-py
pip install -e .

Quick Start

from pixelart_py import Canvas

canvas = Canvas(16, 16, pixel_size=20)
canvas.fill("#1a1a2e")
canvas.draw_circle(8, 8, 6, "#e63946", filled=True)
canvas.save("art.png")

Features

  • Canvas — configurable grid size and pixel scale
  • Drawing primitivesdraw_rect, draw_line, draw_circle, flood_fill
  • Palette — define and reuse named colors
  • PNG export — pixel-perfect output via Pillow
  • HTML/CSS export — three styles: grid, table, custom-properties
  • to_code() — convert any canvas back to Python source code
  • Browser editor — draw by hand, get Python code automatically

Project Structure

pixelart-py/
├── pixelart_py/
│   ├── __init__.py      ← Public API
│   ├── canvas.py        ← Canvas class
│   ├── palette.py       ← Palette + color parsing
│   ├── drawing.py       ← Drawing primitives
│   ├── exporter.py      ← PNG + HTML/CSS + code generation
│   └── editor.py        ← Browser-based hand-drawing editor
├── examples/
│   ├── heart.py
│   ├── showcase.py
├── output/
├── pyproject.toml
└── README.md

API Reference

Canvas

canvas = Canvas(width, height, pixel_size=1, background=None)

Pixel manipulation

canvas.set_pixel(x, y, color)    # Set a pixel
canvas.get_pixel(x, y)           # Returns (r, g, b, a)
canvas.fill(color)               # Fill entire canvas
canvas.flood_fill(x, y, color)   # Flood fill from (x, y)
canvas.clear()                   # Reset to transparent

Drawing

canvas.draw_rect(x, y, w, h, color, filled=True)
canvas.draw_line(x1, y1, x2, y2, color)
canvas.draw_circle(cx, cy, radius, color, filled=False)

Export

canvas.save("output.png")
canvas.save_html("output.html", style="grid")       # CSS Grid
canvas.save_html("output.html", style="table")      # HTML table
canvas.save_html("output.html", style="custom-properties")  # CSS vars
html_str = canvas.to_html(style="grid")
code_str = canvas.to_code()                         # Python source
img = canvas.to_image()                             # PIL.Image

Utilities

copy = canvas.copy()
canvas.paste(other_canvas, x, y)
canvas.preview()   # opens image viewer

Palette

from pixelart_py import Palette

palette = Palette({
    "sky":    "#87ceeb",
    "ground": "#4a7c3f",
})

canvas.fill(palette["sky"])

Built-in palettes: CLASSIC, PASTEL, EARTHY

from pixelart_py import PASTEL
canvas.draw_rect(0, 0, 8, 8, PASTEL["mint"])

Color formats

All color arguments accept:

Format Example
6-digit hex "#ff0000"
3-digit hex "#f00"
8-digit hex "#ff0000ff"
RGB tuple (255, 0, 0)
RGBA tuple (255, 0, 0, 128)

Hand-drawing editor

from pixelart_py.editor import open_editor

canvas = open_editor(width=16, height=16, pixel_size=24)
# A browser window opens — draw your art, click "Save & Get Code"
# The function returns the canvas and prints Python code to the terminal

canvas.save("my_drawing.png")
print(canvas.to_code())

Editor features:

  • ✏️ Draw, 🧹 Erase, 🪣 Fill, 💉 Eyedrop tools
  • Keyboard shortcuts: D draw, E erase, F fill, I eyedrop, Ctrl+Z undo
  • Color picker + 15-color quick palette
  • Grid overlay toggle
  • Zoom in/out
  • On save: returns canvas + prints Python code

HTML/CSS Export Styles

"grid" — CSS Grid (recommended)

<div class="pixel-grid">
  <div class="p" style="background:#1a1a2e"></div>
  ...
</div>

"table" — HTML Table (max browser compatibility)

<table class="pixel-table">
  <tr><td style="background:#1a1a2e"></td>...</tr>
</table>

"custom-properties" — CSS Variables (easy to re-theme)

:root {
  --c0: #1a1a2e;
  --c1: #e63946;
}

Lets you change the entire color scheme by editing just the CSS variables.


Publishing to PyPI

pip install build twine
python -m build
twine upload dist/*

License

MIT

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

pixelart_py-2.0.1.tar.gz (20.3 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

pixelart_py-2.0.1-py3-none-any.whl (20.6 kB view details)

Uploaded Python 3

File details

Details for the file pixelart_py-2.0.1.tar.gz.

File metadata

  • Download URL: pixelart_py-2.0.1.tar.gz
  • Upload date:
  • Size: 20.3 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/6.2.0 CPython/3.12.4

File hashes

Hashes for pixelart_py-2.0.1.tar.gz
Algorithm Hash digest
SHA256 4af177d7cff406ad07b592b5561783da1f1f7139dceb14acaedb29789a03bc10
MD5 438103a4ea038e08301c4a3fb36f4b67
BLAKE2b-256 fea6bee3346c8fca87f146690ceb3d5c62b8ee5dbbeb9c8e79d803b2135b0123

See more details on using hashes here.

File details

Details for the file pixelart_py-2.0.1-py3-none-any.whl.

File metadata

  • Download URL: pixelart_py-2.0.1-py3-none-any.whl
  • Upload date:
  • Size: 20.6 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/6.2.0 CPython/3.12.4

File hashes

Hashes for pixelart_py-2.0.1-py3-none-any.whl
Algorithm Hash digest
SHA256 ac4a6d059bb8e59c104ecfc4b99a98efccee979f9b762bacf5d4850bf573655c
MD5 b1793491db0aba17e16287a1102e814c
BLAKE2b-256 f8d321229bd9e670dfaeff4601cfa685c3602e40302b8b237c7b299df6bca988

See more details on using hashes here.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Depot Continuous Integration Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page