UI Comment SDK Demo

🎨 UI Comment SDK Demo

📋 Demo Instructions

What is UI Comment SDK?
This SDK enables teams to add visual comments and feedback directly on any web page or app UI. It's designed for developers, designers, and QA teams who need to collaborate, review, and discuss UI elements in real time or asynchronously.

Key benefits:

Easy integration: Plug-and-play with any project, just provide your backend API for comment storage.

Visual feedback: Pin comments to specific UI elements for clear context.

Collaboration: Streamline design reviews, bug reporting, and team discussions.

Flexible: Works with static sites, React, and more.

Export CSV: Easily export all comments as a CSV file for reporting or analysis.

🚀 How to Use

1. Press Ctrl + E or click the comment icon to toggle comment mode.

2. Click on any element below to add a comment → SDK shows the comment form

3. Click on existing comment bubbles to view and reply to comments

4. Use the sidebar to browse all comments and navigate between them

✨ What the SDK handles: All UI components (forms, bubbles, modals, sidebar) - you only need to provide API callbacks for data persistence!

📋 What You Need to Prepare:

Backend API: Set up endpoints to load and save comments (JSON file, database, or cloud storage)
API Callbacks: Provide onFetchJsonFile and onUpdate functions
Project ID: Choose a unique identifier for your project
Storage Mode: Choose between API mode or localStorage mode

🔧 SDK Configuration Options

Quick Start: You only need projectId to get started!

Field	Type	Required	Description
`projectId`	string	Required	Your project name. Creates localStorage key: ui-cm-${projectId}
`saveLocalStorage`	boolean	Optional	true = Save to browser storage false = Use your API
`onFetchJsonFile`	function	Optional	Load comments from your API. Returns: { comments: Comment[] }
`onUpdate`	function	Optional	Save comments to your API. Receives: Comment[]

🎯 Choose Your Storage Mode:

🔄 Browser Storage (Easiest)

Perfect for: Demos, prototypes, testing

Setup: Just set saveLocalStorage: true

Data stored: In browser's localStorage

🌐 Your API (Production)

Perfect for: Real apps, team collaboration

Setup: Set saveLocalStorage: false + add API functions

Data stored: In your database/server

📝 Quick Examples:

🔄 Browser Storage (2 lines!)

const sdk = initCommentSDK({
  projectId: "my-app",
  saveLocalStorage: true
});

🌐 Your API (Production ready)

const sdk = initCommentSDK({
  projectId: "my-app",
  saveLocalStorage: false,
  onFetchJsonFile: async () => {
    return await fetch("/api/comments").then(r => r.json());
  },
  onUpdate: async (comments) => {
    await fetch("/api/comments", {
      method: "PUT",
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(comments)
    });
  }
});

📦 CDN Setup


<script src="https://unpkg.com/ui-comment-sdk@latest/dist/ui-comment-sdk.min.js"></script>
<script>
const sdkDemo = UICommentSDK.initCommentSDK({
  projectId: "my-project",
  saveLocalStorage: true, // Enable auto localStorage handling
  // Optional API callbacks (only needed if saveLocalStorage: false)
  onFetchJsonFile: async () => {
    return await fetch("/api/comments.json").then(r => r.json());
  },
  onUpdate: async (comments) => {
    await fetch("/api/comments.json", {
      method: "PUT",
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(comments)
    });
  }
});
await sdkDemo.init();
</script>

⚛️ ReactJS Setup

// 1. Install the package
npm install ui-comment-sdk

// 2. Create a React component
import { useEffect } from 'react';
import { initCommentSDK } from 'ui-comment-sdk';

function CommentSDKWrapper() {
  useEffect(() => {
    const sdk = initCommentSDK({
      projectId: "my-react-project",
      saveLocalStorage: true, // Enable auto localStorage handling
      // Optional API callbacks (only needed if saveLocalStorage: false)
      onFetchJsonFile: async () => {
        return await fetch("/api/comments.json").then(r => r.json());
      },
      onUpdate: async (comments) => {
        await fetch("/api/comments.json", {
          method: "PUT",
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(comments)
        });
      }
    });

    // Initialize SDK
    sdk.init();

    // Cleanup on unmount
    return () => {
      sdk.destroy();
    };
  }, []);

  return null; // SDK renders its own UI
}

// 3. Use in your app
function App() {
  return (
    <div>
      <h1>My React App</h1>
      <p>Click Ctrl+E to toggle comment mode!</p>
      <CommentSDKWrapper />
    </div>
  );
}

📝 JSONBin.io Setup (Recommended for Demo)

Quick Setup Steps

📝 Go to JSONBin.io and create a free account
🔑 Get your Master Key from the API Keys section
Replace BIN_ID and MASTER_KEY in the code below
Use these functions as your onFetchJsonFile and onUpdate callbacks

Why JSONBin.io?

Why JSONBin.io? Free, simple, and perfect for demos and prototypes. No server needed and no token complexity!

// 1. JSONBin.io Configuration
const BIN_ID = "your-bin-id-here"; // Any unique ID you want
const MASTER_KEY = "$2a$10$your-master-key-here"; // From JSONBin.io

// 2. Setup API functions
async function fetchFromBin() {
  const response = await fetch(`https://api.jsonbin.io/v3/b/${BIN_ID}`, {
    headers: { "X-Master-Key": MASTER_KEY }
  });
  const data = await response.json();
  return { comments: data.record?.comments || [] };
}

async function saveToBin(data) {
  await fetch(`https://api.jsonbin.io/v3/b/${BIN_ID}`, {
    method: "PUT",
    headers: {
      "X-Master-Key": MASTER_KEY,
      "Content-Type": "application/json"
    },
    body: JSON.stringify(data)
  });
}

🔧 Backend Setup

// Express.js example - Simple JSON file approach
const express = require('express');
const fs = require('fs');
const app = express();

app.use(express.json());

// Serve JSON file
app.get('/api/comments.json', (req, res) => {
  try {
    const data = fs.readFileSync('./comments.json', 'utf8');
    res.json(JSON.parse(data));
  } catch (error) {
    // Return empty structure if file doesn't exist
    res.json({ comments: [] });
  }
});

// Update JSON file
app.put('/api/comments.json', (req, res) => {
  try {
    const data = {
      projectId: "my-project",
      comments: req.body,
      lastUpdated: new Date().toISOString()
    };
    
    fs.writeFileSync('./comments.json', JSON.stringify(data, null, 2));
    res.json({ success: true });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

🚀 Installation & Demo

Quick Start Guide

🎯 CDN Setup (Recommended)

Perfect for static websites and quick prototypes

<script src="https://unpkg.com/ui-comment-sdk@latest/dist/ui-comment-sdk.min.js"></script>

📦 NPM Package

For React, Vue, and modern JavaScript projects

npm install ui-comment-sdk

📦 Clone from GitHub - git clone https://github.com/dagkien71/UI-Comment-SDK