Beta Testing Program
Help us improve our products
12Active
5Pending
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
Interactive Demo
Select a target type and customize its appearance. Changes are reflected in real-time across all preview components.
Beta Testing Program
Help us improve our products
ShortTall
Beta Testing Program
Props Reference
| 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 |
Usage
import { PrettyDesigner, createDefaultDesignConfig } from '@/ui/components';
import type { DesignConfig } from '@/ui/components';
// Initialize with defaults for target type
const [config, setConfig] = useState<DesignConfig>(() =>
createDefaultDesignConfig('program')
);
// Basic usage
<PrettyDesigner
value={config}
onChange={setConfig}
targetType="program"
targetName="My Program"
targetDescription="Beta testing for new features"
/>
// For projects (nested within a program)
<PrettyDesigner
value={projectConfig}
onChange={setProjectConfig}
targetType="project"
targetName="Mobile App Testing"
programId="program-123"
/>
// Disabled state (e.g., during save)
<PrettyDesigner
value={config}
onChange={setConfig}
targetType="resource"
targetName="User Guide"
disabled
/>