Common Use Cases

Content-Only Editing

Allow content editing while preventing structural changes:

tsx
Copy code
1<UIBuilder
2  allowPagesCreation={false}    // Lock page structure
3  allowPagesDeletion={false}    // Prevent accidental page loss
4  allowVariableEditing={true}   // Allow content variable updates
5  componentRegistry={myComponentRegistry}
6/>

Use case: Content teams updating copy, images, and variable content without changing page layouts.

Production Preview Mode

Lock down all structural changes:

tsx
Copy code
1<UIBuilder
2  allowVariableEditing={false}  // Lock system variables
3  allowPagesCreation={false}    // No new pages
4  allowPagesDeletion={false}    // No page deletion
5  initialLayers={templatePages}
6  initialVariables={systemVariables}
7  componentRegistry={myComponentRegistry}
8/>

Use case: Previewing templates in production with system-controlled variables.

Role-Based Access Control

Different permissions based on user roles:

tsx
Copy code
1function RoleBasedEditor({ user, template }) {
2  const canEditVariables = user.role === 'admin' || user.role === 'developer';
3  const canManagePages = user.role === 'admin';
4
5  return (
6    <UIBuilder
7      allowVariableEditing={canEditVariables}
8      allowPagesCreation={canManagePages}
9      allowPagesDeletion={canManagePages}
10      initialLayers={template.pages}
11      initialVariables={template.variables}
12      componentRegistry={myComponentRegistry}
13    />
14  );
15}

Variable Binding in Templates

When creating templates with variable references, use the correct format:

tsx
Copy code
1// ✅ Correct: Variable binding in component props
2const templateLayer: ComponentLayer = {
3  id: "title",
4  type: "span",
5  name: "Title",
6  props: {
7    className: "text-2xl font-bold",
8    children: { __variableRef: "pageTitle" }  // Correct format
9  },
10  children: []
11};
12
13// ❌ Incorrect: Variable binding directly in children
14const badTemplate: ComponentLayer = {
15  id: "title",
16  type: "span",
17  name: "Title",
18  props: {
19    className: "text-2xl font-bold"
20  },
21  children: { __variableRef: "pageTitle" }  // Wrong - causes TypeScript errors
22};

Key points:

• Variable references go in the props object
• Use __variableRef (without quotes) as the property name
• The value is the variable ID as a string
• Set children: [] when using variable binding

Additional Examples

Fixed Pages Example

See the immutable pages example that demonstrates locked page structure:

• Live Demo: /examples/editor/immutable-pages
• Implementation: Uses allowPagesCreation={false} and allowPagesDeletion={false}
• What's locked: Page creation and deletion
• What works: Content editing, component manipulation, theme changes

Variable Read-Only Example

See the immutable bindings example that demonstrates locked variables:

• Live Demo: /examples/editor/immutable-bindings
• Implementation: Uses allowVariableEditing={false}
• What's locked: Variable creation, editing, and deletion
• What works: Variable binding in props panel, visual component editing

What's Still Available in Read-Only Mode

Even with restrictions enabled, users can still:

✅ Visual Component Editing: Add, remove, and modify components on the canvas
✅ Props Panel: Configure component properties and bind to existing variables
✅ Appearance Panel: Modify themes and styling
✅ Layer Navigation: Select and organize components in the layers panel
✅ Undo/Redo: Full history navigation
✅ Code Generation: Export React code

When to Use LayerRenderer Instead

For pure display without any editing interface, use LayerRenderer:

tsx
Copy code
1import LayerRenderer from '@/components/ui/ui-builder/layer-renderer';
2
3function DisplayOnlyPage({ pageData, variables, userValues }) {
4  return (
5    <LayerRenderer
6      page={pageData}
7      componentRegistry={myComponentRegistry}
8      variables={variables}
9      variableValues={userValues}  // Runtime data injection
10    />
11  );
12}

Choose LayerRenderer when:

• No editing interface needed
• Smaller bundle size required
• Better performance for display-only scenarios
• Rendering with dynamic data at runtime

Choose restricted UIBuilder when:

• Some editing capabilities needed
• Code generation features required
• Visual interface helps with content understanding
• Fine-grained permission control needed

Implementation Pattern

tsx
Copy code
1function ConfigurableEditor({ 
2  template, 
3  user, 
4  environment 
5}) {
6  const permissions = {
7    allowVariableEditing: environment !== 'production' && user.canEditVariables,
8    allowPagesCreation: user.role === 'admin',
9    allowPagesDeletion: user.role === 'admin'
10  };
11
12  return (
13    <UIBuilder
14      {...permissions}
15      initialLayers={template.pages}
16      initialVariables={template.variables}
17      componentRegistry={myComponentRegistry}
18      persistLayerStore={environment === 'development'}
19    />
20  );
21}

Best Practices

Security Considerations

• Validate data server-side: Client-side restrictions are for UX, not security
• Sanitize inputs: Always validate and sanitize layer data and variables
• Use immutable bindings: For system variables that must never change
• Implement proper authentication: Control access at the application level

User Experience

• Provide clear feedback: Show users what's restricted and why
• Progressive permissions: Unlock features as users gain trust/experience
• Contextual help: Explain restrictions in context
• Consistent behavior: Apply restrictions predictably across the interface

Performance

• Use LayerRenderer for display-only: Smaller bundle, better performance
• Cache configurations: Avoid re-computing permissions on every render
• Optimize initial data: Only load necessary variables and pages
• Consider lazy loading: Load restricted features only when needed