Clutch and React

Clutch maps very closely to React to not introduce restrictions on users and to enforce real-world concepts when using the tool.

Let's look at some React code versus the same output in Clutch.

import React from 'react';

export default function MyComponent (props) => {
      return (
          <Box style={{backgroundColor: '#ddd', padding: '10px'}}>
              <Button onClick={alert('you clicked the button')}>
                  <Typgraphy text="Hello World!" />
              </Button>
          </Box>
      )
}

In Clutch, that would be like the following, starting with the Composition Panel.

The composition acts similar to a return (i.e., the render) of a React component. The properties themselves can be seen, added, deleted, and manipulated from the properties panel on the right-hand side. For example, changing the property text of the Text component would be done by selecting the Component instance on the left and changing the corresponding property value on the right.

Differences with React

Properties

In React, the user needs to know what properties a component accepts.
Clutch features a documentation layer for component properties. The documented properties are then listed in the properties panel for users to use on the fly by adding values.

Having documented properties always available and only needing to set a value you to activate them shortens developer journey time. Displaying all documented properties together provides a reference of the most common properties used for that component.

📘

Just in time documentation

Properties with a description will be available if you click on the property text. This is another time saver that keeps you from having to reference external documentation.

Controls

In React, there is only one option to set values on properties, and that is writing JavaScript code. Whether it's a string, a number, an object, or any other type of value, writing JavaScript is the only way to set it.

Clutch offers controls. Sure, a color is just a string like "#FF0033," but is typing the best way to interact with color values? In this instance, providing a color picker is a much better way to interact with this value.

From binding to live data to styling components, custom controls offer a superior experience to working with components and their properties.