PHPackages                             makraz/ux-vvvebjs - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. makraz/ux-vvvebjs

ActiveSymfony-bundle[Utility & Helpers](/categories/utility)

makraz/ux-vvvebjs
=================

Symfony UX Bundle for VvvebJs drag-and-drop page builder

v0.1.0(2mo ago)00MITPHPPHP >=8.1.0

Since Mar 10Pushed 2mo agoCompare

[ Source](https://github.com/makraz/ux-vvvebjs)[ Packagist](https://packagist.org/packages/makraz/ux-vvvebjs)[ Docs](https://github.com/makraz/ux-vvvebjs)[ RSS](/packages/makraz-ux-vvvebjs/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (1)Dependencies (11)Versions (2)Used By (0)

VvvebJs Bundle for Symfony using Symfony UX
===========================================

[](#vvvebjs-bundle-for-symfony-using-symfony-ux)

Symfony UX Bundle implementing [VvvebJs](https://www.vvveb.com/vvvebjs/) — a drag-and-drop page builder and website editor.

Also working out of the box with EasyAdmin.

If you need a visual page builder (with drag-and-drop components) in a Symfony project, this is what you need.

- [Installation](#installation)
- [Basic Usage](#basic-usage)
- [Component Groups](#component-groups)
- [Plugins](#plugins)
- [Editor Options](#editor-options)
- [EasyAdmin Integration](#easyadmin-integration)
- [File Upload](#file-upload)
- [Data Format](#data-format)
- [CDN & Self-Hosting](#cdn--self-hosting)
- [JavaScript Events](#javascript-events)

Installation
------------

[](#installation)

### Step 1: Require the bundle

[](#step-1-require-the-bundle)

```
composer require makraz/ux-vvvebjs
```

If you are using the **AssetMapper** component, you're done!

### Step 2: JavaScript dependencies (Webpack Encore only)

[](#step-2-javascript-dependencies-webpack-encore-only)

If you are using **Webpack Encore** (skip this step if using AssetMapper):

```
yarn install --force && yarn watch
```

Or with npm:

```
npm install --force && npm run watch
```

That's it. You can now use `VvvebJsType` in your Symfony forms.

Basic Usage
-----------

[](#basic-usage)

In a form, use `VvvebJsType`. It works like a classic form type with additional options:

```
use Makraz\VvvebJsBundle\Form\VvvebJsType;

public function buildForm(FormBuilderInterface $builder, array $options): void
{
    $builder
        ->add('content', VvvebJsType::class)
    ;
}
```

By default, the editor comes with `Common`, `HTML`, `Elements`, and `Bootstrap 5` component groups enabled, plus the `CodeMirror` plugin for code editing.

Component Groups
----------------

[](#component-groups)

Component groups define which drag-and-drop blocks are available in the editor's sidebar.

### Available Groups

[](#available-groups)

EnumValueDescription`VvvebJsComponentGroup::COMMON``common`Common components (text, image, video, buttons, etc.)`VvvebJsComponentGroup::HTML``html`HTML elements (headings, paragraphs, lists, tables, etc.)`VvvebJsComponentGroup::ELEMENTS``elements`Advanced UI elements`VvvebJsComponentGroup::BOOTSTRAP5``bootstrap5`Bootstrap 5 components (navbar, cards, modals, carousel, etc.)`VvvebJsComponentGroup::WIDGETS``widgets`Widget components`VvvebJsComponentGroup::EMBEDS``embeds`Embed components (YouTube, maps, etc.)### Customizing Components

[](#customizing-components)

```
use Makraz\VvvebJsBundle\Form\VvvebJsType;
use Makraz\VvvebJsBundle\DTO\Enums\VvvebJsComponentGroup;

$builder->add('content', VvvebJsType::class, [
    'vvvebjs_components' => [
        VvvebJsComponentGroup::COMMON,
        VvvebJsComponentGroup::BOOTSTRAP5,
        VvvebJsComponentGroup::EMBEDS,
    ],
]);
```

You can also pass string values directly:

```
'vvvebjs_components' => ['common', 'bootstrap5', 'embeds'],
```

Plugins
-------

[](#plugins)

Plugins extend the editor with additional functionality.

### Available Plugins

[](#available-plugins)

EnumValueDescription`VvvebJsPlugin::CODE_MIRROR``codemirror`Code editor with syntax highlighting for HTML source editing`VvvebJsPlugin::GOOGLE_FONTS``google-fonts`Google Fonts picker and integration`VvvebJsPlugin::JSZIP``jszip`Export page as a ZIP file`VvvebJsPlugin::AOS``aos`Animate On Scroll — add scroll animations to elements`VvvebJsPlugin::AI_ASSISTANT``ai-assistant`AI-powered content generation assistant`VvvebJsPlugin::MEDIA``media`Media manager for browsing and selecting uploaded files### Customizing Plugins

[](#customizing-plugins)

```
use Makraz\VvvebJsBundle\Form\VvvebJsType;
use Makraz\VvvebJsBundle\DTO\Enums\VvvebJsPlugin;

$builder->add('content', VvvebJsType::class, [
    'vvvebjs_plugins' => [
        VvvebJsPlugin::CODE_MIRROR,
        VvvebJsPlugin::GOOGLE_FONTS,
        VvvebJsPlugin::AOS,
        VvvebJsPlugin::JSZIP,
    ],
]);
```

Editor Options
--------------

[](#editor-options)

Use the `vvvebjs_options` parameter to configure global editor behavior:

```
$builder->add('content', VvvebJsType::class, [
    'vvvebjs_options' => [
        'height' => '800px',
        'border' => true,
        'designerMode' => false,
        'readOnly' => false,
        'uploadUrl' => '/vvvebjs/upload',
    ],
]);
```

OptionTypeDefaultDescription`height``int|string``'600px'`Height of the editor — integer for pixels, string for CSS values (e.g. `'80vh'`)`border``bool|string``true`Show a border around the editor. `true` for default border (`1px solid #dee2e6`), or a CSS border string`designerMode``bool``false`Enable designer mode for advanced layout editing`readOnly``bool``false`Set the editor to preview/read-only mode`uploadUrl``string``''`URL for the media upload endpointEasyAdmin Integration
---------------------

[](#easyadmin-integration)

The bundle provides a dedicated `VvvebJsAdminField` for seamless EasyAdmin integration:

```
use Makraz\VvvebJsBundle\Form\VvvebJsAdminField;

public function configureFields(string $pageName): iterable
{
    yield VvvebJsAdminField::new('content');
}
```

To customize components, plugins, and options, use `setFormTypeOptions`:

```
use Makraz\VvvebJsBundle\DTO\Enums\VvvebJsComponentGroup;
use Makraz\VvvebJsBundle\DTO\Enums\VvvebJsPlugin;

yield VvvebJsAdminField::new('content')
    ->setFormTypeOptions([
        'vvvebjs_components' => [
            VvvebJsComponentGroup::COMMON,
            VvvebJsComponentGroup::BOOTSTRAP5,
        ],
        'vvvebjs_plugins' => [
            VvvebJsPlugin::CODE_MIRROR,
            VvvebJsPlugin::GOOGLE_FONTS,
        ],
        'vvvebjs_options' => [
            'height' => '700px',
            'uploadUrl' => '/vvvebjs/upload',
        ],
    ])
;
```

The field automatically registers the Twig form theme and works with both AssetMapper and Webpack Encore.

File Upload
-----------

[](#file-upload)

The bundle provides a built-in upload controller. Three storage options are available: **local filesystem**, **Flysystem**, or **your own custom handler**.

### Option 1: Local Filesystem (default)

[](#option-1-local-filesystem-default)

Store uploads in your Symfony `public/` directory:

```
# config/packages/vvvebjs.yaml
vvvebjs:
    upload:
        enabled: true
        handler: local
        local_dir: '%kernel.project_dir%/public/uploads/vvvebjs'
        local_public_path: '/uploads/vvvebjs'
        max_file_size: 10485760  # 10 MB
        allowed_mime_types:
            - image/jpeg
            - image/png
            - image/gif
            - image/webp
            - image/svg+xml
            - video/mp4
            - video/webm
            - application/pdf
```

Then import the bundle routes:

```
# config/routes/vvvebjs.yaml
vvvebjs:
    resource: '@VvvebJsBundle/config/routes.php'
```

And set the upload URL in your form:

```
$builder->add('content', VvvebJsType::class, [
    'vvvebjs_options' => [
        'uploadUrl' => '/vvvebjs/upload',
    ],
]);
```

### Option 2: Flysystem

[](#option-2-flysystem)

Store uploads via [League Flysystem](https://flysystem.thephpleague.com/) (S3, GCS, Azure, SFTP, etc.):

```
composer require league/flysystem-bundle
```

```
# config/packages/vvvebjs.yaml
vvvebjs:
    upload:
        enabled: true
        handler: flysystem
        flysystem_storage: 'default.storage'
        flysystem_path: 'uploads/vvvebjs'
        flysystem_public_url: 'https://cdn.example.com'
        max_file_size: 10485760  # 10 MB
```

### Option 3: Custom Handler

[](#option-3-custom-handler)

Implement your own upload logic by creating a service that implements `UploadHandlerInterface`:

```
use Makraz\VvvebJsBundle\Upload\UploadHandlerInterface;
use Symfony\Component\HttpFoundation\File\UploadedFile;

class MyUploadHandler implements UploadHandlerInterface
{
    public function upload(UploadedFile $file): string
    {
        // Your upload logic here
        // Return the public URL of the uploaded file
        return 'https://example.com/path/to/file.jpg';
    }
}
```

```
# config/packages/vvvebjs.yaml
vvvebjs:
    upload:
        enabled: true
        handler: custom
        custom_handler: App\Upload\MyUploadHandler
```

### Upload Configuration Reference

[](#upload-configuration-reference)

OptionTypeDefaultDescription`enabled``bool``false`Enable the built-in upload controller`handler``string``'local'``'local'`, `'flysystem'`, or `'custom'``local_dir``string``'%kernel.project_dir%/public/uploads/vvvebjs'`Local upload directory`local_public_path``string``'/uploads/vvvebjs'`Public URL path prefix`flysystem_storage``string``null`Flysystem storage service ID`flysystem_path``string``'uploads/vvvebjs'`Path within the Flysystem filesystem`flysystem_public_url``string``''`Public URL prefix for Flysystem files`custom_handler``string``null`Service ID of your `UploadHandlerInterface``max_file_size``int``10485760`Maximum file size in bytes (10 MB)`allowed_mime_types``array``['image/jpeg', 'image/png', ...]`Allowed MIME typesData Format
-----------

[](#data-format)

VvvebJs outputs full HTML. The value stored in your entity will be a complete HTML string including the ``, ``, and `` tags:

```

        My Page
        Built with drag-and-drop.

```

### Rendering in Twig

[](#rendering-in-twig)

To display VvvebJs content in your templates, render the HTML directly:

```
{{ myEntity.content|raw }}
```

Or embed it within an iframe for full-page previews:

```

```

CDN & Self-Hosting
----------------------

[](#cdn--self-hosting)

By default, VvvebJs assets are loaded from the jsDelivr CDN:

```
https://cdn.jsdelivr.net/gh/givanz/VvvebJs@master

```

To self-host VvvebJs or use a specific version, configure the `cdn_url`:

```
# config/packages/vvvebjs.yaml
vvvebjs:
    cdn_url: '/bundles/vvvebjs'  # Local path
    # or
    cdn_url: 'https://cdn.jsdelivr.net/gh/givanz/VvvebJs@v0.7.7'  # Pinned version
```

JavaScript Events
-----------------

[](#javascript-events)

The Stimulus controller loads VvvebJs assets dynamically and initializes the builder. The editor syncs HTML back to the hidden form input on form submit and before page unload.

Symfony Live Component Compatibility
------------------------------------

[](#symfony-live-component-compatibility)

The editor container is built dynamically by the Stimulus controller, so it works correctly alongside Symfony Live Components.

Requirements
------------

[](#requirements)

- PHP >= 8.1
- Symfony 6.4, 7.x, or 8.x
- `symfony/stimulus-bundle` >= 2.9.1

License
-------

[](#license)

MIT

###  Health Score

33

—

LowBetter than 75% of packages

Maintenance88

Actively maintained with recent releases

Popularity0

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity32

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

60d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/3ad832e0fa9721fe45d66266b74e95ddc82bfe37568a8a8e0a2afb4615a23531?d=identicon)[makraz](/maintainers/makraz)

---

Top Contributors

[![makraz](https://avatars.githubusercontent.com/u/19323431?v=4)](https://github.com/makraz "makraz (1 commits)")

---

Tags

symfony-uxdrag-and-dropeasyadminsymfony-formsymfony ux bundlepage builderwebsite-buildersymfony page buildersymfony vvvebjsvvvebjseasyadmin page builder

###  Code Quality

TestsPHPUnit

Code StylePHP CS Fixer

### Embed Badge

![Health badge](/badges/makraz-ux-vvvebjs/health.svg)

```
[![Health](https://phpackages.com/badges/makraz-ux-vvvebjs/health.svg)](https://phpackages.com/packages/makraz-ux-vvvebjs)
```

###  Alternatives

[sylius/sylius

E-Commerce platform for PHP, based on Symfony framework.

8.4k5.6M648](/packages/sylius-sylius)[ehyiah/ux-quill

Symfony UX Bundle to use Quill JS wysiwyg text editor with full and easy customisation

5868.1k2](/packages/ehyiah-ux-quill)[prestashop/prestashop

PrestaShop is an Open Source e-commerce platform, committed to providing the best shopping cart experience for both merchants and customers.

9.0k15.4k](/packages/prestashop-prestashop)[symfony/ux-turbo

Hotwire Turbo integration for Symfony

3906.8M47](/packages/symfony-ux-turbo)[netgen/layouts-core

Netgen Layouts enables you to build and manage complex web pages in a simpler way and with less coding. This is the core of Netgen Layouts, its heart and soul.

3689.4k10](/packages/netgen-layouts-core)[contao/core-bundle

Contao Open Source CMS

1231.6M2.3k](/packages/contao-core-bundle)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)