Next.js Template Week has just ended, a three-day virtual event showcasing Next.js templates inspired by world‑class collaborative products. Here's a recap of our new templates.
Linear is a polished collaborative issue tracker,
and our Linear-like Issue Tracker template highlights how to build every asset
of its collaboration. This includes collaborative editing, real-time properties,
fully-featured comments, an inbox with document switcher, live avatars, and
more.
This issue tracker template uses all four of our products in conjunction:
Text Editor for the collaborative document editing.
Notifications to render the inbox and document switcher.
Comments to display comment threads under and on the issues.
Sync Datastore to create the real-time properties, labels,
and title, with Storage.
Tldraw is a highly-polished open-source drawing canvas
for React, designed to integrate collaboration. To enable collaboration, usually
you must host and maintain your own server, however it’s also possible to use
Liveblocks as a back end, and our new Tldraw templates show exactly how to do
this.
We’ve built two different Tldraw examples, built in different ways using both
sync engines Sync Datastore provides, Storage and
Yjs.
We generally recommend using the Storage template as it’s a little quicker,
however if your app is already using Yjs, integrating the Yjs template makes
more sense, as your app can share its undo/redo stack with the canvas.
Notion is an AI-powered planner, and organizer
for your workspace, and our new Notion-like AI Editor demonstrates how to build
its AI and collaborative features. AI can generate styled document drafts for
you, and it also includes an AI toolbar, allowing you to simplify, expand,
translate, and change the style of selected text.
This AI editor template uses of our products in conjunction:
Text Editor for creating collaborative documents from
AI-generated markdown.
Comments to display comment threads alongside the document.
Notifications to render the inbox displaying comment
mentions.
Sync Datastore, specifically Storage, to create the
real-time title.