Knowledge Base/How to check if the page is rendered inside Canvas preview

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.

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: {}, });
const { isContextualEditing } = useUniformContext(); // or use import { useSearchParams } from 'next/navigation'// if you need other params

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: January 6, 2025