Builder Guide

Master the Irresistible visual builder to create applications faster than ever before.

Overview

The Irresistible Builder is a powerful visual development environment that combines:

• Visual editing with drag-and-drop components
• Code editing with full syntax highlighting
• AI assistance for generating and modifying code
• Real-time preview of your changes
• Collaboration tools for team development

Getting Started with the Builder

Accessing the Builder

1. From your dashboard, click on any project
2. Click the “Open in Builder” button
3. Or use the CLI: irresistible open my-project

Builder Interface

┌─────────────────────────────────────────────────────┐
│  File Tree │     Code Editor    │   Preview/Output   │
│            │                     │                    │
│  Components│  <YourCode />       │   Live Preview     │
│  Routes    │                     │                    │
│  Assets    │                     │                    │
│            │                     │                    │
└────────────┴─────────────────────┴────────────────────┘
                    AI Chat Panel

Core Features

1. File Management

Creating Files

• Right-click in the file tree → New File
• Use keyboard shortcut: Cmd/Ctrl + N
• Or ask AI: “Create a new component called Header”

File Operations

• Rename: Right-click → Rename
• Delete: Right-click → Delete
• Move: Drag and drop files
• Search: Cmd/Ctrl + P for quick open

2. Code Editor

Features

• Syntax highlighting for 50+ languages
• IntelliSense and autocomplete
• Multi-cursor editing
• Code folding
• Bracket matching
• Git integration

Keyboard Shortcuts

• Cmd/Ctrl + S: Save file
• Cmd/Ctrl + Z: Undo
• Cmd/Ctrl + Shift + Z: Redo
• Cmd/Ctrl + F: Find
• Cmd/Ctrl + H: Find and replace
• Cmd/Ctrl + /: Toggle comment
• Alt + Up/Down: Move line

3. Visual Editor

Component Library Drag and drop from our component library:

• Layout components (Grid, Flex, Container)
• Form elements (Input, Button, Select)
• Data display (Table, Card, List)
• Navigation (Menu, Tabs, Breadcrumb)

Styling

• Visual style editor
• Tailwind classes
• Custom CSS
• Theme variables

Properties Panel

• Edit component props
• Bind data
• Add event handlers
• Configure animations

4. AI Assistant

Using AI Effectively

Code Generation

"Create a responsive navigation menu with dropdown support"
"Add a contact form with email validation"
"Generate a data table with sorting and filtering"

Code Modification

"Make this component responsive"
"Add error handling to this function"
"Optimize this code for performance"

Debugging

"Why is this component not rendering?"
"Fix the TypeScript errors in this file"
"Add console logs for debugging"

Best Practices for AI Prompts

1. Be specific about requirements
2. Mention the framework/library
3. Specify styling preferences
4. Include error handling needs

5. Live Preview

Preview Modes

• Desktop: Default desktop view
• Tablet: iPad-sized preview
• Mobile: iPhone-sized preview
• Custom: Set custom dimensions

Hot Reload

• Changes appear instantly
• State is preserved
• Error boundaries prevent crashes

DevTools

• Console logs
• Network requests
• Component inspector
• Performance metrics

Advanced Features

Component Creation

Using the Component Wizard

1. Click “New Component” button
2. Choose component type
3. Configure props
4. Select styling approach
5. Generate component

Component Templates

// Function Component
export default function MyComponent({ prop1, prop2 }) {
  return (
    <div>
      {/* Your JSX here */}
    </div>
  );
}

// Class Component (React)
export default class MyComponent extends React.Component {
  render() {
    return <div>{/* Your JSX here */}</div>;
  }
}

// Svelte Component
<script>
  export let prop1;
  export let prop2;
</script>

<div>
  <!-- Your markup here -->
</div>

<style>
  /* Your styles here */
</style>

Data Binding

State Management

// React
const [value, setValue] = useState('');

// Svelte
let value = '';

// Vue
const value = ref('');

Two-way Binding

<!-- Svelte -->
<input bind:value={inputValue} />

<!-- Vue -->
<input v-model="inputValue" />

<!-- React (manual) -->
<input 
  value={inputValue} 
  onChange={(e) => setInputValue(e.target.value)} 
/>

API Integration

Fetching Data

// Using AI: "Create a function to fetch user data from /api/users"

async function fetchUsers() {
  try {
    const response = await fetch('/api/users');
    if (!response.ok) throw new Error('Failed to fetch');
    return await response.json();
  } catch (error) {
    console.error('Error fetching users:', error);
    return [];
  }
}

Real-time Data

// WebSocket connection
const ws = new WebSocket('wss://api.irresistible.dev/live');

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  updateUI(data);
};

Deployment from Builder

Quick Deploy

1. Click the “Deploy” button
2. Select environment (staging/production)
3. Review changes
4. Click “Deploy Now”

Deploy Settings

// irresistible.config.js
export default {
  deploy: {
    staging: {
      url: 'https://staging.myapp.com',
      env: {
        API_URL: 'https://api-staging.myapp.com'
      }
    },
    production: {
      url: 'https://myapp.com',
      env: {
        API_URL: 'https://api.myapp.com'
      }
    }
  }
}

Collaboration Features

Live Collaboration

Inviting Team Members

1. Click “Share” button
2. Enter email addresses
3. Set permissions (view/edit)
4. Send invitations

Real-time Features

• See team members’ cursors
• Live code changes
• Shared terminal
• Voice/video chat
• Comments and annotations

Version Control

Git Integration

• Commit changes
• Push/pull from remote
• Branch management
• Merge conflicts resolution

Using Git in Builder

# In the integrated terminal
git add .
git commit -m "Add new feature"
git push origin main

Tips and Tricks

Performance Optimization

1. Use Code Splitting

   const LazyComponent = lazy(() => import('./LazyComponent'));

2. Optimize Images

   • Use WebP format
   • Lazy load images
   • Responsive images

3. Minimize Bundle Size

   • Tree shaking
   • Dynamic imports
   • Analyze bundle

Debugging

1. Use Browser DevTools

   • Set breakpoints
   • Inspect elements
   • Monitor network

2. AI Debugging Assistant

   "Add error boundaries to catch React errors"
   "Log all API requests and responses"
   "Add performance timing to this function"

Keyboard Shortcuts

Essential Shortcuts

• Cmd/Ctrl + K: Command palette
• Cmd/Ctrl + B: Toggle sidebar
• Cmd/Ctrl + J: Toggle terminal
• Cmd/Ctrl + Shift + P: AI chat
• Cmd/Ctrl + D: Duplicate line
• Cmd/Ctrl + L: Select line

Troubleshooting

Common Issues

Preview Not Updating

• Check for syntax errors
• Clear browser cache
• Restart dev server

AI Not Responding

• Check internet connection
• Verify API limits
• Try simpler prompts

Performance Issues

• Close unused tabs
• Disable extensions
• Use Chrome/Edge for best performance

Next Steps

• Explore AI Features in depth
• Learn about Deployment options
• Read API Reference
• Browse Examples for inspiration