How to check if the page is rendered inside Canvas preview
how-toDeveloperNextJS page routerNextJS app routerCanvas
The solution is different for NextJS page router vs app router.
For the app router
Server components
If it is server component, every canvas component has context property, that has searchParams, which then you can pass into isIncontextEditingEnabled. For example:
import { isIncontextEditingEnabled,
} from "@uniformdev/canvas-next-rsc";
...
const isContextualEditing = isIncontextEditingEnabled({
searchParams: context.searchParams,
});
Client components
const { isContextualEditing } = useUniformContext();
// or
use import { useSearchParams } from 'next/navigation'// if you need other params
For the page router
You can use NextJS preview value, because Uniform Canvas is rendering the site via the preview mode:
https://nextjs.org/docs/pages/building-your-application/configuring/preview-mode
Please note that preview may be 'true' even outside Uniform Canvas, if you pass the preview NextJS cookies. For example, in Vercel. If you want to execute the code only in Uniform, use the example below:
// _context.previewData is the default NextJS data, which can be access in getStaticProps or getServerProps
const isUniformEditing = _context.previewData?.isUniformContextualEditing || false;
Another example for use in a component:
import { useUniformCurrentComposition } from '@uniformdev/canvas-react';
...
const { isContextualEditing } = useUniformCurrentComposition();
Last modified: May 26, 2025