> Canonical URL: https://codingcat.dev/post/learning-builder-io-from-a-developers-perspective

# Learning Builder.io from a Developers Perspective

✏️ Blog PostApril 13, 2022[![](/logos/tags/builder-io-symbol-light.svg)![](/logos/tags/builder-io-symbol-dark.svg)Builder.io](/topic/builder-io)[![](/logos/tags/nextjs-symbol-light.svg)![](/logos/tags/nextjs-symbol-dark.svg)Next.js](/topic/nextjs)[![](/logos/sanity/Sanity-Symbol--black_on_transparent.svg)![](/logos/sanity/Sanity-Symbol--white_on_transparent.svg)Sanity](/topic/sanity)[![](/logos/tags/supabase-symbol-light.svg)![](/logos/tags/supabase-symbol-dark.svg)Supabase](/topic/supabase)[![](/logos/tags/javascript-symbol-light.svg)![](/logos/tags/javascript-symbol-dark.svg)JavaScript](/topic/javascript)[#Headless CMS](/topic/cms)

# Learning Builder.io from a Developers Perspective

![CodingCat.dev tutorial cover image](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a7b78d1d7cc92b18602ac3107130fa1ebcef1b38-1920x1080.jpg?w=1920&q=82&fit=max&auto=format)[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)

I sat down with Tim Benniks, who is a professional developer advocate, to introduce him to Builder.io. It was great to hear what questions a developer might have when being first introduced to the tool. I know Tim is well versed in all things Jamstack, so he wasn't coming into the conversation completely blind.

## Key Takeaways

It was a huge help to talk with Tim about a product that I am supporting and building awareness about.

### What Developers need to know

- Developers want to see code
- Understanding of what data is required to build out the pages, user interface, and state management
- How custom components can be used

### What I learned

Because I have been learning the product over several months now there were many areas that I take for granted. When I show people the product it is going to be important to mention very key items that both developers and content creators will find useful. For instance, when I was entering one of the data bindings for state Tim was surprised by the editor.

![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/b81f4349170e458ad9522028c21dfb8a06e7d496-1508x602.png?w=1508&q=82&fit=max&auto=format)

Something I forgot to mention was the fact this is not the only editor. Not only can you use components and bind dynamic data, there is also the capability to access global styling and JavaScript with a built in editor as well. In the image below you can see that you are also able to run JavaScript on the server via Builder.isServer as well as only on the client via Builder.isBrowser.

![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/95226ef05763bdf9ba535730c11c239cfa54b83c-3596x1430.png?w=1600&q=82&fit=max&auto=format)

## More Details

Below are some more details that may have been missed in the video. I am sure as I learn more I will release some more videos, both on CodingCat.dev and [Builder.io](https://builder.io/?utm_source=codingcatdev).

This is probably one of the biggest areas to understand in builder. In most of the common frameworks that we use today they have very specific and well defined methods of calling APIs. Explaining that the framework is best suited to do this in must cases for creating pages and structure to your site. For instance when we were walking through how to create pages in Next.js, it is key to call your CMS (no matter if this is builder or something else) to build out post pages.

Below is how CodingCat.dev creates pages in Next.js. This will be the same in Nuxt, SvelteKit, Gatsby or anything that creates SSG pages.

Copied! 🐾

```
export async function getStaticPaths() {
  const paths: string[] = [];
  for (const postType of [
    ModelType.page,
    ModelType.post,
    ModelType.tutorial,
    ModelType.podcast,
    ModelType.course,
    ModelType.authors,
  ]) {
    const pages = (await getAllBuilder({
      model: postType,
      fields: `data.url`,
      startEnd: true,
    })) as CodingCatBuilderContent[];
    pages
      .filter(
        (page) =>          !['/blog', '/courses', '/podcasts', '/tutorials'].includes(
            `${page?.data?.url}`          )
      )
      .map((page) => paths.push(`${page?.data?.url}`));
  }
  return {
    paths,
    fallback: true,
  };
}
```

When the page is then generated you must call your CMS for that specific page and pass the data that is required to generate the visual page.

Copied! 🐾

```
getAllBuilder({
          preview,
          model: slug ? type : 'page',
          limit: 1,
          userAttributes: {
            urlPath: '/' + (params?.page?.join('/') || ''),
          },
          startEnd: true,
        }),
```

Then when this data passes into the system it is in two different areas of BuilderComponent, content and data.

Copied! 🐾

```

```

Below is a breakdown that I made so that you can understand what all the props for the `BuilderComponent` actually do. As you can see data is meant to include dynamically changing state data, and content will be your pages data as Described by the Builder.io JSON.

[https://cdn.sanity.io/files/hfh83o0w/dev/1b236cbae3dc5c84d31a1542a65f6fbf41379947.png](https://cdn.sanity.io/files/hfh83o0w/dev/1b236cbae3dc5c84d31a1542a65f6fbf41379947.png)

### Builder JSON

As you are using the visual editor, ever developer knows that all of this has to end up as HTML and CSS in the end. Because Builder.io creates a special serialized JSON this is what allows it to be translated into any framework using Builder.io's open source project [Mitosis](https://github.com/BuilderIO/mitosis).

Below is an example of what that JSON looks like (again available directly within the visual editor data section.

Copied! 🐾

```
{
	"ownerId": "303fa35cceca49e6ab548071602c8ebd",
	"lastUpdateBy": null,
	"createdDate": 1649885165355,
	"id": "df677f1d384f4c708cf2e64d41038d33",
	"@version": 3,
	"name": "Learning Builder.io from a Developers Perspective",
	"modelId": "3346f48bd7cf4337aa99627827b24b4a",
	"published": "draft",
	"meta": {
		"kind": "page",
		"hasLinks": false
	},
	"priority": -1853.5,
	"query": [
		{
			"@type": "@builder.io/core:Query",
			"property": "urlPath",
			"operator": "is",
			"value": "/post/learning-builder-io-from-a-developers-perspective"
		}
	],
	"data": {
		"page": {
			"title": "Learning Builder.io from a Developers Perspective",
			"authors": [
				{
					"author": {
						"@type": "@builder.io/core:Reference",
						"id": "d4652e9fa73543dc8a422e20608fc7d2",
						"model": "author"
					}
				}
			],
			"frameworks": [],
			"excerpt": "I sat down with Tim Benniks who is a developer advocate, for his first time ever checking out Builder.io. It was great to hear what questions a developer might have about creating pages with a Visual Editor.",
			"coverPhoto": {
				"created_by": {
					"id": "dbfd615dfc7e1b5d5a6d1427802862",
					"type": "user"
				},
				"url": "https://cdn.sanity.io/images/hfh83o0w/dev/a7b78d1d7cc92b18602ac3107130fa1ebcef1b38-1920x1080.jpg",
				"uploaded_by": {
					"id": "dbfd615dfc7e1b5d5a6d1427802862",
					"type": "user"
				},
				"resource_type": "image",
				"access_mode": "public",
				"bytes": 699229,
				"format": "jpg",
				"metadata": {},
				"type": "upload",
				"version": 1649885350,
				"height": 1080,
				"tags": [],
				"width": 1920,
				"duration": null,
				"secure_url": "https://cdn.sanity.io/images/hfh83o0w/dev/a7b78d1d7cc92b18602ac3107130fa1ebcef1b38-1920x1080.jpg",
				"created_at": "2022-04-13T21:29:10Z",
				"public_id": "main-codingcatdev-photo/Learning_Builder.io_from_a_Developers_Perspective"
			}
		},
		"title": "Learning Builder.io from a Developers Perspective",
		"inputs": [],
		"blocks": ["/* @ref:block:builder-ad4ccd18b8fb48869d2af8910c217787 */"]
	},
	"metrics": {
		"clicks": 0,
		"impressions": 0
	},
	"variations": {},
	"lastUpdated": 1649897478865,
	"testRatio": 1,
	"screenshot": "https://cdn.builder.io/api/v1/image/assets%2F303fa35cceca49e6ab548071602c8ebd%2F78aab7136e5d44ba878113dc279fa6a5",
	"createdBy": "HYxMkZFRmMTuS5LD6DoM9GlsuXV2",
	"lastUpdatedBy": "HYxMkZFRmMTuS5LD6DoM9GlsuXV2"
}
```

The "blocks" item is where ever single item that is in our layers panel will be described as a unique block component. It is far too large to show everything. Below is an example of one of those blocks. In this case it is our custom Next.js component called NextImage.

Copied! 🐾

```
{
	"@type": "@builder.io/sdk:Element",
	"@version": 2,
	"id": "builder-a882c6d717364475be6dc0cef0f178a0",
	"component": {
		"name": "NextImage",
		"options": {
			"layout": "responsive",
			"width": 1920,
			"height": 1080,
			"alt": "An image description",
			"className": "rounded-xl",
			"cloudinaryImage": {
				"public_id": "main-codingcatdev-photo/BuilderComponent",
				"resource_type": "image",
				"type": "upload",
				"format": "png",
				"version": 1649896683,
				"url": "https://cdn.sanity.io/images/hfh83o0w/dev/514917596087084d629168964d3f8e6aecec314e-1920x1080.png",
				"secure_url": "https://cdn.sanity.io/images/hfh83o0w/dev/514917596087084d629168964d3f8e6aecec314e-1920x1080.png",
				"width": 1920,
				"height": 1080,
				"bytes": 317529,
				"duration": null,
				"tags": [],
				"metadata": {},
				"created_at": "2022-04-14T00:38:03Z",
				"access_mode": "public",
				"created_by": {
					"type": "user",
					"id": "dbfd615dfc7e1b5d5a6d1427802862"
				},
				"uploaded_by": {
					"type": "user",
					"id": "dbfd615dfc7e1b5d5a6d1427802862"
				}
			}
		}
	},
	"responsiveStyles": {
		"large": {
			"borderRadius": "20px",
			"boxShadow": "-webkit-box-shadow: 5px 5px 15px 5px #000000;  box-shadow: 5px 5px 15px 5px #000000;"
		}
	}
}
```

I can't come close to teaching you everything about Builder.io in a single post, but my team is building out documentation, courses, and videos to help developers be successful!

## Resources, Links & Official Documentation

- [**Builder.io Developer Documentation:**](https://www.builder.io/c/docs/developers?utm_source=codingcatdev) Visual headless CMS, SDKs, and design-to-code workflows
- [**Next.js Official Documentation:**](https://nextjs.org/docs) App Router, Server Actions, and rendering architecture guides

## Related CodingCat.dev Tutorials & Podcast Episodes

- [**Supabase, Next.js and Builder.io**](/post/supabase-nextjs-and-builderio): We will walk through how to get up and running on Next.js with Supabase. Then we will build UI using http://builder.io/.
- [**Supabase, Next.js and Builder.io**](/podcast/supabase-next-js-and-builder-io): Jon Meyers sits down with Alex to talk about Supabase, Next.js and Builder.io.
- [**Using No-Code with Builder - Part 1**](/podcast/2-1-using-no-code-with-builder-io-part-1): In this first part Alex sits down with Steve Sewell to understand how http://builder.io/ is different from other no-code solutions.

## Frequently Asked Questions (FAQ)

### What are the main takeaways from Learning Builder.io from a Developers Perspective?

I sat down with Tim Benniks who is a developer advocate, for his first time ever checking out Builder.io. Learning Builder.io from a Developers Perspective explores practical patterns for Builder.io, Next.js in modern software engineering. Throughout this post, Alex Patterson breaks down real-world implementation details for Builder.io, Next.js so developers can apply these patterns directly in production.

### How do you implement Builder.io best practices in production?

When adopting Builder.io and Next.js in a production stack, start by validating your configuration against the [**Builder.io Developer Documentation**](https://www.builder.io/c/docs/developers?utm_source=codingcatdev) (Visual headless CMS, SDKs, and design-to-code workflows). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage.

### Where can I watch the full Learning Builder.io from a Developers Perspective walkthrough and find related code resources?

You can explore the complete write-up and code examples right here on CodingCat.dev, and subscribe to the [**CodingCat.dev YouTube channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1) for weekly video tutorials. For a deeper dive into Builder.io, check out our related guide: [**Supabase, Next.js and Builder.io**](/post/supabase-nextjs-and-builderio).

✏️ Visual Architecture Diagram

## how this post connects together.

Follow AJ from first principles to production-ready architecture.

Let’s build it!✏️ Visual Diagram: Learning Builder.io from a Developers Perspectiv…✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Learning Builder.io from a Developers Perspective: start with Learning Builder.io fr, implement Hands-On Implementation, and ship to production.AAA Contrast Verified▶ Watch on @CodingCatDev YouTubeRelated Course & Video

## Watch the Related Video Deep Dive: Sanity Content Operating System: Live Content API, Media Library & Functions

Master the 2026 Sanity Content Operating System: structured schemas, TypeGen + stegaClean visual editing, Organization Media Library, Sanity App SDK, and event-driven Sanity Functions with Blueprints.

[View Full Page →](/course/sanity-content-operating-system)![](https://cdn.sanity.io/images/hfh83o0w/production/19a1e5a176daf0a0a4e7125e6050d6c0cd2174a5-1376x768.png?rect=6,0,1365,768&w=1920&h=1080&q=82&fit=max&auto=format)[@CodingCatDev62.5K / 100K Subscribers Goal](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Subscribe on YouTube→](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Watch on YouTube App ↗](https://www.youtube.com/watch?v=CqW2cbUt4mM&list=PLeVR9DfUiCWE)

## related deep dives.

[All Blog Posts→](/blog)[![Sanity Content Operating System: Live Content API, Media Library & Functions](https://cdn.sanity.io/images/hfh83o0w/production/19a1e5a176daf0a0a4e7125e6050d6c0cd2174a5-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/sanity-content-operating-system)November 1, 2026[![](/logos/sanity/Sanity-Symbol--black_on_transparent.svg)![](/logos/sanity/Sanity-Symbol--white_on_transparent.svg)Sanity](/topic/sanity)[#Headless CMS](/topic/cms)[![](/logos/tags/typescript-symbol-light.svg)![](/logos/tags/typescript-symbol-dark.svg)TypeScript](/topic/typescript)[+2](/course/sanity-content-operating-system)

### [Sanity Content Operating System: Live Content API, Media Library & Functions](/course/sanity-content-operating-system)

Master the 2026 Sanity Content Operating System: structured schemas, TypeGen + stegaClean visual editing, Organization Media Library, Sanity App SDK, and event-driven Sanity Functions with Blueprints.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![The Odin Project 4: JavaScript Deep Dive (Closures, Event Loop, Async & TDD)](https://cdn.sanity.io/images/hfh83o0w/production/dd88ac44f50d7e5f3da1d21184bb96cb032c66fc-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-javascript-deep-dive)November 4, 2026[![](/logos/tags/javascript-symbol-light.svg)![](/logos/tags/javascript-symbol-dark.svg)JavaScript](/topic/javascript)[![](/logos/tags/typescript-symbol-light.svg)![](/logos/tags/typescript-symbol-dark.svg)TypeScript](/topic/typescript)[#Testing](/topic/testing)[+1](/course/odin-javascript-deep-dive)

### [The Odin Project 4: JavaScript Deep Dive (Closures, Event Loop, Async & TDD)](/course/odin-javascript-deep-dive)

Master lexical closures, ES Modules, the V8 Event Loop (microtasks vs. macrotasks), Promise concurrency, and Test-Driven Development with Vitest.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)