> 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.makeswift.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.makeswift.com/_mcp/server.

# Concepts

> To best understand Makeswift, there are a few core concepts for which to establish common vocabulary.

To best understand Makeswift, there are a few core concepts for which to establish common vocabulary.

## Props

Props are the primary way to pass data into a React component. They are one of the two types of data that control a component. The other type of data is state, which is used to control data within the component.

Props are passed into the render function of a component as an object in the first argument position. The object contains all the props passed into the component.

```jsx
function MyComponent(props) {
  return <div>{props.name}</div>
}
```

You can read more about props in the [React documentation](https://react.dev/learn/passing-props-to-a-component).

## Controls

Controls describe the way users can pass data to your components' props. Each control maps a [prop](#props) on your component to user interface elements such as

panels

and

overlays

. Controls are defined when [registering components](/developer/docs/reference/reactruntime/register-component).

There are two types of controls: [basic](#basic-controls) and [composable](#composable-controls) controls.

### Basic controls

Basic controls cannot contain other controls. Multiple basic controls can provide the same type of data, but with different user interfaces. For example, you can provide a `string` to your component with a [`TextInput`](/developer/docs/reference/controls/text-input), [`TextArea`](/developer/docs/reference/controls/text-area), [`Select`](/developer/docs/reference/controls/select), or [`Combobox`](/developer/docs/reference/controls/combobox) control. Here are all of the basic controls:

#### [Checkbox](/developer/docs/reference/controls/checkbox)

#### [Color](/developer/docs/reference/controls/color)

#### [Combobox](/developer/docs/reference/controls/combobox)

#### [Image](/developer/docs/reference/controls/image)

#### [Link](/developer/docs/reference/controls/link)

#### [Number](/developer/docs/reference/controls/number)

#### [Select](/developer/docs/reference/controls/select)

#### [TextArea](/developer/docs/reference/controls/text-area)

#### [TextInput](/developer/docs/reference/controls/text-input)

There are three special basic controls that are designed for specific types of props such as `className` and `children`:

#### [RichText](/developer/docs/reference/controls/rich-text)

#### [Slot](/developer/docs/reference/controls/slot)

#### [Style](/developer/docs/reference/controls/style)

* The [`RichText`](/developer/docs/reference/controls/rich-text) control provides a `ReactNode` to your component and then renders an inline rich text editor

  overlay

  wherever the builder renders the `ReactNode`.

* The [`Slot`](/developer/docs/reference/controls/slot) control provides a `ReactNode` to your component and places a drop zone

  overlay

  wherever the builder renders the prop. Users can then add components visually to that drop zone.

* The [`Style`](/developer/docs/reference/controls/style) control provides multiple

  panels

  and

  overlays

  that modify various CSS properties. This data is then passed to your component as a `string` value.

### Composable controls

Composable controls provide an `array` or `object` to a prop of your component. Composable controls have a `type` property that can recursively contain any control. The [`List`](/developer/docs/reference/controls/list) control is used to modify props that expect an `array`, and the [`Shape`](/developer/docs/reference/controls/deprecated/shape) control is used to modify props that expect an `object`.

#### [List](/developer/docs/reference/controls/list)

#### [Shape](/developer/docs/reference/controls/deprecated/shape)