It’s fair to say that providing a great developer experience is close to our
heart at Liveblocks. Documentation plays an essential part in that, so we’ve
decided to treat documentation as its own standalone product. From day one, the
docs was built as a custom solution to give us the flexibility and control we
needed to provide the world-class developer experience we always aimed for. This
approach is now starting to pay dividends.

Today, we’re thrilled to introduce [the brand new Liveblocks docs](/docs) which
includes new how-to guides and content, quickstart instructions, an interactive
tutorial, ⌘K search, and more!

<YouTube id="NSyEfyLoWXU" />

## Interactive tutorial

There are many ways to learn new technology. And for some people, following a
step-by-step tutorial is the preferred way. That’s why we’ve built a brand new
[interactive tutorial section](/docs/tutorial/react/getting-started/welcome) in
the docs where you can learn Liveblocks concepts without having to set up a
collection of tools on your machine.

<Figure>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/brand-new-docs/interactive-tutorial.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

The interactive tutorial is currently in beta, and we’ll be adding new content
and improving it as the community shares feedback with us.

## New how-to guides and content

We’ve introduced a new [guides section](/docs/guides) where you’ll find detailed
how-to guides for specific use cases and technologies. You can find guides by
using the search or through the filters.

<Figure>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/brand-new-docs/guides-homepage.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

We’ve also written dedicated concepts pages with illustration to explain
[why Liveblocks exists](/docs/concepts/why-liveblocks) and
[how it all works](/docs/concepts/how-liveblocks-works).

<Figure>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/brand-new-docs/how-liveblocks-works.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

## Quickstart instructions

As part of the new docs, we wanted to make it as easy as possible to get
started. To do so, we’ve removed our previous lengthy get started pages in favor
of new step-by-step quickstart instructions.

<Figure>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/brand-new-docs/get-started-svelte.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

You’ll find instructional pages for [Next.js](/docs/get-started/nextjs),
[React](/docs/get-started/react), [Svelte](/docs/get-started/svelte),
[Vue.js](/docs/get-started/vuejs), [SolidJS](/docs/get-started/solidjs),
[JavaScript](/docs/get-started/javascript),
[Zustand](/docs/get-started/zustand), and [Redux](/docs/get-started/redux).

## ⌘K search

From anywhere in the docs, you can start searching by hitting `⌘K` (or `Ctrl+K`
on Windows). The search dialog also references how-to guides, API Reference, and
all documentation pages.

<Figure>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/brand-new-docs/search-command-k.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

## Designed to work on any device

The new documentation was designed to work on any device and browser window to
keep you in flow. If you’d like to read our docs or try our interactive tutorial
while you’re on the go, you can. If you’d prefer to read a guide alongside your
code editor window, you can do that too!

<Figure>
  <video autoPlay loop muted playsInline>
    <source src="/images/blog/brand-new-docs/mobile.mp4" type="video/mp4" />
  </video>
</Figure>

## Contributions

As part of this project, we’ve made it even easier to contribute through
feedback and content. To share feedback with the developer experience team, hit
the 👍 or 👎 buttons at the bottom of any given page in the docs.

If you wish to contribute to the docs, feel free to hit the "Edit this page"
button or directly submit a pull request on
[the open-source repository](https://github.com/liveblocks/liveblocks).