Create a brick

Render differently in admin and frontend

Detect whether a brick is rendering in the Admin interface or on the public frontend and render different UI accordingly.

Estimated time: 4 minRaw Markdown

What you'll build

In this how-to, you'll learn how to render different UI in a brick depending on where it is rendered:

inside the React Bricks Admin interface
on the public frontend site

This is useful when you want to show editing helpers in the admin, but cleaner output on the public site.

When this is useful

Sometimes a brick needs slightly different behavior in different environments.

For example, you may want to:

show an editing hint only in the admin
add padding to carousel images in admin so editors can focus a slide without triggering image selection
disable the click action on some UI element in admin
react differently when the full-screen preview is active

For Next.js App Router with RSC: `isAdmin()`

If you're using Next.js App Router with React Server Components, React Bricks provides the isAdmin() function.

It returns:

true if execution runs inside the Admin interface
false otherwise

Here is a simple example using a TextImage brick:

import { isAdmin, RichText, Text, types } from 'react-bricks/rsc'
 
interface TextImageProps {
  title: types.TextValue
  description: types.TextValue
}
 
const TextImage: types.Brick<TextImageProps> = ({ title, description }) => {
  const admin = isAdmin()
 
  return (
    <div className="container">
      {admin ? (
        <div className="mb-4 rounded-lg bg-amber-50 px-4 py-2 text-sm text-amber-800">
          You are editing this brick in the Admin interface.
        </div>
      ) : null}
 
      <Text
        propName="title"
        value={title}
        placeholder="Type a title..."
        renderBlock={({ children }) => (
          <h2 className="text-3xl font-extrabold">{children}</h2>
        )}
      />
 
      <RichText
        propName="description"
        value={description}
        placeholder="Type a description..."
        renderBlock={({ children }) => (
          <p className="text-lg text-slate-600">{children}</p>
        )}
      />
    </div>
  )
}

This pattern works well when the brick is a server component and you only need to know whether it is running in admin or not.

Docs reference: isAdmin()

For Next.js pages or Astro: `useAdminContext`

If you're using Next.js pages or Astro, you can use the useAdminContext hook instead.

Example usage:

const { isAdmin, previewMode } = useAdminContext()

The hook returns:

isAdmin: true in the Admin interface and false on the public frontend
previewMode: true when the full-screen preview is active in the Admin interface

Here is an example:

import { RichText, Text, types, useAdminContext } from 'react-bricks/frontend'
 
interface TextImageProps {
  title: types.TextValue
  description: types.TextValue
}
 
const TextImage: types.Brick<TextImageProps> = ({ title, description }) => {
  const { isAdmin, previewMode } = useAdminContext()
 
  return (
    <div className="container">
      {isAdmin && !previewMode ? (
        <div className="mb-4 rounded-lg bg-sky-50 px-4 py-2 text-sm text-sky-800">
          You are editing this brick in the Admin interface.
        </div>
      ) : null}
 
      <Text
        propName="title"
        value={title}
        placeholder="Type a title..."
        renderBlock={({ children }) => (
          <h2 className="text-3xl font-extrabold">{children}</h2>
        )}
      />
 
      <RichText
        propName="description"
        value={description}
        placeholder="Type a description..."
        renderBlock={({ children }) => (
          <p className="text-lg text-slate-600">{children}</p>
        )}
      />
    </div>
  )
}

In this example:

the helper message is shown in the admin
it is hidden in full-screen preview mode
it is also hidden on the public frontend

Docs reference: useAdminContext

Which one should you use?

Use:

isAdmin() for Next.js App Router with react-bricks/rsc
useAdminContext() for Next.js pages or Astro

So the choice depends on the React Bricks package and rendering model you are using.

A simple rule of thumb

If your brick is a server component in a Next.js App Router project, use isAdmin().

If your brick is using the hook-based environment, use useAdminContext().

Your brick can now render differently in admin and frontend.