Download the PHP package makraz/ux-vvvebjs without Composer

On this page you can find all versions of the php package makraz/ux-vvvebjs. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Example code of makraz/ux-vvvebjs

Informations about the package ux-vvvebjs

VvvebJs Bundle for Symfony using Symfony UX

Symfony UX Bundle implementing 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

Step 1: Require the bundle

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

Step 2: JavaScript dependencies (Webpack Encore only)

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

Or with npm:

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

Basic Usage

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

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 define which drag-and-drop blocks are available in the editor's sidebar.

Available Groups

Enum Value Description
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

You can also pass string values directly:

Plugins

Plugins extend the editor with additional functionality.

Available Plugins

Enum Value Description
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

Editor Options

Use the vvvebjs_options parameter to configure global editor behavior:

Option Type Default Description
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 endpoint

EasyAdmin Integration

The bundle provides a dedicated VvvebJsAdminField for seamless EasyAdmin integration:

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

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

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)

Store uploads in your Symfony public/ directory:

Then import the bundle routes:

And set the upload URL in your form:

Option 2: Flysystem

Store uploads via League Flysystem (S3, GCS, Azure, SFTP, etc.):

Option 3: Custom Handler

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

Upload Configuration Reference

Option Type Default Description
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 types

Data Format

VvvebJs outputs full HTML. The value stored in your entity will be a complete HTML string including the <html>, <head>, and <body> tags:

Rendering in Twig

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

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

CDN & Self-Hosting

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

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

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

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

Requirements

License

MIT

All versions of ux-vvvebjs with dependencies

PHP Build Version
Package Version
Requires php Version >=8.1.0
symfony/stimulus-bundle Version ^2.9.1
symfony/twig-bundle Version ^6.4|^7.0|^8.0
symfony/form Version ^6.4|^7.0|^8.0
symfony/routing Version ^6.4|^7.0|^8.0
symfony/string Version ^6.4|^7.0|^8.0
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package makraz/ux-vvvebjs contains the following files

Loading the files please wait ...