How to add a contextual comments feature into a canvas-based web application

In this tutorial, we will guide you through integrating a contextual comments feature into a canvas-based web application using SuperViz. Contextual comments are a powerful tool for collaborative applications, allowing users to annotate specific areas of a canvas. This feature is especially useful for design, brainstorming, and feedback applications where users need to discuss particular elements of a shared visual space.

We'll demonstrate how to use SuperViz to implement a contextual comments system in a JavaScript application with a canvas element. This setup will enable multiple users to add comments to different areas of the canvas, facilitating real-time collaboration and feedback. Let's get started!

Step 1: Set Up Your Application

To begin, you'll need to set up a new project where we will integrate the SuperViz SDK for contextual comments.

1. Create a New Project

First, create a new application using Vite with JavaScript or TypeScript.

1
npm create vite@latest contextual-comments-canvas -- --template vanilla-ts
2
cd contextual-comments-canvas

2. Install SuperViz SDK

Next, install SuperViz, which will enable us to add real-time contextual comments to our application.

1
npm install @superviz/room @superviz/collaboration uuid

• @superviz/room: Core package for creating and managing SuperViz rooms.
• @superviz/collaboration: Package containing components for collaboration features like comments and canvas pinning.
• uuid: A library for generating unique identifiers, useful for creating unique participant IDs.

3. Configure tailwind

In this tutorial, we'll use the Tailwind css framework. First, install the tailwind package.

1
npm install -D tailwindcss postcss autoprefixer
2
npx tailwindcss init -p

We then need to configure the template path. Open tailwind.config.js in the root of the project and insert the following code.

1
/** @type {import('tailwindcss').Config} */
2
export default {
3
content: [
4
"./index.html",
5
"./src/**/*.{js,ts,jsx,tsx}",
6
],
7
theme: {
8
extend: {},
9
},
10
plugins: [],
11
}

Then we need to add the tailwind directives to the global CSS file. (src/index.css)

1
@tailwind base;
2
@tailwind components;
3
@tailwind utilities;

4. Set Up Environment Variables

Create a .env file in your project root and add your SuperViz developer key. This key will be used to authenticate your application with SuperViz services.

1
VITE_SUPERVIZ_API_KEY=YOUR_SUPERVIZ_DEVELOPER_KEY

Step 2: Implement the Main Application

In this step, we'll implement the main application logic to initialize SuperViz and handle contextual comments on a canvas.

1. Implement the App Component

Open src/main.js or src/App.js and set up the main application component to manage the collaborative environment.

1
import { createRoom } from "@superviz/room";
2
import { v4 as generateId } from "uuid";
3

4
import { useCallback, useEffect } from "react";
5
import { Comments, CanvasPin } from '@superviz/collaboration';
6

7
// SuperViz developer token ::
8
const DEVELOPER_TOKEN = import.meta.env.VITE_SUPERVIZ_API_KEY;

Explanation:

• createRoom: Function from SuperViz that creates a new room instance.
• generateId: Function from uuid to generate unique IDs for participants.
• Comments, CanvasPin: Components from SuperViz collaboration package for adding comments and pin functionality.
• DEVELOPER_TOKEN: Retrieves the SuperViz API key from environment variables.

2. Create the App Component

Define the main component that will initialize SuperViz and render the canvas.

1
const App = () => {
2
  // Initialize ::
3
  const initialize = useCallback(async () => {
4
    try {
5
      const room = await createRoom({
6
        developerToken: DEVELOPER_TOKEN,
7
        roomId: "ROOM_ID",
8
        participant: {
9
          id: generateId(),
10
          name: "Name " + Math.floor(Math.random() * 10),
11
        },
12
        group: {
13
          id: "GROUP_ID",
14
          name: "GROUP_NAME",
15
        },
16
      });
17

18
      const pinAdapter = new CanvasPin("canvas");
19
      const comments = new Comments(pinAdapter);
20

21
      room.addComponent(comments);
22
    } catch (error) {
23
      console.error("Error initializing SuperViz Room:", error);
24
    }
25
  }, []);
26

27
  useEffect(() => {
28
    initialize();
29
  }, [initialize]);

Explanation:

• initialize: An asynchronous function that sets up the SuperViz room and components.
• createRoom: Creates a new SuperViz room with the specified configuration.
• CanvasPin: Creates a pinning adapter for the canvas element.
• Comments: Creates a comments component that uses the canvas pin adapter.
• room.addComponent: Adds the comments component to the SuperViz room.
• useEffect: Runs the initialize function when the component mounts.

3. Render the Canvas

Add the JSX structure to render the canvas element.

1
return (
2
  <div className="w-full h-full bg-gray-200 flex items-center justify-center flex-col relative">
3
    <canvas id="canvas" className="w-full h-full"></canvas>
4
  </div>
5
);
6

7
export default App;

Explanation:

• div: A container for the application with full width and height.
• canvas: The HTML canvas element where users can add contextual comments. The ID 'canvas' matches the ID used in the CanvasPin initialization.

Step 3: Understanding How Contextual Comments Work

The contextual comments feature works as follows:

1. CanvasPin: This component enables pinning capability on the canvas element. Users can click anywhere on the canvas to create a pin.
2. Comments: This component provides a UI for adding and viewing comments attached to pins. When a user creates a pin, they can add a comment to it.
3. Real-time Collaboration: When multiple users are connected to the same room, they can see each other's pins and comments in real-time.

Step 4: Running the Application

1. Start the Application

To run your application, use the following command in your project directory:

1
npm run dev

This command will start the development server and open your application in the default web browser. You can interact with the canvas and add comments in real-time as other participants join the session.

2. Test the Application

• Adding Comments: Click on the canvas to create a pin and add a comment.
• Collaborative Testing: Open the application in multiple browser windows or tabs to simulate multiple participants and verify that comments can be added and viewed in real-time.
• Interaction: Test the responsiveness of the application by placing comments on different areas of the canvas and observing how they appear for other participants.

Summary

In this tutorial, we implemented a contextual comments feature in a canvas-based web application using SuperViz. We configured an application to allow users to add comments to specific areas of a shared canvas, enabling seamless collaboration and interaction. This setup can be extended and customized to fit various scenarios where real-time feedback and collaboration are required.

Feel free to explore the full code and further examples in the GitHub repository for more details.