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
In the dashboard, go to Templates
Click Create new template
Name it
Blog
You'll, by default, get two mandatory fields: Title and Slug.
Add these fields too:
Description
→ Rich Text (required)Cpver image
→ Media (required)

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

Step 3: Create an API key
To access content from your frontend, you need an API key.
Go to Settings → API Keys
Click Add new key
Name it
Public Website
Set permissions:
Read access to the
Blog
template
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> ); }