Overedge

Add to Your Project

The easiest way to connect your project is using the prompt generator.

Using the Prompt Generator (recommended)

  1. Go to overedge.dev/dashboard
  2. Select your platform
  3. Select content types to display
  4. Copy the generated prompt
  5. Paste into your project

The prompt includes everything:

  • CDN script installation
  • useOveredge hook
  • Components for each content type
  • Loading and empty states
  • Dynamic page routing

Manual installation

If you prefer to add the CDN script manually, add this to your HTML <head>:

html
<script
  src="https://cdn.overedge.dev/v1/connect.js"
  data-site-key="YOUR_CDN_KEY">
</script>

Find your CDN key at overedge.dev/dashboard/credentials.

The useOveredge hook

Once the CDN script is loaded, create this hook in your project:

tsx
import { useState, useEffect } from "react";

declare global {
  interface Window {
    Overedge: {
      onReady: (cb: () => void) => void;
      isReady: () => boolean;
      getContent: (type: string, params?: Record<string, unknown>) => Promise<any>;
    };
  }
}

export function useOveredge<T = any>(
  contentType: string,
  params: Record<string, unknown> = {},
) {
  const [data, setData] = useState<T[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    let cancelled = false;

    function fetchContent() {
      window.Overedge.getContent(contentType, params)
        .then((res) => {
          if (!cancelled) setData(res);
        })
        .catch((err) => {
          if (!cancelled) setError(err);
        })
        .finally(() => {
          if (!cancelled) setLoading(false);
        });
    }

    if (window.Overedge?.isReady()) {
      fetchContent();
    } else {
      window.Overedge?.onReady(fetchContent);
    }

    return () => {
      cancelled = true;
    };
  }, [contentType, JSON.stringify(params)]);

  return { data, loading, error };
}

Fetching content

javascript
// Fetch any WordPress content type
const { data: posts, loading, error } =
  useOveredge('posts', { per_page: 6 });

// Fetch courses
const { data: courses } = useOveredge('courses');

// Fetch pages
const { data: pages } = useOveredge('pages');

Dynamic pages

Add a catch-all route to display any WordPress page by its slug:

tsx
// Router — must be the last route
<Route path="/:slug" element={<WordPressPage />} />
tsx
function WordPressPage() {
  const { slug } = useParams();
  const { data: pages, loading } = useOveredge('pages');
  const page = pages.find((p) => p.slug === slug);

  if (loading) return <LoadingSkeleton />;
  if (!page) return <Navigate to="/" />;

  return (
    <div>
      <h1>{page.title.rendered}</h1>
      <div dangerouslySetInnerHTML={{ __html: page.content.rendered }} />
    </div>
  );
}

Client creates any page in WordPress → appears at yoursite.com/[slug] instantly.