Adding Custom Elements

You can easily add custom elements/components to architect. All you need to do is create a new file inside public/builder/elements folder. You should name it after your element, for example, if you want to name your element My Custom Element, the file name should be: myCustomElement.html

Note:

public/builder/elements folder already contains a number of built-in elements (form, navbar, table etc.). You can open any of these files with a text editor for a fully working example of a custom element configuration.

After creating myCustomElement.html, open it with a text editor and define your new element. This can be done in three steps:

1. Optional element CSS styles inside <style></style> tag. 

2. Element HTML markup inside <template></template> tag.

3. Element configuration inside <script></script> tag. Element configure should be exported as es6 class named after your element, these are the available options:

Available configuration options

name string

Name of your element.

matcher function

Function that should return whether specified html node matches your element. For example:

matcher: (node) => node.classList.contains('my-element')

contentCategories array

An array of element types (html categories) that this element belongs to. You can find them here. This, along with "allowedChildren" is used to determine if element can be inserted into another element via drag and drop. Defaults to ['flow'].

allowedChildren array

An array of types (html categories) that your element accepts as children. you can find the categories here.

category string

What category in elements panel your element should appear under (typography, forms, components etc). If this category does not exist already, it will be created automatically.

hiddenClasses array

Array of classes you want to be hidden in the inspector class editor.

canDrag boolean

Whether or not the element should be draggable in the editor. Defaults to true.

canEdit array

An array of css styles that should be editable from the inspector. Defaults to all. Available values are: padding, margin, border, text, settings, visibility, shadow, background

Controls array

This is where you can specify user editable options that will appear in settings panel in the inspector (for example changing url for video element). You can look at some examples for built-in elements in resources/client/editor/elements/definitions folder. This is an example for text input element that allows to change placeholder attribute value:

{
  controls: [
    {
      label: "Placeholder",
      type: "input",
      defaultValue(node: HTMLInputElement) {
        return node.placeholder || "Text input";
      },
      onChange(node: HTMLElement, value: string) {
        node.setAttribute("placeholder", value);
      },
    },
  ];
}

label: Name for the control that will be visible to user.

type: Type of control, select or input.

showAiText Whether "Create text with AI" button should be shown for this control.

defaultValue: function that should return the default value for the control.

onChange: function that will be called when user changes the value for this control.

options: An array of option for select input. 

[{key: 'name', value: 'some value'}]