Vercel Toolbar
Learn how to use the Vercel Toolbar to leave feedback, navigate through important dashboard pages, share deployments, utilize Draft Mode for previewing unpublished content, and Visual Editing for editing content in real-time.The Vercel Toolbar is a tool that assists in the iteration and development process. Through the toolbar, you can leave feedback on deployments with Comments, navigate through important dashboard pages, share deployments, utilize Draft Mode for previewing unpublished content, and Visual Editing for editing content in real-time.
The Vercel Toolbar provides the following features:
| Feature | Description |
|---|---|
| Comments | Leave feedback on your preview and production environment |
| Navigate to useful dashboard pages | Navigate to useful dashboard pages |
| Share your deployment | Share your deployment with others |
| Draft Mode | Use Draft Mode to preview unpublished content from your headless CMS |
| Feature Flags | Read and set feature flag overrides for your applications |
| Visual Editing | Use Visual Editing to edit content in real-time |
| Layout Shifts | Check for Layout Shifts in your deployment |
The toolbar appears on all preview deployments by default, and can be added to production or local environments using the @vercel/toolbar npm package. See using in production or locally for more information.
While logged into the toolbar, you can navigate to many of the project and deployment settings by:
- Selecting the Menu icon in the Vercel Toolbar (
☰) - Entering ⇧k (
cmd+shift+korctrl+shift+kon Windows). See the Using your own CMD + K feature section if your app already implements a k shortcut
Doing so will open a menu that allows you to navigate to useful pages and tools, such as:
| Feature | Description |
|---|---|
| Search | Quickly search the toolbar and access dashboard pages. |
| Quick branch access | View the current branch and commit hash. |
| Switch branches | Quickly switch between branches (on preview and production branches - not locally). |
| Layout shifts | Open the Layout Shift Tool to identify elements causing layout shifts. |
| Comments | Access the Comments panel to leave or view feedback. |
| View inbox | View all open comments. |
| Navigate to your team | Navigate to your team's dashboard. |
| Navigate to your project | Navigate to your project's dashboard. |
| Navigate to your deployment | Navigate to your deployment's dashboard. |
| Hide Toolbar | Hide the toolbar. |
| Disable for session | Disable the toolbar for the current session. |
| Set preferences | Set personal preferences for the toolbar. |
| Logout | Logout of the toolbar. |
If your app already has a k (cmd+k or ctrl+k on Windows) feature, you can still open your menu by:
- Adding
event.preventDefault()to the handler that toggles the menu, to prevent Vercel's Command Menu from opening with the k shortcut - Using ⇧k (
cmd+shift+korctrl+shift+kon Windows) to open Vercel's Command Menu
You can use the Share button in deployments with the Vercel Toolbar enabled, as well as in all preview deployments, to share your deployment's generated URL. To learn more, see Sharing Deployments.
If you're on an Enterprise team, you will be able to see who shared deployment URLs in your audit logs.
The Vercel Toolbar is a tool that assists in the iteration and development process. The toolbar's comments UI is not injected into the DOM when your preview deployment is tested in Google Lighthouse, or when visited by a bot or a headless browser.
To opt out of the toolbar during a preview deployment, you can do one of the following:
Use the toolbar's options menu:
- In the toolbar menu, select either the Hide Interface or Disable for Session options. This action will hide the toolbar in the current browser tab
- Open the preview deployment in a new tab to display the toolbar again
Use the x-vercel-skip-toolbar header to prevent interference with automated end-to-end tests:
- Add the
x-vercel-skip-toolbarheader to the request sent to the preview deployment URL - Optionally assign the value
1to the header. The presence of the header itself triggers the disabling of the toolbar
When logged into the Vercel Toolbar, you'll find a Preferences button in the options menu. In this menu, you can update the following settings:
| Setting | Description |
|---|---|
| Notifications | Set when you will receive notifications for comments in the deployment you're viewing |
| Theme | Select your color theme |
| Chrome Extension | Add Vercel's extension to your browser for easy attachment of screenshots to your comments |
| Layout Shift Detection | Enable or disable the Layout Shift Tool |
| Reset Onboarding | See tooltips above the comments toolbar explaining the functionality of each button |
Preview deployments
Preview Deployments allow you to preview changes to your app in a live deployment without merging those changes to your Git project's production branch.
Comments
Learn how to use Comments to leave feedback on your deployments.
Draft Mode
Vercel's Draft Mode enables you to view your unpublished headless CMS content on your site before publishing it.
Visual Editing
Learn how Visual Editing enhances content management for headless CMSs, enabling real-time editing, and seamless collaboration.
Was this helpful?