The React CMS That Just Works

import { useContent } from '@hisite/react-sdk';

function Homepage() {
  const { data, loading, error } = 
    useContent('homepage');

  if (loading) return <Loading />;
  if (error) return <Error message={error.message} />;

  return (
    <main>
      <h1>{data.hero.title}</h1>
      <p>{data.hero.subtitle}</p>
    </main>
  );
}

import { useLiveQuery } from '@hisite/react-sdk';

function LiveBlog({ postId }) {
  // Auto-updates when content changes
  const { data } = useLiveQuery({
    collection: 'posts',
    id: postId
  });

  return (
    <article>
      <h1>{data?.title}</h1>
      <time>{data?.updatedAt}</time>
      <div>{data?.content}</div>
    </article>
  );
}

import { useCollection } from '@hisite/react-sdk';

function BlogList() {
  const { docs } = useCollection({
    collection: 'posts',
    where: { status: 'published' },
    sort: '-publishedAt',
    limit: 10
  });

  return (
    <ul>
      {docs.map(post => (
        <li key={post.id}>
          <a href={post.slug}>{post.title}</a>
        </li>
      ))}
    </ul>
  );
}

import { useMutation } from '@hisite/react-sdk';

function LikeButton({ postId, initialLikes }) {
  const { mutate, isPending } = useMutation({
    collection: 'posts',
    id: postId
  });

  const handleLike = () => {
    mutate({ 
      likes: (prev) => prev + 1 
    });
  };

  return (
    <button onClick={handleLike} disabled={isPending}>
      ❤️ {isPending ? 'Saving...' : 'Like'}
    </button>
  );
}