LaraBuilder Visual Editor

LaraBuilder is LaraDashboard's powerful drag-and-drop visual editor for creating pages, posts, and email templates without writing code. This guide covers everything from basic usage to creating custom blocks.

Overview#

What is LaraBuilder?#

LaraBuilder is a React-based visual content builder that provides:

• Drag-and-Drop Interface - Intuitive block placement
• Real-time Preview - See changes instantly
• Responsive Design - Preview across device sizes
• Undo/Redo - Full history support
• Custom Blocks - Extensible block system

Use Cases#

Context	Description
Pages	Landing pages, about pages, contact
Posts	Rich blog posts with complex layouts
Email Templates	HTML emails with visual design
Campaigns	Marketing content with CTAs

Getting Started#

Accessing the Builder#

1. Create or edit a post/page
2. Click "Use Visual Builder"
3. The builder interface loads

Builder Interface#

┌─────────────────────────────────────────────────────────────────────────┐
│  [Save] [Preview] [Settings]           [Undo] [Redo] [Desktop/Mobile]   │
├─────────────────┬───────────────────────────────────────────────────────┤
│                 │                                                       │
│  BLOCKS         │   CANVAS                                              │
│                 │                                                       │
│  ┌───────────┐  │   ┌─────────────────────────────────────────────┐    │
│  │ Layout    │  │   │                                             │    │
│  ├───────────┤  │   │   [Drop blocks here]                       │    │
│  │ Text      │  │   │                                             │    │
│  ├───────────┤  │   └─────────────────────────────────────────────┘    │
│  │ Media     │  │                                                       │
│  ├───────────┤  │   ┌─────────────────────────────────────────────┐    │
│  │ Buttons   │  │   │   Section Block                             │    │
│  ├───────────┤  │   │   ┌─────────┐ ┌─────────┐ ┌─────────┐      │    │
│  │ Forms     │  │   │   │ Column  │ │ Column  │ │ Column  │      │    │
│  ├───────────┤  │   │   └─────────┘ └─────────┘ └─────────┘      │    │
│  │ Advanced  │  │   └─────────────────────────────────────────────┘    │
│  └───────────┘  │                                                       │
│                 │                                                       │
├─────────────────┴───────────────────────────────────────────────────────┤
│  SETTINGS PANEL (appears when block selected)                           │
│  ┌─────────────────────────────────────────────────────────────────┐   │
│  │  Content │ Style │ Advanced                                     │   │
│  │  ─────────────────────────────────────────────────────────────  │   │
│  │  Text: [_______________]                                        │   │
│  │  Alignment: [Left] [Center] [Right]                            │   │
│  └─────────────────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────────────┘

Working with Blocks#

Adding Blocks#

1. Drag from Library - Drag block from sidebar to canvas
2. Click to Add - Click block to append to canvas
3. Copy/Paste - Duplicate existing blocks

Block Categories#

Layout Blocks#

Block	Description
Section	Container for other blocks
Columns	Multi-column layout (2, 3, 4 cols)
Container	Centered width container
Spacer	Vertical spacing
Divider	Horizontal separator

Text Blocks#

Block	Description
Heading	H1-H6 headers
Paragraph	Rich text content
Rich Text	Full WYSIWYG editor
Quote	Blockquote styling
List	Ordered/unordered lists

Media Blocks#

Block	Description
Image	Single image with options
Gallery	Image grid/carousel
Video	YouTube, Vimeo, self-hosted
Icon	Icon library selection
Logo	Site logo with link

Interactive Blocks#

Block	Description
Button	CTA buttons with styles
Link	Text links
Accordion	Collapsible content
Tabs	Tabbed content panels
Modal	Popup content

Form Blocks#

Block	Description
Form	Contact/subscribe form
Input	Text input field
Textarea	Multi-line input
Select	Dropdown selection
Checkbox	Boolean input

Advanced Blocks#

Block	Description
HTML	Custom HTML code
Code	Syntax highlighted code
Embed	External embeds
Shortcode	Dynamic shortcodes

Configuring Blocks#

Click any block to open its settings panel:

Content Tab#

Edit the block's content:

• Text content
• Images/media
• Links and URLs
• Dynamic variables

Style Tab#

Customize appearance:

• Colors (text, background, border)
• Typography (font, size, weight)
• Spacing (margin, padding)
• Borders (width, radius, style)
• Shadows and effects

Advanced Tab#

Advanced options:

• CSS classes
• Custom ID
• HTML attributes
• Visibility conditions
• Animation effects

Block Operations#

Action	Method
Select	Click on block
Move	Drag to reposition
Duplicate	Click duplicate icon or Ctrl+D
Delete	Click trash icon or Delete key
Copy	Ctrl+C
Paste	Ctrl+V

Keyboard Shortcuts#

Shortcut	Action
Ctrl/Cmd + S	Save
Ctrl/Cmd + Z	Undo
Ctrl/Cmd + Shift + Z	Redo
Ctrl/Cmd + D	Duplicate block
Delete	Delete selected block
Escape	Deselect block
↑ ↓	Navigate between blocks

Responsive Design#

Preview Modes#

Toggle between device views:

• Desktop (1200px+)
• Tablet (768px - 1199px)
• Mobile (< 768px)

Responsive Settings#

Many style options have per-breakpoint controls:

