[Feature Request] Add defaultBreakpoint option to Live Preview configuration

[Exia081]

Describe the Bug.

Description

Currently, the LivePreviewConfig does not support setting a default breakpoint for the Live Preview iframe. When users configure multiple device breakpoints, there's no way to specify which breakpoint should be selected by default when opening the Live Preview panel.

Current Behavior

When Live Preview is opened, Payload CMS seems to default to the first breakpoint in the breakpoints array or the responsive view. Users have no control over which breakpoint is displayed by default.

Proposed Enhancement

Add a defaultBreakpoint option to the LivePreviewConfig type that allows developers to specify which breakpoint should be active by default.

Proposed API

export type LivePreviewConfig = {
  breakpoints?: {
    height: number | string;
    label: string;
    name: string;
    width: number | string;
  }[];
  defaultBreakpoint?: string; // 👈 New option: should match a breakpoint's `name`
  url?: ((args: {
    collectionConfig?: SanitizedCollectionConfig;
    data: Record<string, any>;
    globalConfig?: SanitizedGlobalConfig;
    locale: Locale;
    payload: Payload;
    req: PayloadRequest;
  }) => Promise<string> | string) | string;
};

Example Usage

{
  slug: 'daily-inspiration',
  admin: {
    livePreview: {
      url: ({ data }) => `${process.env.PREVIEW_URL}?id=${data.id}`,
      defaultBreakpoint: 'iphone17ProMax', // Set default to largest device
      breakpoints: [
        {
          label: 'iPhone SE',
          name: 'iphoneSE',
          width: 375,
          height: 667,
        },
        {
          label: 'iPhone 17 Pro Max',
          name: 'iphone17ProMax',
          width: 440,
          height: 956,
        },
        // ... more breakpoints
      ],
    },
  },
}

Use Case

This feature would be particularly useful when:

1. Mobile-first development: Developers want to default to a specific mobile device size
2. Design specifications: Projects have a primary target device (e.g., iPhone 15 Pro)
3. Content editor workflow: Editors primarily work with a specific viewport size
4. Multi-device support: Teams want to show the most relevant device for their user base by default

Current Workaround

The only workaround is to place the desired default breakpoint as the first item in the breakpoints array, but this affects the order of breakpoint buttons in the UI, which may not be the desired user experience.

Additional Context

• Payload CMS Version: 3.54.0
• Related Type Definition: LivePreviewConfig in payload/dist/config/types.d.ts

This enhancement would provide better control over the Live Preview experience without breaking existing configurations (since it would be an optional field with a sensible default).

Reproduction Steps

{
  slug: 'my-collections',
  admin: {
    livePreview: {
      url: ({ data }) => `${process.env.PREVIEW_URL}?id=${data.id}`,
      defaultBreakpoint: 'iphone17ProMax', // Set default to largest device
      breakpoints: [
        {
          label: 'iPhone SE',
          name: 'iphoneSE',
          width: 375,
          height: 667,
        },
        {
          label: 'iPhone 17 Pro Max',
          name: 'iphone17ProMax',
          width: 440,
          height: 956,
        },
        // ... more breakpoints
      ],
    },
  },
}

Environment Info

Payload CMS Version: 3.61.1
Related Type Definition: LivePreviewConfig in payload/dist/config/types.d.ts

[paulpopus]

Good idea, I moved this to a discussion instead though