Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/liveblocks/pixel-art-together

Pixel Art Together is a multiplayer pixel art editor powered by Liveblocks.
https://github.com/liveblocks/pixel-art-together

art collaboration drawing liveblocks multiplayer pixel-art shoelace-style svelte sveltekit tailwindcss

Last synced: 1 day ago
JSON representation

Pixel Art Together is a multiplayer pixel art editor powered by Liveblocks.

Awesome Lists containing this project

README

        

# [Pixel Art Together](https://pixelart.liveblocks.app)

[![Pixel Art Together](https://pixelart.liveblocks.app/og-image.png)](https://pixelart.liveblocks.app)

[Pixel Art Together](https://pixelart.liveblocks.app) is a free multiplayer pixel art editor powered by [Liveblocks](https://liveblocks.io).

## Features

✏ Use different drawing tools

👩‍🎨 Up to 20 players at once

🗃 Draw on different layers

🎨 Use opacity & blend modes

↪ Undo/redo any mistakes

💾 Export your art as svg or png files

...and more!

![Preview gif 1](https://pixelart.liveblocks.app/preview-gif-1.gif)

![Preview gif 2](https://pixelart.liveblocks.app/preview-gif-2.gif)

## Development
Pixel Art Together was built by [Chris Nicholas](https://twitter.com/ctnicholasdev). Technology used in this project includes: Svelte, SvelteKit, Liveblocks, TailwindCSS, Shoelace.style

![Screenshot](https://pixelart.liveblocks.app/screenshot.png)

### Run locally

- Install all dependencies with `npm install`

- Create an account on [liveblocks.io](https://liveblocks.io/dashboard)

- Copy your secret key from the [dashboard](https://liveblocks.io/dashboard/apikeys)

- Create a file named `.env.local` and add your Liveblocks secret as environment variable `VITE_LIVEBLOCKS_SECRET_KEY=sk_test_yourkey`

### Run on CodeSandbox

- Open this repository on CodeSandbox with this [link](https://codesandbox.io/s/github/liveblocks/pixel-art-together)

- Create an account on [liveblocks.io](https://liveblocks.io/dashboard)

- Copy your secret key from the [dashboard](https://liveblocks.io/dashboard/apikeys)

- Create a [secret](https://codesandbox.io/docs/secrets) named `VITE_LIVEBLOCKS_SECRET_KEY` with the secret key you just copied. You need to create an account on CodeSandbox to add an environment variable.

- Refresh your browser, and you should be good to go!


![Powered by Liveblocks](https://pixelart.liveblocks.app/poweredbyliveblocks.svg)