Skip to main content

Defining and updating components in the Web Editor

Joshua Barnard
  • Updated

This article describes how to use Evolv AI Web Editor to define and modify components used in designing variants.

Table of Contents

Before you start, check out this video that explains how to use the new feature.

Components are stored at the context level and used to update variants. A component is defined by its selector and stored at the context level. You can reuse the same component on every variant inside that context.

Learn more: About Components

Defining a component

  1. [Optional] Select the variant where you want to use the component.
    • You can create a component with either the context, variable, or variant selected.
    • Selecting the variant first means the component settings panel opens immediately.
  2. Click on the arrow icon at the top of the window and move the mouse around the page until you find the element you want to use.
    mceclip6.png
  3. Click to add the component.
    • The component's details will appear in the panel on the right.
    • The name of the component is derived from the HTML element.
    • You can edit the component name.
  4. If you need to change the component's selector, click the selector pill, make the changes you need, and press enter.
    mceclip7.png
    mceclip8.png

Updating a component

With the component selected, change any of the property values, and the changes will automatically render on the page.

Any existing values are the computed values for that component.

mceclip9.png

To remove a change, click on the property label and select the RESET option. You can also remove the value you added, and the original value will be restored.

mceclip10.png

You're not limited by the component UI. If you want to change a property that's not available in the UI, click on the code tab and add it manually. 

Testing a component

There are two ways to test your components.

In Edit Mode

After updating the properties of a component, you'll see the changes render immediately.

Click between the variant and Control to see the changes apply, undo and reapply. 

It's a good idea to disable the automatic page refresh option to avoid the entire page reloading each time you switch variants.

mceclip11.png

In QA Mode

QA MODE is the best way to test all your variant changes. It's as close to testing in production as you can get.

Testing in QA MODE requires the addition of the mutate library to the environment where you want to test.

Select the variants you want to test and click the play button to render the combination. The page will reload, and the variants should render as they did in EDIT MODE.

Related articles