> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# Component Conversion Checklist

Plan: Composable Developer

Lesson 13 of 22 · 15 min

Now that you understand the structure of Makeswift-enabled components, review the following common steps to consider when converting any React component to be compatible with the visual editor.

### Simplify Component Structure

To serve as an effective building block in the visual editor, a piece of presentation needs to have a single component as its "entry point."

If using your React UI requires implementors directly to use multiple components, such as an *Accordion* component in combination with *AccordionItem* components, you might consider wrapping this in a component that orchestrates these together based on a single set of props.

Your UI may be split into multiple components internally, but the "top level" implementation should be a single component with props.

### Evaluate Props Schema

Evaluate the types and schema of your component's props to make sure they can map well to available Makeswift controls.

### Implement the Makeswift Registration File

Create the registration file for your component, calling *runtime.registerComponent* with the appropriate configuration.

### Import the Component Registration

In the location where component registrations are imported, add the import of your own component.

By default, new imports should be added in *lib/makeswift/components.ts*.

### Add Controls for All Props

For each prop that your component accepts, identify the appropriate Makeswift control type and add an item to the *props* object in the registration file.

The key of each item in *props* should exactly match the prop from the React component, and the value should be a new instance of a control type, with any appropriate configuration options.