PXON

A TypeScript library for importing, creating, manipulating, and exporting PXON data.

Features

• Tree-shakable: Import only what you need
• Multiple formats: ESM and CommonJS bundles
• Type-safe: Full TypeScript support with type definitions
• Zero dependencies: No runtime dependencies

Installation

pnpm add pxon

Or with npm/yarn:

npm install pxon
yarn add pxon

Usage

ES Modules (Recommended)

import { PXON } from 'pxon'

const pxon = new PXON()

CommonJS

const { PXON } = require('pxon')

const pxon = new PXON()

Browser via CDN

<script type="module">
  import { PXON } from 'https://esm.sh/pxon'

  const pxon = new PXON()
</script>

Example Usage

import { PXON } from 'pxon'

const pxon = new PXON()

// Import PXON-formatted JSON.
pxon.import({
  exif: {
    artist: 'Matthew Hudson',
    software: 'https://make8bitart.com/',
  },
  pxif: {
    pixels: [],
  },
})

// Set some EXIF data.
pxon.artist = 'Matthew Hudson'
pxon.software = 'https://make8bitart.com/'

// Set a single pixel's value.
pxon.setPixel({ x: 0, y: 0, color: 'rgba(0, 0, 0, 1)', size: 1 })

// Get all pixels as an array
const allPixels = pxon.getAllPixels()

// Get a specific pixel
const pixel = pxon.getPixel(0, 0)

// Returns a PXON-formatted object.
console.log(pxon.export())

Full API Documentation →

Additional Resources

• PXON Specification - specs for the "pixel art object notation" format
• make8bitart.com - pixel art painting app
• pxonloop - a pxon playground
• image-to-pxon - app that converts image to pxon

Notes

• The non-canonical dataURL field is not currently supported.
• The non-canonical size field defaults to 1.

Development

# Install dependencies
pnpm install

# Run development build with watch mode
pnpm run dev

# Run tests
pnpm run test

# Run tests in watch mode
pnpm run test:watch

# Build for production
pnpm run build

# Lint and format check
pnpm run lint
pnpm run format:check

# Full validation (lint + format + typecheck + test)
pnpm run validate

Browser Compatibility

PXON is compatible with all modern browsers and Node.js v22+. The library targets ES2022.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes using Conventional Commits format
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the ISC License - see the LICENSE file for details.