Skip to main content

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

1

Select Platform

? Which platform are you using?
❯ React (Web)
  React Native
  Expo
Choose your platform with arrow keys and press Enter.
2

Choose Styling

? Which styling approach do you prefer?
❯ Tailwind CSS
  Inline Styles
  • Select Tailwind CSS if you use Tailwind
  • Select Inline Styles otherwise
3

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
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
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>
  );
}
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>
  );
}
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;

​
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

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';
  1. Check that you’ve wrapped your app with <ReplykeProvider>
  2. Verify projectId and signedToken are set correctly
  3. Check browser console for errors
Make sure your tsconfig.json includes the components directory:
{
  "include": ["src/**/*"]
}
For Tailwind dark mode to work, you need:
  1. darkMode: 'class' in tailwind.config.js
  2. A dark class on a parent element:
<html className={isDark ? 'dark' : ''}>
Need more help? Check the full documentation or ask in our Discord community.