Next.js Template Week recap

Last week was our Next.js Template Week, which we took as an opportunity to share new open-source Next.js examples we’ve been working on.

• Linear-like Issue Tracker - Draft issues with comments, real-time properties.
• Tldraw Whiteboard - Add a highly polished collaborative canvas to your app.
• Notion-like AI Editor - Create and edit collaborative text documents with AI.

Linear-like Issue Tracker

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.

Get it

Try a live demo or download the project in our example gallery.

Tldraw Whiteboard

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.

Get them

Try live demos or download the projects in our example gallery.

Notion-like AI Editor

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.

Get it

Try a live demo or download the project in our example gallery.

Contributors

Contributors include:

1 authors