Vercel Toolbar is available on all plans
The Vercel Toolbar appears on all Preview Deployments by default, and can be added to any Deployment using our npm package.
It enables your team to:
- Leave feedback on your production environment with Comments
- Navigate to useful dashboard pages
- Share your deployment
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 (
ctrl+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:
The layout shift tool gives you insight into any elements that may cause layout shifts on the page. The cause for a layout shift could be many things:
- Elements that change in height or width
- Custom font loading
- Media embeds (images, iframes, videos, etc.) that do not have set dimensions
- Dynamic content that's injected at runtime
- Animations that affect layout
To access the layout shift tool:
- Open the Command Menu
- Select the Layout Shifts option. If there are layout shifts detected on the page, a badge will display next to the option. The number inside the badge details the number of shifts detected
- The Layout Shifts popover will open on the right side of the screen. Here you can filter, inspect, and replay any detected layout shifts
Each shift details its impact, the responsible element, and a description of the shift if available. For example, "became taller when its text changed and shifted another element". Hovering over a layout shift will higlight the affected element. You can also replay layout shifts to get a better understanding of what's happening.
You can replay a layout shift by either:
- Double-clicking it
- Selecting it and using the Replay selected shift button
You can also select more than one shift and play them at the same time. You may want to do this to see the combined effect of element shifts on the page.
When you replay layout shifts, the Vercel Toolbar will become your stop button. Press this to stop replaying layout shifts. Alternatively, press the esc key.
You can also disable layout shift detection on a per element basis. You can do this by adding a
data-allow-shifts attribute to an element. This will affect the element and its descendants.
To disable the layout shift tool completely:
- Open the Command Menu
- Select Preferences
- Toggle the setting for Layout Shift Detection
If your app already has a k (
ctrl+k on Windows) feature, you can still open your menu by:
event.preventDefault()to the handler that toggles the menu, to prevent Vercel's Command Menu from opening with the k shortcut
- Using ⇧k (
ctrl+shift+kon Windows) to open Vercel's Command Menu
Deployments with the Vercel Toolbar enabled, and all Preview Deployments, have a Share button which can be used to share your Deployment's generated URL.
If you're on an Enterprise team, you will be able to see who shared deployment URLs in your audit logs.
Preview Deployments Overview
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.
Using Comments with Preview Deployments
This guide will help you get started with using Comments with your Vercel Preview Deployments.
Vercel's Draft Mode enables you to view your unpublished headless CMS content on your site before publishing it.