You don’t have to start from scratch to innovate; one thing builds on another to
become something new, something better. When you improve on what already exists,
you’re following in the footsteps of Isaac Newton by
[standing on the shoulders of giants](https://en.wikipedia.org/wiki/Standing_on_the_shoulders_of_giants).

So, builder, we want you to know how easy it is to innovate with Liveblocks –
and we’d love to see what you create. That’s why we had our first examples week
last week, where we announced something new every day of the week:

- [Day 1: Liveblocks showcase](#day-1)
- [Day 2: Open-source examples gallery](#day-2)
- [Day 3: Advanced avatars and cursors](#day-3)
- [Day 4: Collaborative block text editor](#day-4)
- [Day 5: Multiplayer spreadsheet](#day-5)

# Day 1: Liveblocks showcase [#day-1]

<Figure>
  <figcaption className="sr-only">Liveblocks showcase teaser video</figcaption>
  <video loop controls playsInline>
    <source
      src="/images/blog/examples-week-aug-2022/day-1-showcase.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

We designed
[a page to showcase our favorite collaborative experiences](/showcase) people
have built with Liveblocks. If you’d like to be featured, use the
[#MadeWithLiveblocks](https://twitter.com/hashtag/MadeWithLiveblocks) hashtag on
Twitter and we’ll promote your awesome creations.

Let’s look at some of our favorite experiences highlighted in this gallery.

## Pixel Art Together

<YouTube id="CIxyhOKBsoI" />

[Pixel Art Together](https://pixelart.liveblocks.app/) brings people together
from anywhere in the world to paint one or many pixels at a time. Say your
cousin lives two blocks away and he’s not a big talker, but he sure knows a
pixel when he sees it. Or your niece lives continents away and she’s got all the
point and click skills a kid could want. As long as there’s computing going on,
the options are endless.

The app offers a palette of colors, the ability to fill shapes, erase, toggle
grid, toggle move, add new layers of work, and undo/redo. It all starts when you
create a multiplayer room and share it using a unique link. And who knows? If
you’re lucky, your creation may end up in the Pompidou Modern Art Gallery!

## Wordle Wars

<Figure>
  <figcaption className="sr-only">Wordle wars</figcaption>
  <video loop controls playsInline autoPlay>
    <source
      src="/images/blog/examples-week-aug-2022/wordle-wars-demo.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

[Wordle Wars](https://wordlewars.ctnicholas.dev/) can be played by two or more
users. One user creates a game then shares it so everyone can play at the same
time. Just like the Wordle you know, you attempt to guess a proper 5-letter
word, but in addition to figuring out the word, you are also trying to beat
(all) of your opponents. The tiles change color after each guess to illustrate
whether you’re on the mark. May the best Wordle win!

## Live Piano

<Figure>
  <figcaption className="sr-only">Live piano</figcaption>
  <video loop controls playsInline>
    <source
      src="/images/blog/examples-week-aug-2022/live-piano-demo.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

As TikTok has shown us, even if we’re not in the same room, we can still play
music together. But unlike TikTok, with this
[online multiplayer experience](https://livepiano.ctnicholas.dev) you can play
piano together at the same time. Listen to the piano speak in its native tongue,
all based on keystrokes. Not a piano you’re looking for? Well, hurrah! Just
check out the dropdown menu to select from a whole range of instruments.

# Day 2: Open-source examples gallery [#day-2]

[Our brand new examples gallery](/examples) showcases a list of free tools you
can use to start your own project. Each example comes with all the relevant
info, including a demo and code comparison. Filter by technology (like Vue,
Next.js, and React), or by category (such as productivity, whiteboard, etc.) to
find the example that speaks to you.

<Figure>
  <figcaption className="sr-only">
    Liveblocks open-source examples gallery
  </figcaption>
  <video loop controls playsInline autoPlay>
    <source
      src="/images/blog/examples-week-aug-2022/day-2-examples-gallery.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

When you dive into the details, you’ll see that with any example, you can
simultaneously play with the product and observe the multiplayer experience in
two different iframes, one for each user. As you play with the tool, you can
easily compare the code to its output. Along with these features, we’ve included
a brief guide to help you configure the example and get Liveblocks working on
your computer.

All of our examples are available on
[GitHub](https://github.com/liveblocks/liveblocks), so feel free to have a look
there too!

# Day 3: Advanced avatars and cursors [#day-3]

<Figure>
  <figcaption className="sr-only">Advanced avatars and cursors</figcaption>
  <video loop controls playsInline autoPlay>
    <source
      src="/images/blog/examples-week-aug-2022/day-3-cursors-avatars.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

Multiplayer programs depend on [avatars](/examples/live-avatar-stack-advanced) —
Are you online? Are you idle? These are the questions avatars can answer. This
presence component, which includes a new spring-animated avatar stack is simple
to incorporate into your Liveblocks-based multiplayer apps with a reusable
`Avatar` component. Springs enable a much smoother animation, and there’s also
are a number of avatar variants on offer, to help you build the perfect design:
gradient, text, and picture.

[Cursors](/examples/live-cursors-advanced), as we all know, can be used to track
users’ movements along with their states, such as “edit” or “suggestion” in a
multiplayer application such as Google docs. But in fact, cursors go much deeper
than that, answering life’s questions, like “Where am I on the screen? Where is
everyone else? What, pray tell, might they be up to?”. Our advanced cursors bear
the user’s name. And just like the avatars it also contains a spring-animated
reusable `LiveCursors` component to accurately display people’s cursors in
realtime.

# Day 4: Collaborative block text editor [#day-4]

<Figure>
  <figcaption className="sr-only">Collaborative block text editor</figcaption>
  <video loop controls playsInline autoPlay>
    <source
      src="/images/blog/examples-week-aug-2022/day-4-collaborative-block-text-editor.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

Introducing our
[open-source collaborative block text editor](/examples/block-text-editor-advanced)!
Interested in building a multiplayer note-based app? We’ve built the foundations
to make your project a reality. Add multiple types of blocks, and see them
shared in realtime.

Along with text elements, we’ve got a number of more complex blocks & embeds
that are ready to go:

- To-do list
- Image
- YouTube
- CodeSandbox
- Figma

Our collaborative block text editor is powered by
[Slate](http://slatejs.org)—adding a new block is as simple as creating a new
Slate Custom Element. We’ve written the code to automatically sync Slate’s state
to Liveblocks.

_Want to try an unparalleled block-based text editor experience?
[Try Clover](http://cloverapp.com) and their fancy daily notes feature, you’ll
get a chance to witness how they used Liveblocks to power their multiplayer
experience._

# Day 5: Multiplayer spreadsheet [#day-5]

<Figure>
  <figcaption className="sr-only">Multiplayer spreadsheet</figcaption>
  <video loop controls playsInline autoPlay>
    <source
      src="/images/blog/examples-week-aug-2022/day-5-multiplayer-spreadsheet.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

Real-time spreadsheets are here! Kick-start your app with our
[open-source collaborative spreadsheet](/examples/collaborative-spreadsheet-advanced)—see
others’ presence as they update cells, columns, and rows live.

Cell references in formulae are automatically resolved as you move rows &
columns around, avoiding any conflicts. Our spreadsheet allows you to:

- Place formulae in cells
- Create different cell types
- Drag and resize rows/columns
- Undo/redo multiplayer changes
- and more!

And of course, feel free to make it your own—it’s easy to add more features
using our multiplayer APIs.

# Get building with Liveblocks

Now that you have the tools and the examples of what Liveblocks can do, what
will you create? Ideate, design, build, and show us with the
[#MadeWithLiveblocks](https://twitter.com/hashtag/MadeWithLiveblocks) hashtag.