Builder Widgets

Adds widgets for Builder.io editing, such as carousels, tabs, accordions, etc.

How to use it

First, install the package:

npm install @builder.io/widgets

When using the React SDK, import:

import '@builder.io/widgets';

When you import widgets wherever you render a <BuilderComponent ... />, the widgets register and are available in the Visual Editor and when rendering (including server-side).

Example

For a working example, check out Builder's Next.js example.

Lazy Loading

Instead of importing the root @builder.io/widgets, which synchronously registers all components, you can asynchronously import only the widgets used in your Builder content.

With Next.js

To dynamically import widgets in Next.js, use the following import statement:

import '@builder.io/widgets/dist/lib/builder-widgets-async'

Frameworks other than Next.js

Lazy load the widget components explicitly by registering them with your lazy loading library of choice; for example, Loadable, and only the specified components will load when used in content, as needed.

import { Builder } from '@builder.io/react';
import { accordionConfig } from '@builder.io/widgets/dist/lib/components/Accordion.config';
import loadable from '@loadable/component';

Builder.registerComponent(
  loadable(() =>
    import('@builder.io/widgets/dist/lib/components/Accordion').then(mod => mod.AccordionComponent)
  ),
  accordionConfig
);

You can also use this same methodology with Suspense as well.

More information

For more detail, read the official Builder widgets documentation, Using Widgets.

Help and troubleshooting

If you have questions or feedback, contact us at [email protected]. We are happy to help!