Padding:
  Desktop: 40px
  Tablet: 30px
  Mobile: 20px

Visibility Control#

Show/hide blocks per device:

• Show on desktop only
• Hide on mobile
• Custom visibility rules

Dynamic Content#

Variables#

Insert dynamic content using variables:

{{site_name}}
{{user.name}}
{{post.title}}
{{current_year}}

Conditional Content#

Show content based on conditions:

@if($user->isPremium())
  Premium content here
@else
  Regular content
@endif

Saving & Publishing#

Save Options#

Option	Description
Save Draft	Save without publishing
Publish	Save and make live
Schedule	Set future publish date

Design Storage#

Builder designs are stored as JSON:

{
  "blocks": [
    {
      "type": "section",
      "id": "abc123",
      "settings": {...},
      "children": [...]
    }
  ],
  "settings": {
    "theme": "default"
  }
}

HTML Output#

On save, JSON is rendered to HTML for frontend display.

Email Template Building#

Email Context#

When building email templates:

• Limited block selection (email-safe)
• Inline CSS output
• Table-based layouts
• Preview in email clients

Email-Safe Blocks#

• Header/Footer
• Text blocks
• Images
• Buttons (table-based)
• Columns (table-based)
• Dividers
• Spacers

Testing Emails#

1. Click Preview
2. Select Send Test Email
3. Enter recipient
4. Check in email client

Creating Custom Blocks#

Block Structure#

// app/Services/Builder/Blocks/CustomBlock.php

namespace App\Services\Builder\Blocks;

use App\Services\Builder\Block;

class CustomBlock extends Block
{
    public string $type = 'custom-block';
    public string $title = 'Custom Block';
    public string $icon = 'custom-icon';
    public string $category = 'advanced';

    public function getDefaultSettings(): array
    {
        return [
            'title' => 'Default Title',
            'content' => '',
            'style' => 'default',
        ];
    }

    public function getSettingsSchema(): array
    {
        return [
            [
                'name' => 'title',
                'label' => 'Title',
                'type' => 'text',
                'tab' => 'content',
            ],
            [
                'name' => 'content',
                'label' => 'Content',
                'type' => 'richtext',
                'tab' => 'content',
            ],
            [
                'name' => 'style',
                'label' => 'Style',
                'type' => 'select',
                'options' => [
                    'default' => 'Default',
                    'highlighted' => 'Highlighted',
                    'minimal' => 'Minimal',
                ],
                'tab' => 'style',
            ],
        ];
    }

    public function render(array $settings): string
    {
        return view('blocks.custom-block', $settings)->render();
    }
}

Registering Blocks#

// In service provider

use App\Services\Builder\BlockRegistryService;

public function boot()
{
    $registry = app(BlockRegistryService::class);

    $registry->register(new CustomBlock());
}

Block View Template#

{{-- resources/views/blocks/custom-block.blade.php --}}

<div class="custom-block custom-block--{{ $style }}">
    <h3 class="custom-block__title">{{ $title }}</h3>
    <div class="custom-block__content">
        {!! $content !!}
    </div>
</div>

Block React Component#

For advanced interactivity, create a React component:

// resources/js/lara-builder/blocks/CustomBlock.jsx

import React from 'react';
import { useBlock } from '../hooks/useBlock';

export default function CustomBlock({ block }) {
    const { settings, updateSettings } = useBlock(block);

    return (
        <div className={`custom-block custom-block--${settings.style}`}>
            <input
                value={settings.title}
                onChange={(e) => updateSettings({ title: e.target.value })}
                className="block-title-input"
            />
            <RichTextEditor
                value={settings.content}
                onChange={(content) => updateSettings({ content })}
            />
        </div>
    );
}

Hooks & Filters#

Builder Hooks#

use TorMorten\Eventy\Facades\Events as Eventy;

// Register custom blocks
Eventy::action('builder.register_blocks', function ($registry) {
    $registry->register(new MyCustomBlock());
});

// Filter available blocks
$blocks = Eventy::filter('builder.blocks', $blocks, $context);

// Before save
Eventy::action('builder.saving', function ($design, $post) {
    // Validate or transform
});

// After render
$html = Eventy::filter('builder.rendered_html', $html, $design);

Troubleshooting#

Builder Not Loading#

1. Clear browser cache
2. Check JavaScript console for errors
3. Verify assets are built: npm run build
4. Check for conflicting plugins

Blocks Not Rendering#

1. Verify block is registered
2. Check view template exists
3. Review render method for errors
4. Check permissions

Styles Not Applying#

1. Check CSS specificity
2. Verify Tailwind is configured
3. Rebuild assets
4. Clear view cache

Undo Not Working#

1. Check browser memory
2. Reduce design complexity
3. Save more frequently

Best Practices#

Design#

1. Start with a section block
2. Use columns for layout
3. Add spacers for breathing room
4. Maintain visual hierarchy
5. Test on all devices

Performance#

1. Optimize images before upload
2. Limit number of blocks
3. Use lazy loading for media
4. Minimize custom CSS

Accessibility#

1. Use proper heading hierarchy
2. Add alt text to images
3. Ensure sufficient color contrast
4. Test with screen readers

Next Steps#

• Content Management - Use builder for content
• Email Templates - Build email designs
• Module Development - Create custom blocks