Coder Social home page Coder Social logo

liveblocks / pixel-art-together Goto Github PK

View Code? Open in Web Editor NEW
199.0 4.0 14.0 16.28 MB

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

Home Page: https://pixelart.liveblocks.app

License: Apache License 2.0

JavaScript 0.55% Svelte 48.33% CSS 11.60% HTML 1.94% TypeScript 37.59%
art pixel-art collaboration multiplayer drawing svelte sveltekit tailwindcss shoelace-style liveblocks

pixel-art-together's Introduction

Pixel Art Together

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

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

Preview gif 2

Development

Pixel Art Together was built by Chris Nicholas. Technology used in this project includes: Svelte, SvelteKit, Liveblocks, TailwindCSS, Shoelace.style

Screenshot

Run locally

  • Install all dependencies with npm install

  • Create an account on liveblocks.io

  • Copy your secret key from the dashboard

  • 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

  • Create an account on liveblocks.io

  • Copy your secret key from the dashboard

  • Create a secret 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

pixel-art-together's People

Contributors

ctnicholas avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.