Next.js Template Week recap
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.
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.
- Realtime APIs 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 Realtime APIs 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.
- Realtime APIs, specifically Storage, to create the real-time title.
Get it
Try a live demo or download the project in our example gallery.
Contributors
1 authors