Property Inspector


Deco tracks primitive values in your code, letting you easily tweak them in real-time through the property inspector.


Adding and Removing Properties

You can determine which values may be added to the property inspector by holding alt. Any primitive value in your code will have an underline - this indicates it can be added to the property inspector.

To add any primitive value in your code to the property inspector, alt + click the value in your code. You'll notice the properties that have been added to the inspector look different in your code: they have a subtle gray bubble around them. To remove any property from the inspector, just alt + click it again.

Properties added this way can then be tweaked in the property inspector on the right side of the IDE. Each property will have an input field (slider, color picker, etc) relevant for its value.


Metadata

Deco associates metadata with each inspectable property in your code. This includes information like the name of the property and which input field (slider, color picker, etc) it should be edited with. To change the metadata for a property, click its name in the property inspector. You can then edit the property's metadata.

Most of the time, you will not need to edit this metadata, since Deco picks defaults fairly accurately. However, editing the metadata can be useful for choosing better names and groups for values, editing the ranges of sliders, and a variety of other customizations.


Save Format (.deco)

Deco saves metadata about properties in a .deco directory in the root of your project. If you don't add any properties to the inspector (or insert any components that do so), your .deco directory will be empty. Otherwise, there will be a corresponding JSON file for each of the files in your project containing properties.

You should not need to edit these files manually.

While these files are intended to let you collaborate better on deco projects, they have several known issues: they are difficult to merge via git, and can become stale if edited by non-deco users. For the time being, you may be better off not checking the metadata files into git, even though it means recreating the properties each time you want to use them.

If you have ideas for how to improve this system, please share them with us through the Deco Slack or github repo.