Mattermix Docs
The Editor is a visual HTML and CSS builder that you will use to create and edit Templates. The Editor uses drag-and-drop Components that make it simple to add Containers, Text, and Images to your Templates. Components can be styled by selecting them and editing their Props in the Toolbar.
Create and update Templates with the Editor


The Editor has several drag-and-drop Components that you can use to build your Templates. Below you will find a brief introduction to the available Components. Check out the Components section if you want to learn more about each Component, including all the available Props.
Each Component will have a unique ID that will be used to edit the Component Props with the API. You can find the Component ID by selecting the Component and viewing the ID at the top of the Toolbar.
Select a Component in the Editor to view its ID in the Toolbar
Learn more about how to edit Component Props with the Export API endpoint.


The Container Component creates a div element.
Create a Container Component
You'll use the Container Component to group other Components together in your Templates.
Group other Components together with a Container Component


The Text Component creates a p element. You'll use this Component to create text values in your Templates.
Create a Text Component


The Image Component creates an img element. You'll use this Component to create images in your Templates.
Create an Image Component


The Toolbar is used to edit the CSS values of a selected Component, view Layers, and select Options. You will also find the Component ID at the top of the Toolbar when a Component is selected, which you'll use to edit Components with the API.


Layers can be found at the bottom of the Toolbar above Options. Layers make it easy to view and organize all the Components in your Template. By default, the Layers will be collapsed to save space in your Toolbar, but you can expand the Layers panel by clicking on it.
View Layers in your Template
You can show or hide individual or nested Components by toggling the eye icon next to the Layer title.
Show or hide Layers by toggling the eye icon
Drag-and-drop Components to reposition them in your Template hierarchy. You will see a green indicator if the Layer is allowed to be placed in the desired location or a red indicator if the Layer is not allowed.
Drag and drop Layers to reposition in Template hierarchy
Components will be nested within their parent Component. Nested Components can be viewed by clicking the expand icon on the parent Component.
Expand parent Components by clicking on the expand icon
With the Layers panel expanded, you can quickly jump to an individual Component Layer by selecting the Component in the Editor.
Select a Component in the Editor to quickly select their corresponding Layer
You can rename Components from the Layers panel by selecting and replacing the Layer title.
Rename Layers by click on the Layer title


You can Save, Duplicate, and Export Templates and Starters from the Options Panel, which is found at the bottom right of the Editor.
Save, duplicate, and export from the Options dropdown
Last modified 2mo ago