Build a custom component

Note: This guide has been updated to conform to the new Custom Elements version 1 specification. You can view the specification and learn more about it.

As of July 2021, outdated custom components will no longer be supported in Google Web Designer. To update your custom components, take a look at the upgrade guide.

Experienced web developers can write their own custom components for Google Web Designer that either extend existing components or build new ones from scratch. Other users can install these custom components to add functionality to their projects without editing any code.

A valid component package consists of a .zip file containing a JSON manifest file. The package may also include other files, such as a JavaScript file that defines a custom HTML element or other necessary JavaScript and CSS files.

1. Define a custom element

Custom components are implemented in Google Web Designer as custom elements.

A custom element is an HTML element type that you define with JavaScript code and give a custom tag name. Once you define a custom element, you can use it just like any standard element. The DOM APIs that work with native HTML elements also work with custom elements.

Learn more about custom elements in the HTML specification at WHATWG.

Follow these guidelines for custom elements in Google Web Designer:

• The tag name for custom elements must contain a hyphen (-), such as x-panel or expand-button.
• The gwd- namespace is claimed by Google Web Designer and cannot be used in your custom elements.

See an example of custom element code

2. Create any additional JavaScript and CSS files as necessary

Write the JavaScript and CSS that provide the functionality and styling that you want.

It's possible to serve JavaScript and CSS files from an external server instead of including those files in the package. Include references to external files in the JSON manifest.

3. Transpile your code to ES5 (optional)

For maximum browser compatibility, we recommend that you transpile your component code to use the JavaScript ES5 syntax. This helps ensure that your component runs properly on older browsers.

1. Go to Babel, a JavaScript complier, at https://babeljs.io/repl.
2. Under the Presets section, select es2015.
3. Copy and paste your component JavaScript code into the left pane. A translated version of the code appears in the right pane, which you can use for your component.

4. Create a JSON manifest of the component files

Custom components require a manifest file in JSON format named manifest.json that tells Google Web Designer about the component. Follow the schema detailed below. Properties of note include:

• type – Required.
• version – Required. Increment the version number whenever updating a custom component.
• customElementsVersion – Required for new components conforming to the Custom Elements v1 specification.
• files – List other files included in the custom component package.
• externalScripts – Specify external script dependencies. These scripts are automatically added in a