How to check if the page is rendered inside the Uniform Canvas editor

The solution is different for Next.js App Router vs Pages Router.

For App Router

Server components

If it is server component, every canvas component has context property, that has searchParams, which you can then 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 Pages Router

You can verify the state by checking the Preview State of your Next.js project, because Uniform Canvas is rendering the site via the 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 Next.js Preview Data object, which can be accessed in getStaticProps or getServerProps const isUniformEditing = _context.previewData?.isUniformContextualEditing || false;

Another example for use inside a component:

import { useUniformCurrentComposition } from '@uniformdev/canvas-react'; ... const { isContextualEditing } = useUniformCurrentComposition();

Or to check the precise editorial state:

import { useUniformContextualEditingState } from '@uniformdev/canvas-react'; ... const { isContextualEditing, previewMode } = useUniformContextualEditingState(); const isEditorPreviewMode = isContextualEditing || previewMode === 'editor' || previewMode === 'preview';