Quick Start Guide

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

Before You Begin

Make sure you have:

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

Step 1: Initialize the CLI

Run the init command in your project directory:

cd your-project
npx @replyke/cli init

Answer the prompts:

Select Platform

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

Choose your platform with arrow keys and press Enter.

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 will create a replyke.json configuration file and check for dependencies.

Step 2: Install Dependencies (if needed)

If you haven’t already, install the required Replyke packages:

React (Web)
React Native
Expo

npm install @replyke/react-js

npm install @replyke/react-native

npm install @replyke/expo

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

Step 3: Add a Component

Choose which comment style you want and add it:

Threaded Comments
Social Comments

For Reddit-style threaded discussions:

npx @replyke/cli add comments-threaded

What you get:

Unlimited nesting depth
Upvote/downvote system
Threading lines showing hierarchy
Collapsible threads

Best for: Forums, technical discussions, detailed conversations

For Instagram-style social comments:

npx @replyke/cli add comments-social

What you get:

Single-level nesting (comments + replies)
Heart/like system
Top/New/Old sorting
Clean, minimal design

Best for: Social platforms, media content, quick interactions

The CLI will:

✅ Copy ~25 source files into your project
✅ Create an index.ts barrel export
✅ Show you usage examples

Step 4: Set Up ReplykeProvider

Wrap your app (or the part using comments) with ReplykeProvider:

React (Web)
React Native / Expo

// App.tsx
import { ReplykeProvider } from '@replyke/react-js';

const PROJECT_ID = 'your-project-id';

function App() {
  return (
    <ReplykeProvider
      projectId={PROJECT_ID}
      signedToken={yourAuthToken}
    >
      {/* Your app content */}
    </ReplykeProvider>
  );
}

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

const PROJECT_ID = 'your-project-id';

function App() {
  return (
    <ReplykeProvider
      projectId={PROJECT_ID}
      signedToken={yourAuthToken}
    >
      {/* Your app content */}
    </ReplykeProvider>
  );
}

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

Step 5: Use the Component

Import and use the comment section in your page/screen:

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>

      {/* Add comment section */}
      <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>

      {/* Add comment section */}
      <SocialCommentSection
        entityId={post.id}
      />
    </div>
  );
}

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

Complete Example

Here’s a minimal end-to-end example:

Threaded Comments
Social Comments

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

const PROJECT_ID = import.meta.env.VITE_PUBLIC_REPLYKE_PROJECT_ID;
const PRIVATE_KEY = import.meta.env.VITE_PUBLIC_REPLYKE_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 (
    <ReplykeProvider 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>
    </ReplykeProvider>
  );
}

export default App;

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

const PROJECT_ID = import.meta.env.VITE_PUBLIC_REPLYKE_PROJECT_ID;
const PRIVATE_KEY = import.meta.env.VITE_PUBLIC_REPLYKE_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 (
    <ReplykeProvider 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>
    </ReplykeProvider>
  );
}

export default App;

What’s Installed

After adding a component, check your src/components/ directory:

src/components/comments-threaded/  # or comments-social/
├── index.ts                        # Entry point
├── components/                     # All UI components (~20 files)
│   ├── threaded-comment-section.tsx
│   ├── new-comment-form.tsx
│   ├── comments-feed/
│   ├── modals/
│   └── ...
├── hooks/                          # React hooks
│   ├── use-threaded-comments.tsx
│   └── use-ui-state.tsx
├── utils/                          # Utilities
│   └── prop-comparison.ts
└── context/                        # React context
    └── ui-state-context.tsx

All files are:

✅ Fully editable TypeScript/TSX
✅ Documented with inline comments
✅ Yours to customize

Customizing

Want to change colors, layout, or functionality? Just edit the source files!

// Change primary color from blue to purple
<button
  style={{
    backgroundColor: '#9333EA' // was #3B82F6
  }}
>
  Reply
</button>

See the Customization Guide for detailed examples.

Next Steps

Component Props

Learn about available props and options

File Structure

Understand the component file organization

Customization

Customize colors, layout, and functionality

Styling Variants

Inline styles vs Tailwind CSS

Troubleshooting

Import errors after adding component

Make sure the import path matches your componentsPath in replyke.json:

// If componentsPath is "src/components"
import { ThreadedCommentSection } from './components/comments-threaded';

// If componentsPath is "app/ui"
import { ThreadedCommentSection } from './ui/comments-threaded';

Components not rendering

Check that you’ve wrapped your app with <ReplykeProvider>
Verify projectId and signedToken are set correctly
Check browser console for errors

TypeScript errors

Make sure your tsconfig.json includes the components directory:

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

Dark mode not working (Tailwind)

For Tailwind dark mode to work, you need:

darkMode: 'class' in tailwind.config.js
A dark class on a parent element:

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

Need more help? Check the full documentation or ask in our Discord community.

Overview

Installation

Component Types

Threaded Comments

Social Comments

Notification Control

Customization

Migration

Legacy (Deprecated)

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 ReplykeProvider

Step 5: Use the Component

Complete Example

What’s Installed

Customizing

Next Steps

Component Props

File Structure

Customization

Styling Variants

Troubleshooting

Overview

Installation

Component Types

Threaded Comments

Social Comments

Notification Control

Customization

Migration

Legacy (Deprecated)

​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 ReplykeProvider

​Step 5: Use the Component

​Complete Example

​What’s Installed

​Customizing

​Next Steps

Component Props

File Structure

Customization

Styling Variants

​Troubleshooting

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 ReplykeProvider

Step 5: Use the Component

Complete Example

What’s Installed

Customizing

Next Steps

Troubleshooting