# Overview

Use the eWizard.js framework and eWizard CLI to develop the Vue components (opens new window) for your e-Detailers, emails, landing pages, and other eWizard items.

The Vue components are reusable Vue instances that extend basic HTML elements to encapsulate reusable code. Examples of components include: buttons, sliders, scrollers, etc. You can use a component as a custom element inside a root Vue instance.

In eWizard.js, you can use the ready-made default components or develop your own. In this section, you'll learn how to develop a component from scratch based on the component template that you initialize with eWizard CLI.

# Guidelines

When developing the components for the eWizard.js framework based on the official Vue.js component development guidelines (opens new window), pay attention to the single root element (opens new window) of your component. Make sure to define the component properties according to the eWizard.js guidelines.

To develop your custom component for the eWizard platform:

1. Follow the official Vue.js guidelines (opens new window).

2. Add the [CLASS_NAME] class to the root element of your component.

   The component class should match the component name. For example, the wiz-test-component class matches the wiz-test-component component.

3. Define the component props according to the eWizard.js guidelines.

Articles in this section describe how to develop components for the eWizard platform:

• Install and register ready-made components

• Initialize component template

• Component directory structure

• Settings

• System settings

• Start component development

• Make components visible in eWizard Editor

• View components in eWizard Editor

• Components within another component

• Component properties

• Edit mode API

• Update component state API

• List of component properties

• Register components with custom styles