Chris Nicholas

Chris Nicholas

@chrisnicholas.dev

Developer experience @liveblocks.io • Interactive articles on chrisnicholas.dev

284 followers294 following561 posts

It also supports multiple workspaces, statuses, and live presence. Feeds is really interesting, you can put any realtime paginated state in there, such as messages, activity data, emoji reactions, and it syncs automatically.

Chris Nicholas reposted

I've been working on a fun little Mac app: Viewdown, a Markdown viewer. It's now ready to ship 📖 It live-reloads on every save and jumps straight to what changed. Optimized for the best and fastest reading experience. Give it a try and let me know if you like it! 🙏 viewdown.app

viewdown.appViewdown — Markdown viewer for Mac, with live previewViewdown is a fast, beautiful Markdown viewer for Mac. Open any .md file and see it rendered, updating live as you edit it in the editor you already use.

I've built an open-source coding agent tool! Jev classifies every message—the chats are multiplayer, and humans can talk normally, but if Jev recognises a coding request or question, it hops in and triggers the correct agent. Get it + info ↓

View full thread

There's some other features too! Add skills by putting markdown files into the /skills folder. Plus, if you're not in the chat, you get a notification when an agent has finished coding.

I've built an open-source coding agent tool! Jev classifies every message—the chats are multiplayer, and humans can talk normally, but if Jev recognises a coding request or question, it hops in and triggers the correct agent. Get it + info ↓

It's not just for coding, you can also generate markdown documents together! Plus, after the agent's created a file, you can hop in and edit it in real-time with others. The multiplayer chat and editor are both powered by @liveblocks.io!

Agents use Cursors's fantastic APIs to make changes to your repo. They spin up a virtual environment and can create PRs for you, very simple. And the diff in the sidebar uses diffs.com to show the code changes!

I've built an open-source workflow builder for Jev! Experiment with a UI—classify inputs using choices, scores, booleans; wire results into other prompts; and return a set of custom outputs. Below I've set up a support system that can help with various queries. Features ↓

View full thread

I've built an open-source workflow builder for Jev! Experiment with a UI—classify inputs using choices, scores, booleans; wire results into other prompts; and return a set of custom outputs. Below I've set up a support system that can help with various queries. Features ↓

I love that Jev can fit into basically any app. You don't need to build everything around a chat, you can just integrate intelligent features into the background, like these auto-fill buttons. Much better UX than with slow LLMs. Feels like the missing piece!

Jev enables instant AI suggestions 👏 In this app, 20+ intelligent checks occur every time you edit a cell, immediately providing warnings. No LLMs necessary!

View full thread

Jev enables instant AI suggestions 👏 In this app, 20+ intelligent checks occur every time you edit a cell, immediately providing warnings. No LLMs necessary!

Combine it with an LLM and you can use it to diagnose issues, come up with solutions, and create "Fix it" buttons. This way you can avoid running your expensive model on every change.

We shipped a Yjs alternative for collaborative text editing! LiveText is a new data type for @liveblocks.io. It's quicker, simpler, and smaller than a CRDT, and integrates into four popular text editors. And there's more ↓

View full thread

And unlike Yjs, there are no tombstones, so documents never grow over time. A doc edited daily for years loads as fast as one written yesterday. Your text is plain, readable data too, with no binary types to handle.

We shipped a Yjs alternative for collaborative text editing! LiveText is a new data type for @liveblocks.io. It's quicker, simpler, and smaller than a CRDT, and integrates into four popular text editors. And there's more ↓

View full thread

Because LiveText is a conflict-free type like LiveObject and LiveList, you can use it directly in your Storage tree too. You can create a whole multiplayer data tree, and nest your LiveText content fields inside it.

You can even edit text from the server, so your AI agents can write into documents in realtime. Use `mutateStorage` in Node.js, or JSON Patch operations via REST API.

We shipped a Yjs alternative for collaborative text editing! LiveText is a new data type for @liveblocks.io. It's quicker, simpler, and smaller than a CRDT, and integrates into four popular text editors. And there's more ↓

