How can I use Next Image without losing editing capabilities in Builder.io?

When I’m overriding the Image component from Builder.io, I seem to be losing the original editing capabilities of an image.

Here you see the original editing of an image:

And here you see mine:

And this is my override setup in builder-registry.ts. I added all the fields otherwise those inputs disappear.

Builder.registerComponent(BuilderImage, {
  name: 'Image', // The same name you used in Builder.io
  override: true,
  inputs: [
    // Add any custom inputs if needed, repeating standard ones
    { name: 'image', type: 'file' },
    { name: 'backgroundPosition', type: 'string' },
    { name: 'backgroundSize', type: 'string' },
    { name: 'lazy', type: 'boolean' },
    { name: 'fitContent', type: 'boolean' },
    { name: 'aspectRatio', type: 'number' },
    { name: 'lockAspectRatio', type: 'boolean' },
    { name: 'height', type: 'number' },
    { name: 'width', type: 'number' },
    { name: 'altText', type: 'string' }
  ],
});

How can I use Next Image without losing editing capabilities in Builder.io?

1 Like