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.
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
|
React* | stable
| in beta
|
Next.js | stable
| in beta
|
Vue** | stable
| in beta
Though Vue Gen 2 is in beta, this is the recommended SDK. |
Svelte | n/a | in beta
|
Solid | n/a | in beta
|
React Native | n/a | in beta
|
Angular | stable
| n/a |
*Includes React-based frameworks such as Remix, Hydrogen, Gatsby, Next.js, and App Router.
**Includes Nuxt.
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
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' }
],
})
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} />
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’
});
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.