LiveBuilder with Livewire Laravel

livebuilder-styler.blade.php

<div>
    <h2 class="text-xl font-bold mb-2">Styles</h2>

    {{-- Use the `x-data` directive to define the `edit` variable, which is used to toggle the visibility of the form. --}}
    <div x-data="{ edit: {{ $edit ? 'true' : 'false' }}, styles: {{ $styles }} }">
        {{-- Use the `x-show` directive to toggle the visibility of the form based on the value of the `edit` variable. --}}
        <form
            x-show="edit"
            wire:submit.prevent="updateStyles"
            x-cloak
        >
            {{-- Use the `x-model` directive to bind the form input values to the reactive properties in the component. --}}
            <div class="mb-4">
                <label
                    for="title-size"
                    class="block text-gray-700 text-sm font-bold mb-2"
                >
                    Title Size:
                </label>
                <input
                    type="number"
                    id="title-size"
                    class="form-control"
                    wire:model="styles.titleSize"
                    x-model="styles.titleSize"
                >
            </div>

            <div class="mb-4">
                <label
                    for="title-color"
                    class="block text-gray-700 text-sm font-bold mb-2"
                >
                    Title Color:
                </label>
                <input
                    type="color"
                    id="title-color"
                    class="form-control"
                    wire:model="styles.titleColor"
                    x-model="styles.titleColor"
                >
            </div>

            <div class="mb-4">
                <label
                    for="title-align"
                    class="block text-gray-700 text-sm font-bold mb-2"
                >
                    Title Alignment:
                </label>
                <select
                    id="title-align"
                    class="form-control"
                    wire:model="styles.titleAlign"
                    x-model="styles.titleAlign"
                >
                    <option value="left">Left</option>
                    <option value="center">Center</option>
                    <option value="right">Right</option>
                </select>
            </div>

            {{-- Other style options... --}}

            <button type="submit" class="btn btn-primary">Update Styles</button>
        </form>

           {{-- Use the `x-show` directive to toggle the visibility of the style preview based on the value of the `edit` variable. --}}
    <div x-show="!edit">
        <h3
            class="font-bold" x-bind:style="{
                fontSize: styles.titleSize + 'px',
                color: styles.titleColor,
                textAlign: styles.titleAlign,
                // Other styles...
            }"
        >
            Preview Title
        </h3>

        {{-- Other style previews... --}}

        <button
            type="button"
            @click="edit = true"
            class="btn btn-primary"
        >
            Edit Styles
        </button>
    </div>
</div>

livebuilder.blade.php

<div>
    <h2 class="text-xl font-bold mb-2">Sections</h2>

    <div x-data="{ edit: {{ $edit ? 'true' : 'false' }} }">
    <div>
        <button
            x-show="!edit"
            @click="edit = true"
            class="btn btn-primary"
        >
            Edit Sections
        </button>
    </div>

    {{-- Use the `x-show` directive to toggle the visibility of the form based on the value of the `edit` variable. --}}
    <form
        x-show="edit"
        wire:submit.prevent="updateSections"
        x-cloak
    >
        {{-- Use the `x-model` directive to bind the form input values to the reactive properties in the component. --}}
        @foreach ($sections as $index => $section)
            <div class="form-group">
                <label for="title-{{ $index }}">Title:</label>
                <input
                    type="text"
                    id="title-{{ $index }}"
                    class="form-control"
                    wire:model="sections.{{ $index }}.title"
                    x-model="sections.{{ $index }}.title"
                >
            </div>

            <div class="form-group">
                <label for="description-{{ $index }}">Description:</label>
                <textarea
                    id="description-{{ $index }}"
                    class="form-control"
                    wire:model="sections.{{ $index }}.description"
                    x-model="sections.{{ $index }}.description">
                </textarea>
            </div>
                   <div class="form-group">
            <label for="image-{{ $index }}">Image:</label>
            <input
                type="file"
                id="image-{{ $index }}"
                class="form-control"
                wire:model="sections.{{ $index }}.image"
                x-model="sections.{{ $index }}.image"
            >
        </div>

        @livewire('live-builder-styler', ['styles' => $section])

        <button type="submit" class="btn btn-primary">Update Section</button>
    @endforeach

    <button type="button" @click="edit = false" class="btn btn-secondary">Cancel</button>
    <button type="submit" class="btn btn-primary">Update Sections</button>
</form>

{{-- Use the `x-inner-html` directive to render the `LiveBuilder` component HTML in the view. --}}
<div x-data="{}" x-inner-html="{{ $templateHtml }}"></div>
</div>

LiveBuilder.md

This is an experimantation with CHATGPT

the idea is to make a livebuilder with livewire

LiveBuilder.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class LiveBuilder extends Component
{
    // Reactive properties to store the sections and styles.
    public $sections = [
        [
            'title' => 'Section 1',
            'description' => 'This is the first section.', 
            'image' => 'placeholder-150x150.jpg' , 
            'grid' => 'grid gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'
            'titleSize' => '1.5rem',
            'titleColor' => 'text-black', 
            'titleAlign' => 'left', 
            'titleWidth' => 'bold'
            'descriptionSize' => '1rem',
            'descriptionColor' => '#666',
            'descriptionAlign' => 'left',
            'position' => 'left',  // and more options 
        ]
    ];
    public $edit;

    // Use the `updated` lifecycle hook to generate the template HTML when the sections or styles change.
    public function updated($field)
    {
        if ($field === 'sections' || $field === 'styles') {
            $this->generateTemplate();
        }
    }

    // Generate the template HTML and store it in a reactive property.
    public function generateTemplate()
    {
        $this->templateHtml = view('livewire.template')
            ->with('sections', $this->sections)
            ->with('edit', $this->edit)
            ->render();
    }

    // Use the `addSection` method to add a new section to the template.
    public function addSection()
    {
        $this->sections[] = [
            'title' => '',
            'description' => '',
            'image' => '',
        ];
    }

    // Use the `updateSection` method to update an existing section on the template.
    public function updateSection($index)
    {
        // Validate the form input.
        $this->validate([
            "sections.{$index}.title" => 'required',
            "sections.{$index}.description" => 'required',
            "sections.{$index}.image" => 'image|mimes:jpeg,png,jpg,gif,svg|max:2048',
            // Other section properties here...
        ]);

        // Set the edit property to false to exit edit mode.
        $this->edit = false;
    }

    // Use the `removeSection` method to remove a section from the template.
    public function removeSection($index)
    {
        unset($this->sections[$index]);
    }

    public function render()
    {
        return view('livewire.livebuilder');
    }
}

LiveBuilderStyler.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class LiveBuilderStyler extends Component
{
    // Reactive property to store the styles for the current section.
    public $styles;

    // Use the `updated` lifecycle hook to generate the styles CSS when the styles change.
    public function updated($field)
    {
        if ($field === 'styles') {
            $this->generateStylesCss();
        }
    }

    // Generate the styles CSS and store it in a reactive property.
    public function generateStylesCss()
    {
        $css = '';

        foreach ($this->styles as $key => $value) {
            $css .= "{$key}: {$value};";
        }

        $this->stylesCss = $css;
    }

    public function render()
    {
        return view('livewire.livebuilder-styler');
    }
}