With Liveblocks 1.4, we’ve enabled support for [Liveblocks Yjs](/yjs) in our
DevTools browser extension. For the first time, you can now inspect different
parts of your Yjs app live in the browser, as you build. You can:

- [View the document’s content](#view-the-documents-content)
- [Read awareness data](#read-awareness-data)
- [Inspect document changes](#inspect-document-changes)

<Figure>
  <figcaption className="sr-only">Viewing Yjs DevTools features</figcaption>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/whats-new-in-v1-4/yjs-devtools.webm"
      type="video/webm"
    />
    <source
      src="/images/blog/whats-new-in-v1-4/yjs-devtools.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

### Other improvements [#other-improvements]

We’ve also made some other improvements:

- [New DevTools panel for observing events](#observing-events).
- The sender’s `user` object is now available when
  [events are received](/docs/api-reference/liveblocks-client#Room.subscribe.event).
- [@liveblocks/node](/docs/api-reference/liveblocks-node) now supports edge
  environments.

## Upgrade now [#upgrade-now]

Start using our updated DevTools with Liveblocks 1.4 now:

1. [Download the updated extension](https://liveblocks.io/devtools) for your
   chosen browser.
2. Update each Liveblocks package in your project to the `@latest` version.

```bash
 npm install @liveblocks/client@latest @liveblocks/react@latest @liveblocks/yjs@latest liveblocks/node@latest
```

If you use any other Liveblocks packages, make sure to include those too.

## View the document’s content [#view-the-documents-content]

If you select the Yjs tab in the DevTools, you’ll find the default is the
_Document_ view. In here, you can view the entire Yjs document in JSON form.

<Figure>
  <figcaption className="sr-only">
    Viewing the entire Yjs document in the DevTools
  </figcaption>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/whats-new-in-v1-4/yjs-document.webm"
      type="video/webm"
    />
    <source
      src="/images/blog/whats-new-in-v1-4/yjs-document.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

Each editor stores data in a different form, though you’ll find it’s often XML
data within JSON properties.

## Read awareness data [#read-awareness-data]

The second view available is _Awareness_. This provides insight into each user’s
[Yjs awareness](https://docs.yjs.dev/api/about-awareness) information; temporary
data that’s shared whilst clients are connected.

<Figure>
  <figcaption className="sr-only">
    Viewing Yjs awareness in the DevTools
  </figcaption>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/whats-new-in-v1-4/yjs-awareness.webm"
      type="video/webm"
    />
    <source
      src="/images/blog/whats-new-in-v1-4/yjs-awareness.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

Awareness is often used in Yjs applications to store cursor locations in text
documents, along with other user information.

## Inspect document changes [#inspect-document-changes]

In the final view, _Changes_, you’ll notice that it’s now possible to view a
live list of updates to the current Yjs document, such as additions and
deletions.

<Figure>
  <figcaption className="sr-only">
    Viewing the changes list in the Yjs DevTools
  </figcaption>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/whats-new-in-v1-4/yjs-changes-list.webm"
      type="video/webm"
    />
    <source
      src="/images/blog/whats-new-in-v1-4/yjs-changes-list.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

The DevTools also provide a flowchart diagram, helping you understand which user
made each change, and how they relate to each other.

<Figure>
  <figcaption className="sr-only">
    Viewing the changes diagram in the Yjs DevTools
  </figcaption>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/whats-new-in-v1-4/yjs-changes-diagram.webm"
      type="video/webm"
    />
    <source
      src="/images/blog/whats-new-in-v1-4/yjs-changes-diagram.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

## Observing events [#observing-events]

In addition to the Yjs changes, you can now see a log of events sent with
[Liveblocks Broadcast](/broadcast) since connecting to the room.

<Figure>
  <figcaption className="sr-only">Observing events in the DevTools</figcaption>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/whats-new-in-v1-4/devtools-events.webm"
      type="video/webm"
    />
    <source
      src="/images/blog/whats-new-in-v1-4/devtools-events.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

Events are often used for triggering realtime actions in other clients, for
example requesting others revalidate their API data, sending realtime toast
notifications, or broadcasting play/pause commands in a media app.

## Get started with Yjs

If you’d like to get started with Liveblocks Yjs, make sure to read our guides.

- [Get started with a text editor](/docs/get-started/text-editor)
- [Get started with a code editor](/docs/get-started/code-editor)
- [Assorted Yjs guides](/docs/guides?technologies=yjs)

Remember to [upgrade your packages](#upgrade-now) to start using the DevTools!