Builder.io Has a Free API — Here's How to Use It for Visual Page Building

#builderio #cms #react #webdev

Builder.io is a visual development platform with a free tier that includes a powerful Content API. It lets marketers and designers create pages visually while developers maintain code quality.

Getting Your API Key

Fetching Content

import { builder } from "@builder.io/sdk";

builder.init("your-public-api-key");

// Get a specific page
const page = await builder.get("page", {
  url: "/about"
}).toPromise();

console.log(page.data.title);
console.log(page.data.blocks); // Visual blocks

Querying Content Models

// Fetch blog posts from a custom model
const posts = await builder.getAll("blog-post", {
  limit: 10,
  query: {
    "data.category": "engineering"
  },
  options: {
    sort: { "data.date": -1 }
  }
});

posts.forEach(p => console.log(p.data.title));

React Integration

import { BuilderComponent, builder } from "@builder.io/react";

builder.init("your-public-api-key");

export default function Page({ builderContent }) {
  return <BuilderComponent model="page" content={builderContent} />;
}

export async function getStaticProps({ params }) {
  const content = await builder.get("page", {
    url: "/" + (params?.slug?.join("/") || "")
  }).toPromise();
  return { props: { builderContent: content || null }, revalidate: 5 };
}

Write API

// Create content via Write API
const response = await fetch(
  "https://builder.io/api/v1/write/blog-post",
  {
    method: "POST",
    headers: {
      "Authorization": "Bearer your-private-key",
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      name: "New Post",
      data: { title: "Created via API", category: "tech" }
    })
  }
);

Use Cases

Landing pages: Marketing teams build and A/B test pages without developers
Headless CMS: Structured content with visual drag-and-drop editing
Design-to-code: Import Figma designs and generate production components

Need to extract or automate web content at scale? Check out my web scraping tools on Apify — no coding required. Or email me at spinov001@gmail.com for custom solutions.

DEV Community