https://github.com/matthewhudson/pxon
👾 A JavaScript module for importing, creating, manipulating, and exporting PXON schema.
https://github.com/matthewhudson/pxon
javascript npm-module pixel pixel-art pixels pxon
Last synced: 3 months ago
JSON representation
👾 A JavaScript module for importing, creating, manipulating, and exporting PXON schema.
- Host: GitHub
- URL: https://github.com/matthewhudson/pxon
- Owner: matthewhudson
- Created: 2018-03-26T21:59:55.000Z (about 8 years ago)
- Default Branch: main
- Last Pushed: 2025-05-31T22:07:41.000Z (about 1 year ago)
- Last Synced: 2025-10-13T13:08:14.975Z (8 months ago)
- Topics: javascript, npm-module, pixel, pixel-art, pixels, pxon
- Language: TypeScript
- Homepage: https://matthewhudson.github.io/pxon/
- Size: 715 KB
- Stars: 26
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# PXON
> A TypeScript library for importing, creating, manipulating, and exporting PXON data.
[](https://badge.fury.io/js/pxon)
[](https://github.com/matthewhudson/pxon/actions/workflows/main.yml)
[](https://codecov.io/github/matthewhudson/pxon)
## 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
```sh
pnpm add pxon
```
Or with npm/yarn:
```sh
npm install pxon
yarn add pxon
```
## Usage
### ES Modules (Recommended)
```ts
import { PXON } from 'pxon'
const pxon = new PXON()
```
### CommonJS
```js
const { PXON } = require('pxon')
const pxon = new PXON()
```
### Browser via CDN
```html
import { PXON } from 'https://esm.sh/pxon'
const pxon = new PXON()
```
## Example Usage
```ts
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 →](https://matthewhudson.github.io/pxon/)
## Additional Resources
- [PXON Specification](http://jennmoney.biz/pxon/) - specs for the "pixel art object notation" format
- [make8bitart.com](https://make8bitart.com/) - pixel art painting app
- [pxonloop](http://pxonloop.glitch.me/) - a pxon playground
- [image-to-pxon](http://image-to-pxon.glitch.me/) - 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
```sh
# 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](https://www.conventionalcommits.org/) 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](LICENSE) file for details.