PrettyDesigner

Unified visual customization for programs, projects, and resources

Overview

PrettyDesigner provides a unified interface for customizing the visual appearance of Programs, Projects, Resources, and Insight Types. Features real-time previews of PrettyCard, HeroBanner, and ScopeJump components.

Key Features

Real-time preview of all visual components
Color, icon, and image customization
Banner height adjustment with presets
Template placeholders for dynamic titles

Examples

Inline Editor

Use inline when you have space for the full component. Select a target type and customize its appearance.

Beta Testing Program

Help us improve our products

ShortTall

1. Icon

3. Card image

2. Accent Color

4. Alt Banner image

Title

Description

Beta Testing Program

Help us improve our products

12Active

5Pending

Beta Testing Program

Launcher Pattern

Use the launcher in space-constrained contexts like sheets, sidebars, and property panels.

Click the button to open PrettyDesigner in a dialog. Changes are applied immediately.

Disabled

Props Reference

PrettyDesigner

Prop	Type	Default	Description
`value`	`DesignConfig`	`required`	Current design configuration
`onChange`	`(config: DesignConfig) => void`	`required`	Callback when configuration changes
`targetType`	`'program' \| 'project' \| 'resource' \| 'insightType'`	`required`	Type of item being customized
`targetName`	`string`	`required`	Name of the item for preview
`targetDescription`	`string`	`-`	Optional description for preview
`programId`	`string`	`-`	Program ID for image library access
`disabled`	`boolean`	`false`	Disable all controls

PrettyDesignerLauncher

Prop	Type	Default	Description
`value`	`DesignConfig \| null`	`required`	Current design configuration (null if not configured)
`onChange`	`(config: DesignConfig) => void`	`required`	Callback when configuration changes
`targetType`	`DesignTargetType`	`required`	Type of item being customized
`targetName`	`string`	`required`	Name of the item for preview
`targetDescription`	`string`	`-`	Optional description for preview
`programId`	`string`	`-`	Program ID for image library access
`disabled`	`boolean`	`false`	Disable all controls
`className`	`string`	`-`	Additional CSS classes for the button

Usage

import { PrettyDesigner, PrettyDesignerLauncher, createDefaultDesignConfig } from '@/ui/components';
import type { DesignConfig } from '@/ui/components';

// Inline editor - use when you have space for the full component
const [config, setConfig] = useState<DesignConfig>(() =>
  createDefaultDesignConfig('program')
);

<PrettyDesigner
  value={config}
  onChange={setConfig}
  targetType="program"
  targetName="My Program"
  targetDescription="Beta testing for new features"
/>

// Launcher pattern - button that opens dialog
// Use in sheets, sidebars, property panels where space is limited
const [launcherConfig, setLauncherConfig] = useState<DesignConfig | null>(null);

<PrettyDesignerLauncher
  value={launcherConfig}
  onChange={setLauncherConfig}
  targetType="trait"
  targetName="Premium Tier"
/>

// With FormCustomField in FormBlock
<FormCustomField
  name="design"
  label=""
  render={({ field }) => (
    <PrettyDesignerLauncher
      value={field.value}
      onChange={field.onChange}
      targetType="trait-type"
      targetName={currentName}
    />
  )}
/>

Prop

Type

Default

Description

value

DesignConfig

required

Current design configuration

onChange

(config: DesignConfig) => void

required

Callback when configuration changes

targetType

'program' | 'project' | 'resource' | 'insightType'

required

Type of item being customized

targetName

string

required

Name of the item for preview

targetDescription

string

-

Optional description for preview

programId

string

-

Program ID for image library access

disabled

boolean

false

Disable all controls

Prop

Type

Default

Description

value

DesignConfig | null

required

Current design configuration (null if not configured)

onChange

(config: DesignConfig) => void

required

Callback when configuration changes

targetType

DesignTargetType

required

Type of item being customized

targetName

string

required

Name of the item for preview

targetDescription

string

-

Optional description for preview

programId

string

-

Program ID for image library access

disabled

boolean

false

Disable all controls

className

string

-

Additional CSS classes for the button

import { PrettyDesigner, PrettyDesignerLauncher, createDefaultDesignConfig } from '@/ui/components'; import type { DesignConfig } from '@/ui/components'; // Inline editor - use when you have space for the full component const [config, setConfig] = useState<DesignConfig>(() => createDefaultDesignConfig('program') ); <PrettyDesigner value={config} onChange={setConfig} targetType="program" targetName="My Program" targetDescription="Beta testing for new features" /> // Launcher pattern - button that opens dialog // Use in sheets, sidebars, property panels where space is limited const [launcherConfig, setLauncherConfig] = useState<DesignConfig | null>(null); <PrettyDesignerLauncher value={launcherConfig} onChange={setLauncherConfig} targetType="trait" targetName="Premium Tier" /> // With FormCustomField in FormBlock <FormCustomField name="design" label="" render={({ field }) => ( <PrettyDesignerLauncher value={field.value} onChange={field.onChange} targetType="trait-type" targetName={currentName} /> )} />