Quick Start Guide

This guide will have you up and running with Sublay comment components in under 5 minutes.

Before You Begin

✅ Node.js 18+ installed
✅ A React, React Native, or Expo project
✅ A Sublay project created

Step 1: Initialize the CLI

Run the init command in your project directory:

cd your-project
npx @sublay/cli init

Answer the prompts:

Select Platform

? Which platform are you using?
❯ React (Web)
  React Native
  Expo

Choose Styling

? Which styling approach do you prefer?
❯ Tailwind CSS
  Inline Styles

Select Tailwind CSS if you use Tailwind
Select Inline Styles otherwise

Set Component Path

? Where should components be installed? (src/components)

Press Enter to use the default, or type a custom path.

The CLI creates a sublay.json configuration file and checks for required dependencies.

Step 2: Install Dependencies (if needed)

React (Web)
React Native
Expo

npm install @sublay/react-js

npm install @sublay/react-native

npm install @sublay/expo

The CLI will prompt you to install these automatically if they’re missing.

Step 3: Add a Component

Threaded Comments
Social Comments

npx @sublay/cli add comments-threaded

Reddit-style discussions with unlimited nesting, upvote/downvote, threading lines, and collapsible threads.

The CLI copies ~25 source files into your project and shows a usage example.

Step 4: Set Up SublayProvider

Wrap your app (or the relevant section) with SublayProvider:

React (Web)
React Native / Expo

// App.tsx
import { SublayProvider } from '@sublay/react-js';

function App() {
  return (
    <SublayProvider
      projectId="your-project-id"
      signedToken={yourAuthToken}
    >
      {/* Your app content */}
    </SublayProvider>
  );
}

// App.tsx
import { SublayProvider } from '@sublay/react-native'; // or '@sublay/expo'

function App() {
  return (
    <SublayProvider
      projectId="your-project-id"
      signedToken={yourAuthToken}
    >
      {/* Your app content */}
    </SublayProvider>
  );
}

For authentication setup and obtaining signedToken, see the Authentication guide.

Step 5: Use the Component

Threaded Comments
Social Comments

// BlogPost.tsx
import { ThreadedCommentSection } from './components/comments-threaded';

function BlogPost({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
      <ThreadedCommentSection entityId={post.id} />
    </div>
  );
}

// Post.tsx
import { SocialCommentSection } from './components/comments-social';

function Post({ post }) {
  return (
    <div>
      <img src={post.image} />
      <p>{post.caption}</p>
      <SocialCommentSection entityId={post.id} />
    </div>
  );
}

That’s it! You now have a fully functional comment system.

Complete Example

Threaded Comments
Social Comments

import { useEffect, useState } from 'react';
import { SublayProvider, useSignTestingJwt } from '@sublay/react-js';
import { ThreadedCommentSection } from './components/comments-threaded';

const PROJECT_ID = import.meta.env.VITE_PUBLIC_SUBLAY_PROJECT_ID;
const PRIVATE_KEY = import.meta.env.VITE_PUBLIC_SUBLAY_SECRET_KEY;

const DUMMY_USER = { id: 'user1', username: 'tech_developer' };

function App() {
  const signTestingJwt = useSignTestingJwt();
  const [signedToken, setSignedToken] = useState<string>();

  useEffect(() => {
    const handleSignJwt = async () => {
      const token = await signTestingJwt({
        projectId: PROJECT_ID,
        privateKey: PRIVATE_KEY,
        payload: DUMMY_USER,
      });
      setSignedToken(token);
    };
    handleSignJwt();
  }, []);

  return (
    <SublayProvider projectId={PROJECT_ID} signedToken={signedToken}>
      <div className="max-w-4xl mx-auto p-8">
        <h1>My Blog Post</h1>
        <p>This is my awesome blog post content...</p>
        <ThreadedCommentSection entityId="blog-post-123" />
      </div>
    </SublayProvider>
  );
}

export default App;

import { useEffect, useState } from 'react';
import { SublayProvider, useSignTestingJwt } from '@sublay/react-js';
import { SocialCommentSection } from './components/comments-social';

const PROJECT_ID = import.meta.env.VITE_PUBLIC_SUBLAY_PROJECT_ID;
const PRIVATE_KEY = import.meta.env.VITE_PUBLIC_SUBLAY_SECRET_KEY;

const DUMMY_USER = { id: 'user1', username: 'social_user' };

function App() {
  const signTestingJwt = useSignTestingJwt();
  const [signedToken, setSignedToken] = useState<string>();

  useEffect(() => {
    const handleSignJwt = async () => {
      const token = await signTestingJwt({
        projectId: PROJECT_ID,
        privateKey: PRIVATE_KEY,
        payload: DUMMY_USER,
      });
      setSignedToken(token);
    };
    handleSignJwt();
  }, []);

  return (
    <SublayProvider projectId={PROJECT_ID} signedToken={signedToken}>
      <div className="max-w-2xl mx-auto p-8">
        <img src="post.jpg" className="w-full rounded-lg" />
        <p className="mt-4">Check out this amazing photo!</p>
        <SocialCommentSection entityId="post-456" />
      </div>
    </SublayProvider>
  );
}

export default App;

What Gets Installed

src/components/comments-threaded/
├── index.ts
├── components/          # ~20 UI component files
│   ├── threaded-comment-section.tsx
│   ├── new-comment-form.tsx
│   ├── comments-feed/
│   └── modals/
├── hooks/
├── utils/
└── context/

All files are editable TypeScript/TSX, documented with inline comments, and committed to your repo.

Troubleshooting

Import errors after adding component

Make sure the import path matches your paths.components in sublay.json:

// paths.components = "src/components"
import { ThreadedCommentSection } from './components/comments-threaded';

// paths.components = "app/ui"
import { ThreadedCommentSection } from './ui/comments-threaded';

Components not rendering

Check that <SublayProvider> wraps the component
Verify projectId and signedToken are correctly set
Check the browser console for errors

TypeScript errors

Ensure your tsconfig.json includes the components directory:

{ "include": ["src/**/*"] }

Dark mode not working (Tailwind)

Set darkMode: 'class' in tailwind.config.js and add a dark class to a parent element:

<html className={isDark ? 'dark' : ''}>

Next Steps

Props API

Learn about available props and options

File Structure

Understand the installed file organization

Customization

Customize colors, layout, and functionality

Styling Variants

Inline styles vs Tailwind CSS

Overview

Installation

Component Types

Threaded Comments

Social Comments

Notification Control

Customization

Quick Start

Quick Start Guide

Before You Begin

Step 1: Initialize the CLI

Answer the prompts:

Step 2: Install Dependencies (if needed)

Step 3: Add a Component

Step 4: Set Up SublayProvider

Step 5: Use the Component

Complete Example

What Gets Installed

Troubleshooting

Next Steps

Props API

File Structure

Customization

Styling Variants

​Quick Start Guide

​Before You Begin

​Step 1: Initialize the CLI

​Answer the prompts:

​Step 2: Install Dependencies (if needed)

​Step 3: Add a Component

​Step 4: Set Up SublayProvider

​Step 5: Use the Component

​Complete Example

​What Gets Installed

​Troubleshooting

​Next Steps

Props API

File Structure

Customization

Styling Variants

Quick Start Guide

Before You Begin

Step 1: Initialize the CLI

Answer the prompts:

Step 2: Install Dependencies (if needed)

Step 3: Add a Component

Step 4: Set Up SublayProvider

Step 5: Use the Component

Complete Example

What Gets Installed

Troubleshooting

Next Steps