liveblocks-live-piano-next-js

KO | EN

gitlite — search

#typescript #ai-agents #ai #dsh-plugin #deepseek-harness #open-source #cli #claude-code #codex #developer-tools #react #windows

liveblocks-live-piano-next-js

★ 69 Open GitHub ↗

Multiplayer live piano built with Next.js & Liveblocks.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# [Live Piano](https://livepiano.ctnicholas.dev)

This repo shows how to build a live piano with [Liveblocks](https://liveblocks.io) and [Next.js](https://nextjs.org/).

![Live piano screenshot](https://livepiano.ctnicholas.dev/screenshot.png)

## [Try it out](https://livepiano.ctnicholas.dev)

There are 10 different instruments to choose from. To play the piano, tap/click the keys on the screen or use your computer's keyboard.

![Live piano keyboard mapping](https://livepiano.ctnicholas.dev/screenshot-mapping.png)

## Getting started

### Run examples 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 `LIVEBLOCKS_SECRET_KEY=sk_test_yourkey`

### Run examples on CodeSandbox

- Open this repository on CodeSandbox with this [link](https://codesandbox.io/s/live-piano-with-liveblocks-and-next-js-pgkp5)

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

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

- Create [secret](https://codesandbox.io/docs/secrets) named `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!

## More

On my blog, [ctnicholas.dev](https://www.ctnicholas.dev/), I wrote an interactive article
about [using Liveblocks to add live cursors to your website](https://www.ctnicholas.dev/articles/live-cursors-with-liveblocks).

liveblocks-live-piano-next-js

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README