Skip to content
VercelVercel
'; user_status_content.firstChild.appendChild(avatarContainer); } else { // Placeholder for LoggedOutUserMenu let loggedOutContainer = document.createElement('div'); // if LoggedOutUserMenu fallback let userBtn = document.createElement('button'); userBtn.style.width = "33px"; userBtn.style.height = "33px"; userBtn.style.display = "flex"; userBtn.style.alignItems = "center"; userBtn.style.justifyContent = "center"; userBtn.style.color = "var(--ds-gray-900)"; userBtn.style.border = "1px solid var(--ds-gray-300)"; userBtn.style.borderRadius = "100%"; userBtn.style.cursor = "pointer"; userBtn.style.background = "transparent"; userBtn.style.padding = "0"; // user icon ( from geist) let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.setAttribute('data-testid', 'geist-icon'); svg.setAttribute('height', '16'); svg.setAttribute('stroke-linejoin', 'round'); svg.setAttribute('style', 'color:currentColor'); svg.setAttribute('viewBox', '0 0 16 16'); svg.setAttribute('width', '16'); let path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); path.setAttribute('fill-rule', 'evenodd'); path.setAttribute('clip-rule', 'evenodd'); path.setAttribute('d', 'M7.75 0C5.95507 0 4.5 1.45507 4.5 3.25V3.75C4.5 5.54493 5.95507 7 7.75 7H8.25C10.0449 7 11.5 5.54493 11.5 3.75V3.25C11.5 1.45507 10.0449 0 8.25 0H7.75ZM6 3.25C6 2.2835 6.7835 1.5 7.75 1.5H8.25C9.2165 1.5 10 2.2835 10 3.25V3.75C10 4.7165 9.2165 5.5 8.25 5.5H7.75C6.7835 5.5 6 4.7165 6 3.75V3.25ZM2.5 14.5V13.1709C3.31958 11.5377 4.99308 10.5 6.82945 10.5H9.17055C11.0069 10.5 12.6804 11.5377 13.5 13.1709V14.5H2.5ZM6.82945 9C4.35483 9 2.10604 10.4388 1.06903 12.6857L1 12.8353V13V15.25V16H1.75H14.25H15V15.25V13V12.8353L14.931 12.6857C13.894 10.4388 11.6452 9 9.17055 9H6.82945Z'); path.setAttribute('fill', 'currentColor'); svg.appendChild(path); userBtn.appendChild(svg); loggedOutContainer.appendChild(userBtn); loggedOutContainer.style.display = 'flex'; loggedOutContainer.style.gap = '8px'; loggedOutContainer.style.alignItems = 'center'; user_status_content.firstChild.appendChild(loggedOutContainer); } })();
Menu

Managing with the Vercel Toolbar

Last updated March 26, 2026

Using the Vercel Toolbar, you can visualize and independently test your microfrontends so you can develop microfrontends in isolation. The Microfrontends panel of the toolbar shows all microfrontends that you have configured in microfrontends.json.

You can access it in all microfrontends that you have enabled the toolbar for.

This requires version 0.1.33 or newer of the @vercel/toolbar package.

View all microfrontends

In the Microfrontends panel of the toolbar shows all microfrontends that are available in that microfrontends group. By clicking on each microfrontend, you can see information such as the corresponding Vercel project or take action on the microfrontend.

Panel in the Toolbar showing all microfrontends.
Panel in the Toolbar showing all microfrontends.

Microfrontends zone indicator

Since multiple microfrontends can serve content on the same domain, it's easy to lose track of which application is serving that page. Use the Zone Indicator to display the name of the application and environment that the microfrontend is being served by whenever you visit any paths.

Indicator for which microfrontend served the current page.
Indicator for which microfrontend served the current page.

You find the Zone Indicator toggle at the bottom of the Microfrontends panel in the Vercel toolbar.

Routing overrides

While developing microfrontends, you often want to build and test just your microfrontend in isolation to avoid dependencies on other projects. Vercel will intelligently choose the environment or fallback based on what projects were built for your commit. The Vercel Toolbar will show you which environments microfrontend requests are routed to and allow you to override that decision to point to another environment.

  1. Open the microfrontends panel in the Vercel Toolbar.
  2. Find the application that you want to modify in the list of microfrontends.
  3. In the Routing section, choose the environment and branch (if applicable) that you want to send requests to.
  4. Select Reload Preview to see the microfrontend with the new values.

To undo the changes back to the original values, open the microfrontends panel and click Reset to Default.

Override the environment that microfrontend requests are routed to.
Override the environment that microfrontend requests are routed to.

Enable routing debug mode

You can enable debug headers on microfrontends responses to help debug issues with routing. In the Microfrontends panel in the Toolbar, click the Enable Debug Mode toggle at the bottom of the panel.

Was this helpful?

supported.