Vercel Toolbar extensibility

(edited)

The Vercel Toolbar is great. Our stakeholders all love it.

There are some things we'd like to add into the toolbar/menu, but it doesn't currently support custom commands. We don't really want to implement our own toolbar and menu, as the one provided has a rich feature set.

We'd like an option to add new items to the toolbar and/or menu, possibly using an approach similar to Astro's: https://docs.astro.build/en/reference/dev-toolbar-app-reference/

Vercel Staff

Thanks for the feedback, ! I’ll pass it on internally

Vercel Alum

Outside of custom commands, I'm curious what kind of features you'd add to the toolbar? Any specifics that you think is missing to the core offering?

If possible some nicer things like what Astro and & Nuxt ship by default, things like route maps for Next, what pages are ISR, PPR, etc, what parts of the page are each. It's the one place next falls far far behind is in browser developer tooling, and the new canary does have a little rendering mode indicator but it sticks out like a sore thumb and only tells for the page you're on

Thanks and hi !

There are few things that have come up already, like toggling on/off developer tools for Tanstack Query. In that example, a command or toolbar button would work.

Other ideas we've had are things like links to designs or other related assets.

So I guess the MVP of what I'd like is that the CMD menu allowed us to inject commands with callbacks? Like:

customCommands: [{
  name: "Do thing",
  callback: () => callDoThing(),
}]

This could even be done via custom events, which would allow the config to be JSON.

{
  "name": "Toggle debug logs",
  "type": "toggle",
  "eventName": "toggleDebugLogs"
}

I realise that this could be partially achieved with feature flags, but that's not really what feature flags are for, and it's much less user friendly.

Vercel Alum

Hey, ! Sent you a DM

+1, would love to see this too. besides some of the use cases already listed above, another one we'd have is to display a list of products currently displayed on the page, along with a link to the product e.g. in Shopify. this would help our content managers verify which products are/aren't being displayed, and edit them more efficiently

Vercel Alum

Thanks for chiming in, ! Shared internally

This topic is closed. It no longer accepts new replies.

Thanks and hi !

There are few things that have come up already, like toggling on/off developer tools for Tanstack Query. In that example, a command or toolbar button would work.

Other ideas we've had are things like links to designs or other related assets.

So I guess the MVP of what I'd like is that the CMD menu allowed us to inject commands with callbacks? Like:

customCommands: [{
  name: "Do thing",
  callback: () => callDoThing(),
}]

This could even be done via custom events, which would allow the config to be JSON.

{
  "name": "Toggle debug logs",
  "type": "toggle",
  "eventName": "toggleDebugLogs"
}

I realise that this could be partially achieved with feature flags, but that's not really what feature flags are for, and it's much less user friendly.