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 the SuperViz React SDK. 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 React 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 React Application

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

1. Create a New React Project

First, create a new React application using Create React App with TypeScript.

1
npm create vite@latest contextual-comments-canvas -- --template react-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/react-sdk uuid

• @superviz/react-sdk: SDK for integrating real-time collaboration features, including contextual comments.
• 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/App.tsx and set up the main application component using the SuperVizRoomProvider to manage the collaborative environment.

1
import { SuperVizRoomProvider } from '@superviz/react-sdk'
2
import { v4 as generateId } from 'uuid'
3
import Room from './Room'
4

5
const developerKey = import.meta.env.VITE_SUPERVIZ_API_KEY;
6
const participantId = generateId()
7

8
export default function App() {
9
  return (
10
    <SuperVizRoomProvider
11
      developerKey={developerKey}
12
      group={{
13
        id: 'contextual-comments',
14
        name: 'contextual-comments',
15
      }}
16
      participant={{
17
        id: participantId,
18
        name: 'Participant',
19
      }}
20
      roomId='contextual-comments'
21
    >
22
      <Room />
23
    </SuperVizRoomProvider>
24
  )
25
}

Explanation:

• SuperVizRoomProvider: This component wraps the application to enable real-time features and provides configuration for group and participant details.
• developerKey: Retrieves the developer key from environment variables to authenticate with SuperViz.
• participantId: Generates a unique ID for each participant using the uuid library.
• Room Component: Contains the logic for rendering the canvas and handling contextual comments.

Step 3: Implement the Room Component

The Room component will be responsible for integrating the canvas with SuperViz, allowing users to add contextual comments in real-time.

1. Create Room Component

Create a new file named src/Room.tsx and add the following implementation:

1
import { useCanvasPin, useComments, Comments } from "@superviz/react-sdk";
2

3
export default function Room() {
4
  const { openThreads, closeThreads } = useComments();
5
  const { pin } = useCanvasPin({ canvasId: 'canvas' });
6

7
  return (
8
    <div className='w-full h-full bg-gray-200 flex items-center justify-center flex-col'>
9
      <header className='w-full p-5 bg-purple-400 flex items-center justify-between'>
10
        <h2 className='text-white text-2xl font-bold'>SuperViz Contextual Comments</h2>
11
        <div id="comments" className='flex gap-2'></div>
12
      </header>
13
      <main className='flex-1 w-full h-full'>
14
        <div className='w-full h-full'>
15
          <canvas id="canvas" className='w-full h-full'></canvas>
16
        </div>
17

18
        {/* SuperViz */}
19
        <Comments
20
          pin={pin}
21
          position='left'
22
          buttonLocation='comments'
23
          onPinActive={openThreads}
24
          onPinInactive={closeThreads}
25
        />
26
      </main>
27
    </div>
28
  )
29
}

Explanation:

• useCanvasPin Hook: Sets up pinning functionality on the canvas, allowing users to attach comments to specific areas.
  • canvasId: The ID of the canvas element where pins will be enabled.
• useComments Hook: Provides functions to open and close comment threads.
• Comments Component: Displays comments related to the pinned areas on the canvas, enabling real-time feedback and collaboration.
  • pin: Provides the ability to pin comments to specific elements.
  • position: Sets the position of the comment section.
  • buttonLocation: Specifies where the button to access comments will be located.
  • onPinActive / onPinInactive: Callbacks to handle comment thread actions.

Step 4: Understanding the Project Structure

Here's a quick overview of how the project structure supports contextual comments:

1. App.tsx
   • Initializes the SuperViz environment.
   • Sets up participant information and room details.
   • Renders the Room component within the SuperVizRoomProvider.
2. Room.tsx
   • Contains the main UI elements, including the canvas.
   • Integrates the Comments component to show real-time comments pinned to specific canvas areas.

Step 5: Running the Application

1. Start the React 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

• Contextual Comments: 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.
• Collaborative 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 and React. We configured a React 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.