Building Apps with Display Feeds and the API

contentfry provides two main ways to retrieve social content for your applications:

Display Feeds — public, configuration-based JSON output (no authentication required)
contentfry API — authenticated, token-based access for secure and flexible integrations

Both return structured JSON data that you can consume in any frontend or backend environment.
This guide explains how to fetch data using both methods and render it in custom UIs with JavaScript, React, or Next.js.

1. Fetching Data from a Display Feed (Public JSON)

A Display Feed returns pre-filtered JSON output based on the rules, post types, and moderation defined in the Display Editor.

Example:

const FEED_URL = "https://feed.contentfry.com/cats";

async function load() {
  const res = await fetch(FEED_URL);
  const json = await res.json();
  console.log(json);
}

Typical response:

{
  "meta": {
    "code": 200,
    "total": 27,
    "took": 13
  },
  "data": [
    {
      "id": "post_1",
      "media_type": "image",
      "description": "Example",
      "image": "https://url-to-image.jpg"
    }
  ],
  "pagination": {
    "next_url": "https://feed.contentfry.com/cats/?offset=24"
  }
}

Use Display Feeds when:

You need a fast, public endpoint
Content is already moderated
Authentication and dynamic filtering are not required

2. Fetching Data from the API (Authenticated)

The contentfry API v2 provides secure access and full control over rooms, displays, and metadata.

Example request:

// Option 1: Bearer token (recommended)
const API_URL = "https://graph.contentfry.com/v2.0/rooms/[roomid]/broadcasts";


// Option 2: Pass access token as query parameter
// const API_URL = "https://graph.contentfry.com/v2.0/rooms/[roomid]/broadcasts?access_token=pk.[access token]";

async function load() {
  const res = await fetch(API_URL, {
    headers: {
      Authorization: "Bearer YOUR_API_TOKEN"
    }
  });

  const json = await res.json();
  console.log(json);
}

Use the API when:

You need authenticated access
You are building admin tools or multi-room apps
You require advanced filtering or pagination

Both approaches return structured post data that can be rendered identically.

3. Rendering Data in a Custom UI

Once you have fetched JSON data, render it using any frontend framework or vanilla JavaScript.

Example: React Application

import { useEffect, useState } from "react";

export default function Wall() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch("https://feed.contentfry.com/cats")
      .then(res => res.json())
      .then(json => setPosts(json.data));
  }, []);

  return (
    <div className="grid">
      {posts.map(post => (
        <div className="post" key={post.id}>
          {post.image && <img src={post.image} alt="" />}
          {post.description && <p>{post.description}</p>}
        </div>
      ))}
    </div>
  );
}

Switching to API data simply means replacing the URL and adding an authorization header.

Example: Next.js (Server Rendering)

Server-rendering improves performance and SEO.

export async function getServerSideProps() {
  const feed = await fetch("https://feed.contentfry.com/cats").then(r => r.json());
  return { props: { feed } };
}

Rendering logic is identical to the React example above.

4. Handling Pagination

Both Display Feeds and API responses include pagination metadata.

{
  "pagination": {
    "next_url": "https://feed.contentfry.com/cats/?offset=24"
  }
}

Example function for loading additional posts:

async function loadMore(url) {
  const next = await fetch(url).then(r => r.json());
  return next.data;
}

Pagination logic works the same across both methods.

5. Starter Templates and Examples

The official GitHub repository provides ready-to-run templates demonstrating Display Feed and API integrations:

Repository: https://github.com/contentfry/contentfry-starter

Includes:

React Social Wall (Vite)
Next.js Social Wall
Templates using Display Feed URLs or API endpoints

Create a new project instantly:

npm create contentfry-starter@latest -- --example react-social-wall

These templates provide best practices for component structure, efficient loading, and custom rendering.

Summary

Whether you use Display Feeds or the API, the workflow is the same:

Fetch JSON data
Loop through posts
Render your UI

The API offers authenticated, advanced control
Display Feeds provide the fastest way to use pre-filtered, public content

Choose the approach that best fits your app’s security and flexibility needs.

Display Applications