Bring your own markup

<CommentThread /> is the batteries-included path (same Tailwind classes as Blade). When you want the data and none of the opinions, drop it and use the hook. That store is deliberately independent of the built-in components’ internal context.

React

import { CommentifyClient } from "@commentify/core";
import { CommentifyProvider, useCommentThread } from "@commentify/react";

const client = new CommentifyClient();

function Thread({ id }: { id: number }) {
  const { comments, status, hasMore, post, toggleLike, loadMore } =
    useCommentThread("articles", id, { sort: "newest" });

  if (status === "loading") return <p>Loading…</p>;

  return (
    <>
      {comments.map((comment) => (
        <article key={comment.id}>
          <strong>{comment.user?.name ?? "Guest"}</strong>
          <div dangerouslySetInnerHTML={{ __html: comment.html }} />
          {comment.pending && <em>Awaiting moderation</em>}
          <button onClick={() => void toggleLike(comment.id)}>
            {comment.liked ? "Unlike" : "Like"} ({comment.likes_count})
          </button>
        </article>
      ))}

      {hasMore && <button onClick={() => void loadMore()}>Load more</button>}
      <button onClick={() => void post("Hello")}>Post</button>
    </>
  );
}

export default function Comments({ id }: { id: number }) {
  return (
    <CommentifyProvider client={client}>
      <Thread id={id} />
    </CommentifyProvider>
  );
}

Wrap the app in CommentifyProvider once so every thread shares one client. comment.html is already markdown + mention links, sanitized the same way Blade renders. Do not run a second markdown pipeline on body unless you are building an editor.

Vue

The hook returns state as a single ref:

<script setup lang="ts">
import { useCommentThread } from "@commentify/vue";

const props = defineProps<{ id: number }>();
const { state, post, toggleLike, loadMore } = useCommentThread(
  "articles",
  props.id
);
</script>

<template>
  <p v-if="state.status === 'loading'">Loading…</p>

  <article v-for="comment in state.comments" :key="comment.id">
    <strong>{{ comment.user?.name ?? "Guest" }}</strong>
    <div v-html="comment.html" />
    <em v-if="comment.pending">Awaiting moderation</em>
    <button @click="toggleLike(comment.id)">
      {{ comment.liked ? "Unlike" : "Like" }} ({{ comment.likes_count }})
    </button>
  </article>

  <button v-if="state.hasMore" @click="loadMore()">Load more</button>
</template>

Share a client with createCommentify({ client }) on createApp(), or provideCommentifyClient() in a parent.

Guest posts from a custom form

await post(body); // authenticated

// logged out, when core.allow_guests and api.guest_comments:
await client.createComment("articles", id, body, undefined, {
  guest_name: name,
  guest_email: email,
});

The bundled composer already sends guest fields when GET ui says features.guests is true.

Comment shape

Each comment includes id, body, html, parent_id, is_approved, user (id, name, avatar), likes_count, liked, reported, replies_count, nested replies, can, is_author, is_moderator, is_guest, pinned, pinned_at, created_at, relative_created_at, updated_at. Guests have user.id === null and the guest display name.

Getting Started

Usage

Frontends

API

Moderation

Features

Help

React

Vue

Guest posts from a custom form

Comment shape

​React

​Vue

​Guest posts from a custom form

​Comment shape

React

Vue

Guest posts from a custom form

Comment shape