PXON

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

Features

• 🌲 Tree-shakable: Import only what you need
• 🔄 Multiple formats: ESM, CommonJS, and UMD bundles
• 📊 Type-safe: Full TypeScript support with type definitions
• 📱 Universal: Works in Node.js and browsers

Installation

npm install pxon

Usage

PXON supports multiple import styles to fit your needs:

ES Modules (Recommended)

import { PXON } from 'pxon';

const pxon = new PXON();

CommonJS

const { PXON } = require('pxon');

const pxon = new PXON();

Browser via CDN

<!-- Production (minified) -->
<script src="https://unpkg.com/pxon/dist/browser/pxon.min.js"></script>

<!-- Development (with helpful errors) -->
<script src="https://unpkg.com/pxon/dist/browser/pxon.js"></script>

<script>
  // The library is available as a global variable
  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
npm install

# Run development build with watch mode
npm run dev

# Run tests
npm test

# Build for production
npm run build

# Generate API documentation
npm run docs

# Serve API documentation locally
npm run docs:serve

Browser Compatibility

PXON is compatible with all modern browsers (Chrome, Firefox, Safari, Edge) and Node.js v22+. The library uses ES2020 features, so for older browser support, consider using a bundler with appropriate polyfills.

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.