How to check if the page is rendered inside Canvas preview

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: {}, });

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();