How to Submit Element to Visual Composer Hub

In this article, I'm going to cover the steps you need to know if you want to submit your custom element to Visual Composer Hub.

Once you've created a custom element亚洲成人免费视频 you have an option to submit it to Visual Composer in order to showcase it in the Hub. If you decided to do so, there are some code-style rules you have to follow.


Visual Composer dev team sticks to a certain set of code style rules in order to keep the code clean, more readable and reduce the number of bugs. The general code style rules are listed in the official GitHub repository under the .

Every element in the Hub undergoes a test, build and deploy process in the . During this process, element files get validated for certain code style rules. Thus the submitted element has to match all of these rules.

Where to begin

亚洲成人免费视频First off you need to download the if you haven't already. The code that comes within this plugin is already formatted to match the defined code style.

Once you've installed the example plugin you are now ready to edit it.

Setup code style


亚洲成人免费视频To validate JavaScript code we use . It is a:

JavaScript style guide, linter, and formatter

All of the code style rules are listed at . No need to remember them all, the standardjs亚洲成人免费视频 will format the code for you.

To start using it, inside the terminal enter the elements' folder (if you are working inside the example plugin):

cd elements/logoSuperTest

then run:

yarn install

Now you are able to check JavaScript code style with the command:

yarn standard

This command will output any errors with description and location in a file. In order to automatically format the code, run:

yarn standard --fix

To see formatting errors instantly inside your files you should install the appropriate plugin for your editor. Check if your editor has such a plugin at .

I'm going to show you how to set up a for editor.

  1. Open Visual Studio Code editor;
  2. Click on the Extensions icon in the Activity Bar; 
    VSCode extensions icon
  3. In search field enter StandardJS - JavaScript Standard Style;
  4. Look for the right one and click install; 
    VScode StandardJS plugin
  5. Disable built-in JavaScript code validator by opening Settings;
  6. Inside Settings click on the Workspace tab, to apply these settings only for this workspace;
  7. In search field type javascript validate;
  8. Uncheck the Enable/disable JavaScript validation;
    VScode disable default JS validation
  9. That's it, you're all set.

亚洲成人免费视频Now, the editor will instantly highlight the code that doesn't pass the code style rules.

In some cases, there could be exceptions to the rules. For instance the public JavaScript files - the ones that are loaded in the View Page like a 3rd party library. To avoid conflicts add this comment to the start of the JavaScript file:

/* eslint-disable */

亚洲成人免费视频And at the end of the file, on the last row add:

/* eslint-enable */

These commands will prevent standardjs from validating these files.

Note: We encourage you to use this approach only in uttermost cases.


For the PHP we use PSR-2 Code style and CodeSniffer that is configured in elementName/ci/ruleset.xml file, to check PSR2 rules .

NOTE: element folder should contain ci folder just like in the example plugin.

亚洲成人免费视频To validate PHP code style, inside terminal enter the elements' folder (if you are working inside the example plugin):

cd elements/logoSuperTest

Then to validate PHP code run (change logoSuperTest亚洲成人免费视频 to your elements' name):

php ci/phpcs.phar --standard=ci/ruleset.xml logoSuperTest

亚洲成人免费视频This command will output any errors with description and location in the file.

Just like with JavaScript, in PHP you might have cases when you need to prevent validation of code style. To do so there's a command for that, add it before the line you don't want to validate:

// @codingStandardsIgnoreLine

Note: Again, we encourage you to use this approach only in uttermost cases.

Other files (JSON, CSS, etc.)

As for the other files formats like .json or .css, there are not any strict rules, but still, there are some general guidelines you should follow:

  • Use 2 spaces for indentation;
  • Use a space between a CSS selector and an opening bracket;
  • Use a space after the colon in JSON files.

亚洲成人免费视频You always can use existing Visual Composer elements files as a reference. These elements come with a Free version and are available at the .


Once you've finished developing your element and prepared a zip亚洲成人免费视频 file of your element as per , you are ready to submit it to us.

After element submission, our development team will carefully review the code and include your element in the Hub to run tests against it. If any errors will be found we will provide you with a descriptive list of thing that needs to be fixed. After that, the submission process has to be repeated.

亚洲成人免费视频When your element will pass review and testing process, we will notify you about that and include your element in the Hub.