Tiptap, BlockNote, ProseMirror, and CodeMirror are supported at launch, and more may come later. Each editor just needs a simple extension to add collaboration, like Tiptap below, and you can even render multiple documents in the same room.

Liveblocks Sync is the sync engine designed for the agentic web. Add conflict-resolved multiplayer to any React app, so that humans and agents can edit the same state, at the same time. lblcks.io/sync Here's how it works ↓

View full thread

Liveblocks Sync is the sync engine designed for the agentic web. Add conflict-resolved multiplayer to any React app, so that humans and agents can edit the same state, at the same time. lblcks.io/sync Here's how it works ↓

View full thread

Permissions are built in, allowing you to control which users, and groups of users, should have access to the document. Use REST APIs to create share dialogs like you'd find in Notion or Google Docs.

And speaking of Google Docs, you can enable real-time text editing too. There's two ways to do this, Yjs, and LiveText, both with their advantages. In a few lines of code, add it to your editor, such as Tiptap or BlockNote.

Liveblocks Sync is the sync engine designed for the agentic web. Add conflict-resolved multiplayer to any React app, so that humans and agents can edit the same state, at the same time. lblcks.io/sync Here's how it works ↓

View full thread

Your Storage data comes with version history, allowing you to revert documents to their previous state. I'd recommend creating a new snapshot before applying changes made by AI, but you can also set it up to periodically save state.

Additionally, Storage comes with ready-made undo and redo hooks, making it trivial to undo changes. Crucially, pressing undo only reverts your own changes, and not changes made by others.

Liveblocks Sync is the sync engine designed for the agentic web. Add conflict-resolved multiplayer to any React app, so that humans and agents can edit the same state, at the same time. lblcks.io/sync Here's how it works ↓

View full thread

On the server, you can create a new feed message, then render in each chunk as it's generated. In React, you'll see the message stream in for all connected users in real-time. Refresh the page whilst streaming, and it'll all still work.

Liveblocks Sync is the sync engine designed for the agentic web. Add conflict-resolved multiplayer to any React app, so that humans and agents can edit the same state, at the same time. lblcks.io/sync Here's how it works ↓

View full thread

For example, with a spreadsheet, you might generate a new cell value, and then apply it to the document. Running the following code will update the spreadsheet in real-time for all connected users.

Feeds allows you to create paginated streams of data, ideal for creating multiplayer chats, storing workflow data, or sharing an agent's status in your UI.

Liveblocks Sync is the sync engine designed for the agentic web. Add conflict-resolved multiplayer to any React app, so that humans and agents can edit the same state, at the same time. lblcks.io/sync Here's how it works ↓

View full thread

More complex presence need `useUpdateMyPresence`, allowing you to attach live JSON values to users. For example, you can add an outline to a `textarea`, when a user selects it, by giving each user a `selection: string | null` value, representing the box they're editing.

Agents can collaborate too, using server-side methods like `mutateStorage`. Trigger these from chats, buttons, comments, or wherever you choose. AI can show its presence too, as it makes changes, and it'll appear in `useOthers`.

Liveblocks Sync is the sync engine designed for the agentic web. Add conflict-resolved multiplayer to any React app, so that humans and agents can edit the same state, at the same time. lblcks.io/sync Here's how it works ↓

View full thread

Liveblocks Sync is the sync engine designed for the agentic web. Add conflict-resolved multiplayer to any React app, so that humans and agents can edit the same state, at the same time. lblcks.io/sync Here's how it works ↓

Storage is the main building block, a primitive for storing multiplayer state. It comes with conflict-free data types such as `LiveObject`, which is similar to a JS object that multiple users can edit simultaneously For example, here's how a slideshow app might be constructed.

In React, you can read and edit Storage values with two hooks. 1. `useStorage`: Return a plain JSON representation of your data. 2. `useMutation`: Edit your data with live structures. Combining these allows you to, for example, render your slides, and add a "New slide" button.