SDK Comparison

If you want to use the latest, second-generation Builder SDKs, understanding how the imports might have changed for your framework can help you get started smoothly so you can leverage the many improvements and updates.

Tip: Currently, the React Gen 2 SDK is in beta. We recommend that you use the Gen 1 SDK for React and React-based frameworks.

Comparison: Gen 1 and Gen 2

At Builder, we refer to the two sets of SDKs as Gen 1 and Gen 2:

Gen 1: first generation of the Builder SDKs
Gen 2: second generation of the Builder SDKs

Use the table below so that you reference the SDK for your framework correctly.

Framework	Gen 1	Gen 2
Qwik	n/a	in beta `@builder.io/sdk-qwik`
React*	stable `@builder.io/react`	in beta `@builder.io/sdk-react`
Next.js	stable `@builder.io/react`	in beta `@builder.io/sdk-react-nextjs`
Vue**	stable `@builder.io/vue`	in beta `@builder.io/sdk-vue/vue2` `@builder.io/sdk-vue/vue3` Though Vue Gen 2 is in beta, this is the recommended SDK.
Svelte	n/a	in beta `@builder.io/sdk-svelte`
Solid	n/a	in beta `@builder.io/sdk-solid`
React Native	n/a	in beta `@builder.io/sdk-react-native`
Angular	stable `@builder.io/angular`	n/a

*Includes React-based frameworks such as Remix, Hydrogen, Gatsby, Next.js, and App Router.

**Includes Nuxt.

Importing the rendering component

The component's name changed from BuilderComponent in Gen 1 to RenderContent in Gen 2.

Gen 1

In Gen 1, the import is:

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

Notice:

the component is BuilderComponent
the Gen 1 SDK is @builder.io/react

React Gen 2

In Gen 2, the import changes to:

import { RenderContent } from '@builder.io/sdk-react';

Notice:

the component is RenderContent
the Gen 2 SDK is @builder.io/sdk-react

Importing helpers to configure the editor

The process of importing helpers to configure the editor has also changed between React Gen 1 and React Gen 2.

Gen 1

In Gen 1, import a Builder object and use the register() helper:

import { Builder } from '@builder.io/react';


Builder.register('insertMenu', {
  name: 'Our components',
  items: [
    { name: 'Hero' },
    { name: 'Double Columns' },
    { name: 'Triple Columns' },
    { name: 'Dynamic Columns' },
  ],
})

Gen 2

In Gen 2, the Builder import no longer exists. Instead, import register directly from the module:

import { register } from '@builder.io/sdk-react';

register('insertMenu', {
  name: 'Our components',
  items: [
    { name: 'Hero' },
    { name: 'Double Columns' }
  ],
})

Importing helpers to register custom components

The process of importing the helper to register custom components has also changed between Gen 1 and Gen 2.

Gen 1

In Gen 1, import the Builder object and use the registerComponent() helper:

import { Builder } from '@builder.io/react';

Builder.registerComponent(MyHero, {
  name: 'Hero',
  inputs: [
   { name: 'title', type: 'string' },
  ],
});

Gen 2

In Gen 2, the registerComponent import is deprecated. Instead, create a customComponents array containing all the custom components, and pass that as a prop to the RenderContent component:

import { RenderContent } from '@builder.io/sdk-react';

const MY_HERO_CUSTOM_COMPONENT = {
  component: MyHero,
    name: 'Hero',
    inputs: [
      { name: 'title', type: 'string' },
    ],
}

// this array can contain as many custom components as you want
const CUSTOM_COMPONENTS = [MY_HERO_CUSTOM_COMPONENT]

// pass the array to RenderContent
<RenderContent customComponents={CUSTOM_COMPONENTS} />

Importing helpers to fetch data

The process of importing the helper to fetch data has also changed between Gen 1 and Gen 2.

Gen 1

In Gen 1, import a builder object and use the get() or getAll() helper:

import { builder } from '@builder.io/react';

const pages = await builder.getAll('page', {
  fields: 'data.url,name',
});

const page = await builder.get('page', {
  fields: 'data.url,name',
});

Gen 2

In Gen 2, the builder import is no longer used. Instead, import fetchOneEntry() and fetchEntries()—to fetch single and multiple entries respectively—directly from the package. Additionally, the apiKey is now a required field:

import { fetchOneEntry, fetchEntries } from '@builder.io/sdk-react';

const page = await fetchOneEntry({
  model: 'page',
  fields: 'data.url,name',
  apiKey: 'YOUR_API_KEY’
});

const pages = await fetchEntries({
  model: 'page',
  fields: 'data.url,name',
  apiKey: 'YOUR_API_KEY’
});

What's next

For more detail on the Gen 2 (or Mitosis) SDKs, see the Builder GitHub repo.

Looking to hire a third party to help with your project?

Submit a project request and our partnerships team will reach out to connect you with an Expert from our partner ecosystem.

Connect with us

Was this article helpful?