TypeScript icon, indicating that this package has built-in type declarations

1.0.5 • Public • Published

Builder.io dynamic dropdown

See here for the React component that powers this plugin

Using this plugin in production code

The idea behind the plugin is to generalize the use of a dropdown so the code provider will tell the plugin how to process the received data. When adding the plugin to a custom component input, it will require two input arguments:

  withBuilder(Component, {
  name: "Component",
  inputs: [
      name: "dropdown",
      type: "dynamic-dropdown",
      options: {
        url: "https://www.example.com/{{version}}/{{endpoint}}?pathParam={{pathValue}}",
        mapper: "data.map(each => ({ name: each.id, value: each.value }))"

The url argument will be templated with handlebars. The plugin is smart enough to figure out the handlebars values from the application context to replace them. The mapper argument will be a string method that will be executed on the side of the plugin given the answer from the url GET call.

Creating a new plugin from this example


cd plugins/dynamic-dropdown
npm install


npm start

Add the plugin in Builder.io

From Builder.io open the javascript console in your browser's dev tools and run.

// Adds the plugin
// Saves for all in your organization and reloads the browser
builder.savePlugins().then(() => location.reload())

NOTE: Loading http:// content on an https:// website will give you a warning. Be sure to click the shield in the top right of your browser and choose "load unsafe scripts" to allow the http content on Builder's https site when devloping locally

Load unsafe script example

Now as you develop you can restart Builder to see the latest version of your plugin.

To uninstall your plugin run

// Removes all plugins
// Saves for all in your organization and reloads the browser
builder.savePlugins.then(() => location.reload())

Seeing your plugin in action

In this plugin we replace the default "file" type editor with our Cloudinary file picker. So, to preview in Builder, just add a component with a file input (e.g. the built-in Image component), and open it's options to see your custom editor!

Seeing your plugin in the editor example gif


Builder.io uses React and Material UI for the UI, and Emotion for styling.

Using these frameworks in Builder plugins ensures best possible experience and performance.


We recommend sending us a pull request with your plugin so we can publish it on your behalf.

If required, you can also publish to your own NPM or a hosting service.

To load a plugin from NPM



You can load a plugin from a specific version


Or from a URL





Package Sidebar


npm i @builder.io/plugin-dynamic-dropdown

Weekly Downloads






Unpacked Size

14.6 MB

Total Files


Last publish


  • anaghavarhade
  • harmeet.builder
  • armela
  • strd6
  • murtaza-haveliwala
  • gustavohgs
  • sanyamkamat
  • shyam-builder
  • manucorporat
  • steve8708
  • samijaber
  • teleaziz123
  • mrkoreye
  • mhevery
  • adamdbradley