@builder.io/widgets

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, just

import '@builder.io/widgets';

Anywhere that you render a <BuilderComponent ... />, and now the widgets will register and be available in the editor and when rendering (including server side)

Example

See here for a real working example in our next.js example repo

Lazy Loading

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

With Next.js

To only dynamically import widgets in next.js:

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

Other Frameworks

You'd want to lazy load the widget components explicitly. To do so, , you can register them with your lazy loading library of choice, for e.g Loadable, and these components will only 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.

Help and troubleshooting

Questions or feedback - contact us at [e-mail], we are happy to help!