## Challenge Artefact provides a shared workspace for teams to create, review, and approve technical documents effortlessly. Its powerful tools help clarify collaboration, automate approvals, and keep technical teams aligned, so they can focus on shipping, not guessing. Technical documentation is essential–but creating it in enterprise environments is notoriously difficult. Product and engineering teams spend countless hours shaping requirements and specifications, only to hit familiar bottlenecks—securing clear and timely approvals from cross-functional stakeholders. Artefact recognized that traditional approval methods, like dropdown menus and cluttered version histories, simply weren’t cutting it. They left teams unsure about who approved what, and when, resulting in delays and confusion. For this reason, they built something better, a dedicated, collaborative workspace tailored specifically to the way technical teams create, review, and approve docs.

## Solution Artefact partnered with Liveblocks to build a dynamic documentation workspace that reimagines how product and engineering teams collaborate. The team implemented a number of key collaborative features, powered by Liveblocks. ### Presence indicators Using presence avatars, team members can see who is currently viewing and editing a document in realtime, providing instant visibility into team activities.

Live avatar stack created with{" "} Liveblocks Presence } >

### Collaborative editing Artefact’s collaborative document editing allows teams to work together in realtime, creating rich-text documents together. You can add use mentions, headings, comments, tables, and more, using an interactive toolbar. Live cursors are displayed for each user as they select text and write.

Powered by Liveblocks Text Editor and{" "} Tiptap } >

### Templates Artefact provides a set of templates to start from, you can click the _Create Document_ button to insert a ready-made template into the editor.

Our{" "} Node.js package {" "} enables inserting content into editors } >

### Floating toolbar Within the text editor, you can select text and use the toolbar to style your text, use blockquotes, add comments, and more.

This is our pre-built{" "} FloatingToolbar {" "} component } >

### AI toolbar If you click the _ArtefactAI_ button in the toolbar, you can apply AI suggestions for the current selection, and make changes. For example, you can ask the AI to improve the quality of your writing, or translate text into a different language.

AI powered by Liveblocks AI Copilots and our pre-built{" "} AiToolbar {" "} component } >

### Comments Within the text editor, you can add comment threads to a document. These threads are displayed in a sidebar, anchored to the right of the text editor, and you can tag others, upload attachments, add emoji reactions, and more.

Uses Liveblocks Comments and our pre-built{" "} AnchoredThreads {" "} component } >

In an alternate display mode, they’re also rendered as floating comments under the highlighted piece of text.

Uses our pre-built{" "} FloatingThreads {" "} component } >

### Approvals Each document can be assigned certain reviewers, who have permission to read and approve the document. Reviewers are listed in the sidebar with their current approval status, and documents also have different statuses: _Drafting_, _In Review_, and _Approved_.

Reviewers and approvals are stored in our{" "} realtime sync engine } >

### Share menu The in-app share menu allows editors to invite new users to the document. Users can be assigned full edit access, or just read-only access.

We have a similar share menu in our{" "} Next.js Starter Kit } >

### Inbox notifications When a user is mentioned in a document, or if a new comment is added to as thread they’re participating in, they receive a notification in their inbox. Inbox notifications can be marked as read or deleted.

Created with our pre-built{" "} Liveblocks Notifications components } >

### Email notifications If a user misses an inbox notification, Artefact sends an email notification to the user, letting them know. Users can configure which types of notifications they’d like to receive, for example mentions in the text editor, tags in comments, etc.

Built with our{" "} email package,{" "} webhooks {" "} and{" "} email templates } >

## Results With these features working seamlessly together, [Artefact](https://tryartefact.com) has truly reinvented what a collaborative workspace can be for technical teams. Instead of stitching together fragmented tools, they built a unified environment where realtime editing, AI assistance, and contextual feedback come together—making documentation not just easier to produce, but genuinely collaborative from start to finish. If you’d like to build similar features into your product, make sure to check out our [examples gallery](/examples) where highlight how to implement every part of this. Additionally our [Next.js Starter Kit](/nextjs-starter-kit) contains the features listed above in a single project, and you can even try out a [live demo](https://nextjs-starter-kit.liveblocks.app).