WIDGET BUILDER GUIDE

Ecosistema completo para organización y gestión de contenido con interfaces espaciales

🚀 Widget Builder Guide

Overview

The Widget Builder is a powerful, AI-enhanced tool for creating custom widgets in GoGrab Space. It provides three distinct creation modes to accommodate different workflows and skill levels.

Creation Modes

1. 🤖 AI Generate Mode

The fastest way to create widgets. Simply describe what you want in plain English and let AI generate the code.

How to use:

  1. Select "AI Generate" from the creation mode selector
  2. Type a description of your widget (e.g., "Create a modern contact form with name, email, and message fields")
  3. Click "Generate with AI"
  4. Review and customize the generated widget
  5. Save

Example prompts:

AI generates:

2. 📦 From Component Mode

Start from an existing embeddable component and customize its properties.

How to use:

  1. Select "From Component" from the creation mode selector
  2. Browse the component palette
  3. Select a base component
  4. Configure properties using the visual editor
  5. Give your widget a name and description
  6. Save

Benefits:

3. 💻 Custom Code Mode

Full control with HTML, CSS, and TypeScript editors.

How to use:

  1. Select "Custom Code" from the creation mode selector
  2. Optionally select a starting variant
  3. Write or paste your code
  4. Preview in real-time
  5. Save

Best for:

Property Types

The Widget Builder supports these property types:

Type UI Control Example
string Text input Labels, placeholders
number Number input Sizes, counts
boolean Toggle switch Enabled/disabled states
select Dropdown Predefined options
color Color picker Theme colors
object JSON editor Complex configuration

Variant Management

Variants allow you to create different configurations of the same widget.

Creating Variants

  1. Save your base widget first
  2. Go to the "Variants" tab
  3. Click "Add Variant"
  4. Configure:
    • Name: Descriptive name (e.g., "Primary Button", "Dark Theme")
    • Description: What makes this variant unique
    • Properties: Override specific properties

Using Variants

Variants are automatically available in:

Best Practices

1. Use Theme Variables

Always use CSS variables from the theme system:

// ✅ Good
background: var(--ux-surface);
color: var(--ux-text-primary);
border-radius: var(--ux-radius-lg);

// ❌ Bad
background: #1e293b;
color: #f1f5f9;

2. Make Components Accessible

3. Keep Templates Clean

Use Angular control flow syntax:

<!-- ✅ Good -->
@if (isLoading()) {
  <div class="loader">Loading...</div>
}

@for (item of items(); track item.id) {
  <div>{{ item.name }}</div>
}

<!-- ❌ Bad -->
<div *ngIf="isLoading()" class="loader">Loading...</div>

4. Define Clear Properties

Each property should have:

Integration with Module System

Widgets created in the Widget Builder are automatically registered with the EmbeddableRegistryService, making them available:

  1. In the visual editor - Drag & drop onto canvas
  2. In modules - Reference in module manifests
  3. In code - Import and use programmatically

Example: Using in a Module

const manifest: ModuleManifest = {
  id: 'my-module',
  name: 'My Module',
  embeddableComponents: [
    {
      id: 'custom-contact-form', // Your widget ID
      // ... widget config
    }
  ]
};

Troubleshooting

AI Generation Issues

Problem: AI service unavailable Solution:

Problem: Generated code has errors Solution:

Preview Not Working

Problem: Preview is blank Solution:

Variants Not Saving

Problem: Variants don't appear after save Solution:

Keyboard Shortcuts

Shortcut Action
Ctrl/Cmd + S Save widget
Ctrl/Cmd + Enter Generate with AI
Escape Close modal
Tab Navigate form fields

Related Documentation

Last Updated: December 4, 2025