Hello, world

This quick example shows how to create content in BCMS and display it on your website using API directly. You’ll create a blog post and fetch it in your frontend.

Step 1: Create a template

  1. In the dashboard, go to Templates

  2. Click Create new template

  3. Name it Blog

  4. You'll, by default, get two mandatory fields: Title and Slug.

  5. Add these fields too:

    • Description → Rich Text (required)

    • Cpver image → Media (required)

CleanShot 2025-07-04 at 11.47.57@2x.jpg

Step 2: Add content

  • Go to Entries Blog

  • Click Create new entry

  • Fill in:

    • Title: Hello, world

    • Slug: hello-world

    • Pick an image

    • Content: This is my first post using BCMS.

  • Click Create

CleanShot 2025-07-04 at 12.49.07@2x.jpg

Step 3: Create an API key

To access content from your frontend, you need an API key.

  1. Go to SettingsAPI Keys

  2. Click Add new key

  3. Name it Public Website

  4. Set permissions:

    • Read access to the Blog template

  5. Click Save

Copy the API key ID, Token, your orgId, instanceId, and the templateId of your Blog template. Blog's template ID is accessible from the URL on the Administration → Templates → Blog.


Step 4: Fetch the entry with curl

Once your entry is created, you can fetch it using curl.

curl -X GET \
  "https://app.thebcms.com/api/v3/org/<ORG_ID>/instance/<INSTANCE_ID>/template/<TEMPLATE_ID>/entry/<ENTRY_ID>/parse?apiKey=<KEY_ID>.<KEY_SECRET>"

Example in JavaScript:

const orgId = "<ORG_ID>";
const instanceId = "<INSTANCE_ID>";
const templateId = "<TEMPLATE_ID>";
const entryId = "<ENTRY_ID>";
const keyId = "<KEY_ID>";
const keySecret = "<KEY_SECRET>";

const url = `https://app.thebcms.com/api/v3/org/${orgId}/instance/${instanceId}/template/${templateId}/entry/${entryId}/parse?apiKey=${keyId}.${keySecret}`;

fetch(url)
  .then((res) => {
    if (!res.ok) throw new Error(`HTTP error! Status: ${res.status}`);
    return res.json();
  })
  .then((data) => {
    console.log("Response data:", data);
  })
  .catch((err) => {
    console.error("Request failed:", err);
  });

Replace:

  • <ORG_ID> with your organization ID

  • <INSTANCE_ID> with your project instance ID

  • <TEMPLATE_ID> with your template ID

  • <ENTRY_ID> with your entry ID or slug

  • <KEY_ID> and <KEY_SECRET> with your API key values


Step 5: Fetch and render in Next.js

Example using getStaticProps:

export async function getStaticProps() {
  const res = await fetch(
    'https://app.thebcms.com/api/v3/org/<ORG_ID>/instance/<INSTANCE_ID>/template/<TEMPLATE_ID>/entry/<ENTRY_ID>/parse?apiKey=<KEY_ID>.<KEY_SECRET>'
  );
  const post = await res.json();
  return { props: { post } };
}
export default function Blog({ post }) {
  return (
    <main>
      <h1>{post.meta.en.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content.en }} />
    </main>
  );
}

Next steps