1 of 32

Properties.json

The properties.json file defines the User Interface for an Element. Browse the UI Control docs for a full list of available controls.

Here's an example of setting Default Properites on various UI controls.

{
    "groups": [{
        "title": "Content",
        "properties": [{
            "title": "Text Style",
            "id": "textStyle",
            "themeTextStyle": {
                "default": { "base": { "name": "lg" }, "sm": { "name": "2xl" }, "md": { "name": "4xl" } }
            }
        }, {
            "title": "Theme Font",
            "id": "textFont",
            "themeFont": {
                "default": { "base": { "name": "heading" }, "sm": { "name": "quote" } }
            }
        }, {
            "title": "Padding",
            "id": "themeSpacing",
            "themeSpacing": {
                "mode": "padding",
                "default": {
                    "base": {
                        "custom": true,
                        "left": 10,
                        "right": 20,
                        "top": 30,
                        "bottom": 40,
                        "linkVertical": true
                    },
                    "sm": {
                        "custom": false,
                        "left": "xl",
                        "right": "xl",
                        "top": "xl",
                        "bottom": "xl"
                    }
                }
            }
        }, {
            "title": "Border Width",
            "id": "borderWidth",
            "themeBorderWidth": {
                "default": {
                    "base": {
                        "custom": false,
                        "left": "2",
                        "right": "2",
                        "top": "2",
                        "bottom": "2",
                        "linkHorizontal": true
                    },
                    "sm": {
                        "custom": false,
                        "left": "8",
                        "right": "8",
                        "top": "8",
                        "bottom": "8",
                        "linkHorizontal": true
                    }
                }
            }
        }, {
            "title": "Border Radius",
            "id": "borderRadius",
            "themeBorderRadius": {
                "default": {
                    "base": {
                        "custom": false,
                        "topLeft": "sm",
                        "topRight": "sm",
                        "bottomLeft": "sm",
                        "bottomRight": "sm",
                        "linkHorizontal": true
                    },
                    "sm": {
                        "custom": true,
                        "topLeft": 5,
                        "topRight": 5,
                        "bottomLeft": 5,
                        "bottomRight": 5,
                        "linkHorizontal": true
                    }
                }
            }
        }, {
            "title": "Spacing",
            "id": "spacing",
            "themeSpacing": {
                "default": {
                    "base": {
                        "custom": false,
                        "left": "sm",
                        "right": "sm",
                        "top": "sm",
                        "bottom": "sm",
                        "linkHorizontal": true
                    },
                    "sm": {
                        "custom": false,
                        "left": "lg",
                        "right": "lg",
                        "top": "lg",
                        "bottom": "lg",
                        "linkHorizontal": true
                    }
                }
            }
        }, {
            "title": "Shadow",
            "id": "themeShadow",
            "mode": "shadow",
            "themeShadow": {
                "default": { "base": { "name": "sm" }, "sm": { "name": "lg" }, "md": { "name": "xl" } }
            }
        }, {
            "title": "Slider",
            "id": "slider",
            "slider": {
                "default": "45",
                "min": 20,
                "max": 60,
                "round": true,
                "units": "vw"
            }
        }, {
            "title": "Slider 2",
            "id": "slider2",
            "slider": {
                "default": { "base": 20, "sm": 30 },
                "min": 20,
                "max": 60,
                "round": true,
                "units": "vw"
            }
        }, {
            "title": "Slider 3",
            "id": "slider3",
            "slider": {
                "default": "3",
                "content": [
                    { "title": "a", "value": "2" },
                    { "title": "b", "value": "3" },
                    { "title": "c", "value": "4" }
                ]
            }
        }, {
            "title": "Alignment",
            "id": "alignment",
            "segmented": {
                "default": {
                    "base": "w-auto",
                    "md": "w-full"
                },
                "items": [
                    { "value": "w-full", "icon": "text.alignleft" },
                    { "value": "w-asdf", "icon": "text.alignleft" },
                    { "value": "w-auto", "icon": "text.aligncenter" },
                    { "value": "custom", "icon": "text.alignright", "title": "Custom" }
                ]
            }
        }]
    }]
}

Responsive Values

By default, Elements makes all property controls responsive, allowing users to override any control setting across different devices. Elements accomplishes this by appending Tailwind’s responsive modifiers to the control’s value. Let’s explore how this works in an example.

Responsive Example

In this example, a control uses Tailwind’s text transform utility classes. The user can customize the control’s value across devices by clicking the responsive icon (dot) next to the control title in Elements.

Initially, the headingTextTransform output is set to normal-case. However, once the user customizes this setting in Elements, it may look something like this: normal-case sm:uppercase md:lowercase lg:capitalize.

Elements automatically applies and manages these responsive modifiers, saving you the effort of manually setting values for each device size and applying the appropriate modifier.

{
    "title": "Case",
    "id": "headingTextTransform",
    "select": {
        "default": "normal-case",
        "items": [
            {
                "value": "normal-case",
                "title": "None"
            },
            {
                "value": "uppercase",
                "title": "Uppercase"
            },
            {
                "value": "lowercase",
                "title": "Lowercase"
            },
            {
                "value": "capitalize",
                "title": "Capitalize"
            }
        ]
    }
}

Multi Value Responsive

This even works for controls that require multiple classes as the value. So given the following control:

{
  "title": "Position",
  "id": "position",
   "select": {
     "default": "bottom-0 left-0",
     "items": [
       {
         "title": "Top Right",
         "value": "top-0 left-auto right-0"
       },
       {
         "title": "Bottom Left",
         "value": "bottom-0 left-0 right-auto"
       }
     ]
   }
}

You can expect the output of position to be bottom-0 left-0 right-auto md:top-0 md:left-auto md: right-0

Disable Responsive Controls

To disable responsive values for your control, simply add "responsive": false to your control.

{
    "title": "Not Responsive",
    "id": "nonResponsiveControl",
    "responsive": false,
    "switch": {}
}

Grouping Controls

Groups allow you to organise similar settings into relevant groups.

the Icon property uses SF Symbols. Please refer to the SF Symbol app for a list of available icons.

Here is an example emtpy group:

{
	"groups": [
			{
	  "title": "Untitled",
	  "icon": "paintpalette",
	  "properties": [
		  
		]
	}]
}

Controls should placed inside of the properties array. The following example has a heading and an image drop well inside of the group.

{
    "groups": [
        {
            "title": "Button Design",
            "icon": "paintpalette",
            "properties": [
                {
                    "title": "Title",
                    "id": "buttonTitle",
                    "default": "",
                    "text": {
                       "default": "Click Me"
                    }
                },
                {
                    "title": "Image",
                    "id": "buttonImage",
                    "image": {}
                },
                
            ]
        }
    ]
}

The following example has two groups, the first with a text box, and the second with an image dropwell.

{
    "groups": [{
        "title" : "First Group",
        "icon" : "1.circle.fill",
        "properties" : [{
            "title": "Title",
            "id": "title",
            "text": {}
        }]
    },
    {
        "title" : "Second Group",
        "icon" : "2.circle.fill",
        "properties" : [{
            "title": "Image",
            "id": "image",
            "image": {}
        }]
    } 
    ]
}

Default Values

General Structure

All properties have the same general structure using the following object keys.

Key

Value

Notes

title

string

See for more information

id

string

See for more information

format

string

See for more information

visible

string

See for more information

enabled

string

See for more information

Code Example

{
  "title": "Example Title",
  "id": "unique-id-here",
  "format": "pt-{{value}}",
  "visible": "myOtherControl == 'someValue'",
  "enabled": "anotherControl == 'anotherValue'"
}

Title

ID

Format

In some cases, it's adventagous to format a value before it's passed to your element's templates. To achieve this, add a format property to the configuration specifying the format string.

Value formatting is support by all controls.

Basic Example

For example, the following creates a slider ranging from 0-12 with a property called padding

{
    "title" : "Padding",
    "id" : "padding",
    "format": "pt-{{value}}",  
    "slider": {
        "default" : 5,
        "min" : 0,
        "max" : 12
    }
}

If the slider is set to 5 and the template contains

{{padding}}

the output will be

pt-5

Arbitrary Value Example

You could also format the control's value to use tailwind's arbitrary value feature. This would allow your element precis control over all css properties. For example, you can control the opacity utility class from tailwind with a slider:

{
    "title" : "Opacity",
    "id" : "opacity",
    "format": "opacity-[{{value}}%]",  
    "slider": {
        "default" : 50,
        "min" : 0,
        "max" : 100
    }
}

If the slider is set to 50 and the template contains

{{opacity}}

the output will be

opacity-[50%]

Advanced CSS Example

You could also format the control's value to output a valid CSS property. For example, if we want to control the translateX css property with a number input, we can do the following:

{
    "title" : "Translate X",
    "id" : "translateX",
    "format": "transform: translateX({{value}}px);",  
    "number": {
        "default" : 50,
    }
}

If the number field is set to 50 and the template contains

{{translateX}}

the output will be

transform: translateX(50px);

Of cause, in this case you would want to add this to a CSS template file.

CSS Custom Property Example

You can even use the format to control a CSS Custom Property (css variable). If we take our previous example and expand on it, we might want to instead set a --translateX CSS custom property with a number input:

{
    "title" : "Translate X",
    "id" : "translateX",
    "format": "--translateX: {{value}}px;",  
    "number": {
        "default" : 50,
    }
}

If the number field is set to 50 and the template contains

{{translateX}}

the output will be

--translateX: 50px;

In this case you would either want to add this to a CSS file, or use an inline style attribute to set the --translateX:

// first you would use the CSS custom property in your CSS:
<style>
.myDiv {
  ...
  transform: scale(0.5) translateX(var(--translateX, 0));
}
</style>

// now that your class is setup to use the --translateX custom property
// you can reassign it locally:
<div class="myDiv" style="{{translateX}}"> ... </div>

// this would output:
<div class="myDiv" style="--translateX: 50px;"> ... </div>

Visible

The visible key in an object's properties can be set using a logical expression that evaluates to true or false. This determines whether a specific UI element is shown or hidden based on the conditions specified in the expression. Works in the same way as enabled.

Boolean Logic: Use logical operators (&&, ||) to combine multiple conditions.
Comparison Operators: Use ==, !=, >, <, >=, <= to compare values.

Examples

Complex Condition
```
"visible": "(backgroundType == 'custom' || backgroundType == 'image') && textColor == 'white'"
```
This makes the property visible only if the backgroundType is either custom' or 'image', and the textColor is 'white'.
Visibility Based on Numeric Ranges
```
"visible": "opacity > 20 && opacity < 30"
```
Useful for showing elements that should only be visible within a specific range, e.g., showing a message if the opacity is not between 20-30.
Negation to Hide Elements
```
"visible": "mySwitchControl != true"
```
The property is visible when mySwitchControl is false.

The following example code toggles the visibility of controls based on the value of the switch.

{
    "groups": [{
        "title": "SWITCH TEST",
        "icon": "switch.2",
        "properties": [{
            "title": "Test Switch",
            "id": "testSwitch",
            "responsive": false,
            "switch": {
                "default": false
            }
        }, {
            "information": {},
            "title": "No Controls",
            "visible": "testSwitch == false"
        }, {
            "information": {},
            "title": "Let's Slide…",
            "visible": "testSwitch == true"
        }, {
            "title": "slider",
            "id": "slider",
            "visible": "testSwitch != false",
            "slider": {
                "default": 5,
                "min": 1,
                "max": 50,
                "round": true
            }
        }]
    }]
}

Enabled

Show and hide controls based on another control's value.

The enabled key in an object's properties can be set using a logical expression that evaluates to true or false. This determines whether a specific UI element is enabled or disabled based on the conditions specified in the expression. Works in the same way as visible.

Boolean Logic: Use logical operators (&&, ||) to combine multiple conditions.
Comparison Operators: Use ==, !=, >, <, >=, <= to compare values.

Examples

Complex Condition
```
"enabled": "(backgroundType == 'custom' || backgroundType == 'image') && textColor == 'white'"
```
This makes the property enabled only if the backgroundType is either custom' or 'image', and the textColor is 'white'.
Visibility Based on Numeric Ranges
```
"enabled": "opacity > 20 && opacity < 30"
```
Useful for enabling controls that should only be visible within a specific range.
Negation to Hide Elements
```
"enabled": "mySwitchControl != true"
```
The property is enabled when mySwitchControl is false.

UI Controls

All UI Controls need to be placed inside of a Group. The controls appear in the inspector.

Available Controls

Divider

Display a divider between content.

{
    "divider": {}
}

{
    "groups": [{
        "title": "Divider Example",
        "properties": [{
            "divider": {}
        }]
    }]
}

Select

Displays a select box, also known as a dropdown menu.

{
    "title": "Case",
    "id": "headingTextTransform",
    "select": {
        "default": "normal-case",
        "items": [{
            "value": "normal-case",
            "title": "None"
        }, {
            "value": "uppercase",
            "title": "Uppercase"
        }, {
            "value": "lowercase",
            "title": "Lowercase"
        }, {
            "value": "capitalize",
            "title": "Capitalize"
        }]
    }
}

{
    "groups": [{
        "title": "Select Example",
        "properties": [{
            "title": "Case",
            "id": "headingTextTransform",
            "select": {
                "default": "normal-case",
                "items": [{
                    "value": "normal-case",
                    "title": "None"
                }, {
                    "value": "uppercase",
                    "title": "Uppercase"
                }, {
                    "value": "lowercase",
                    "title": "Lowercase"
                }, {
                    "value": "capitalize",
                    "title": "Capitalize"
                }]
            }
        }]
    }]
}

Heading

Displays a heading in the inspector interface.

{
    "title": "Border",
    "heading": {}
}

{
    "groups": [{
        "title": "Heading Example",
        "properties": [{
            "title": "Border",
            "heading" : {}
        }]
    }]
}

Image

Displays an image dropwell in the inspector.

{
    "title": "Image",
    "id": "image",
    "image": {}
}

{
    "groups": [{
        "title": "Image Resource Example",
        "properties": [{
            "title": "Image",
            "id": "image",
            "image": {}
        }]
    }]
}

Information

Display some informational static text.

{
    "information": {},
    "title": "You can display a helpful tip here!"
}

{
    "groups": [{
        "title": "Information Example",
        "properties": [{
            "information": {},
            "title": "You can display a helpful tip here!"
        }]
    }]
}

Link

The Link control allows users to input a URL or link to another page within their RapidWeaver project.

{
    "title": "Link",
    "id": "link",
    "link": {
        "subtitle": "Link to another page"
    }
}

{
    "groups": [{
        "title": "Link Example",
        "properties": [{
            "title": "Link",
            "id": "link",
            "link": {
                "subtitle": "Link to another page"
            }
        }]
    }]
}

Template Example

The following will give you access to the link object in your template file(s).

<a href="{{link.href}}" target="{{link.target}}">Click Me</a>

Getting the Absolute URL

By default the link attribute will return a relative URL. To get the full URL add the absoluteURL property.

        {
          "title": "Link",
          "id": "globalLink",
          "link": {
            "absoluteURL": true
          }
        }

Corresponding template example using the absoluteURL.

<a href="{{redirectURL.href}}">Click Me</a>

Number

Displays a number field with a stepper.

{
    "title": "Number",
    "id": "myNumber",
    "number": {
        "default": 100,
        "subtitle": "a simple number input"
    }
}

{
    "groups": [{
        "title": "Number Example",
        "properties": [{
            "title": "Number",
            "id": "myNumber",
            "number" : {
                "default" : 100,
                "subtitle" : "a simple number input",
            }
        }]
    }]
}

Resource

Displays a resource dropwell that accepts all file types.

{
    "title": "Resource",
    "id": "resource",
    "resource": {}
}

{
    "groups": [{
        "title": "Resource Example",
        "icon": "folder",
        "properties": [{
            "title": "Resource",
            "id": "resource",
            "resource": {}
        }]
    }]
}

Restricting File Types

You can restrict the file types allowed in a dropwell, by using the accepts property.

"resource": {
    "accepts": "svg"
}

Support for multiple file types can be added using comma seperated values.

"resource": {
    "accepts": "zip, pdf"
}

Segmented

Display a segmented control.

{
    "title": "Alignment",
    "id": "alignment",
    "segmented": {
        "default": {
            "base": "align-left",
            "md": "align-center"
        },
        "items": [{
            "value": "align-left",
            "icon": "text.alignleft"
        }, {
            "value": "align-center",
            "icon": "text.aligncenter",
            "default": true
        }, {
            "value": "align-right",
            "icon": "text.alignright"
        }]  
    }
}

{
    "groups": [{
        "title": "Segmented Example",
        "properties": [{
            "title": "Alignment",
            "id": "alignment",
            "segmented": {
                "default": {
                    "base": "align-left",
                    "md": "align-center"
                },
                "items": [{
                    "value": "align-left",
                    "icon": "text.alignleft"
                }, {
                    "value": "align-center",
                    "icon": "text.aligncenter",
                    "default": true
                }, {
                    "value": "align-right",
                    "icon": "text.alignright"
                }]  
            }
        }]
    }]
}

You can also use the following title key to display text instead of icons.

{
    "groups": [{
        "title": "Segmented Example",
        "properties": [{
            "title": "Alignment",
            "id": "alignment",
            "segmented": {
                "items": [{
                    "value": "align-left",
                    "title": "Left"
                }, {
                    "value": "align-center",
                    "title": "Center",
                    "default": true
                }, {
                    "value": "align-right",
                    "title": "Right"
                }]  
            }
        }]
    }]
}

Slider

A slider can be used for choosing from a range of values.

{
    "title": "Contrast",
    "id": "contrast",
    "slider": {
        "default": "contrast-70",
        "items": [
            { "value": "contrast-0", "title": "0" },
            { "value": "contrast-50", "title": "50" },
            { "value": "contrast-70", "title": "75" },
            { "value": "contrast-100", "title": "100" },
            { "value": "contrast-125", "title": "125" },
            { "value": "contrast-150", "title": "150" },
            { "value": "contrast-200", "title": "200" }
        ]
    }
}

The following example displays a stepped slider with seven pre-defined values.

{
    "groups": [{
        "title": "Slider Example",
        "properties": [{
            "title": "Contrast",
            "id": "contrast",
            "slider": {
                "default": "contrast-70",
                "items": [
                    { "value": "contrast-0", "title": "0" },
                    { "value": "contrast-50", "title": "50" },
                    { "value": "contrast-70", "title": "75" },
                    { "value": "contrast-100", "title": "100" },
                    { "value": "contrast-125", "title": "125" },
                    { "value": "contrast-150", "title": "150" },
                    { "value": "contrast-200", "title": "200" }
                ]
            }
        }]
    }]
}

The following example displays a stepped slider with seven pre-defined values.

{
    "groups": [{
        "title": "Slider Example",
        "properties": [{
            "title": "Contrast",
            "id": "contrast",
            "slider": {
                "default": "contrast-70",
                "items": [
                    { "value": "contrast-0", "title": "0" },
                    { "value": "contrast-50", "title": "50" },
                    { "value": "contrast-70", "title": "75" },
                    { "value": "contrast-100", "title": "100" },
                    { "value": "contrast-125", "title": "125" },
                    { "value": "contrast-150", "title": "150" },
                    { "value": "contrast-200", "title": "200" }
                ]
            }
        }]
    }]
}

The following example has a minimum value of 0 and maximum of 100. The units are set to round, and display in the UI with a "%" after the number.

{
    "groups": [{
        "title": "Slider Example",
        "properties": [{
            "title": "Contrast",
            "id": "contrast",
            "format": "{{value}}%",
            "slider": {
                "default": 50,
                "min": 0,
                "max": 100,
                "units": "%",
                "round": true
            }
        }]
    }]
}

An example slider setting a star rating between 0 and 5.

{
    "groups": [{
        "title": "Slider Example",
        "properties": [{
            "title": "Rating",
            "id": "rating",
            "slider": {
                "default": 3,
                "min": 0,
                "max": 5,
                "round": true,
                "units": "Stars",
                "ticks": 6
            }
        }]
    }]
}

Here's an example of an items array in sliders so you can set custom values for each point in the slider.

{
    "groups": [{
        "title": "Slider Example",
        "properties": [{
            "title": "Z Index",
            "id": "zIndex",
            "format": "z-{{value}}",
            "slider": {
                "default": "0",
                "items": [{
                    "value": "0",
                    "title": "0"
                }, {
                    "value": "10",
                    "title": "10"
                }, {
                    "value": "20",
                    "title": "20"
                }, {
                    "value": "30",
                    "title": "30"
                }, {
                    "value": "40",
                    "title": "40"
                }, {
                    "value": "50",
                    "title": "50"
                }]
            }
        }]
    }]
}

Supported Options

The slider control supports the following options.

Key

Type

Notes

title

string

The name of the Slider. This will be displayed beside the UI element of RapidWeaver

id

string

The id for this control.

format

string

default

string

The default value the slider should be set to.

items

array

min

number

The minimum value for the slider.

max

number

The maximum value for the slider.

units

string

The units string appears alongside the slider value in the user interface, but it is not included in the template output value.

round

boolean

If true an integer will be used instead of a floating point.

ticks

number

the number of ticks that will appear beneath the slider.

snap

boolean

is set to true, slider will snap to ticks.

Switch

Displays a switch, similar to a checkbox in functionality.

The following examples returns a true or false value. Note that responsive should be false.

The following example returns a string value instead of true or false. Note that responsive should be false.

To display this value in a template file, use {{display}}.

Responsive

When using a switch responsively, trueValue and falseValue should be set to a Tailwind class name. You'll then receive a list of Tailwind classes within your template, prefixed for each breakpoint as necessary.

Template

In the Template file you can do the following to display different html based on the value.

Text

Displays a text field in the inspector.

{
    "title": "Text Field",
    "id": "MyTextField",
    "text": {
    "default": "Hello World",
        "subtitle": "one"
    }
}

{
    "groups": [{
        "title": "Text Field Example",
        "properties": [{
            "title": "Text Field",
            "id": "MyTextField",
            "text": {
                "default" : "Hello World",
                "subtitle" : "one",
            }
        }]
    }]
}

Text Area

Displays a multiline text area in the inspector.

Theme Border Width

Displays the Theme Studio Border Width control.

Theme Border Radius

Displays the Theme Studio Border Radius control.

Theme Color

Displays the Theme Studio Color control.

For consistency and integration with the Theme Studio in RapidWeaver Elements, use the themeColor attribute to specify all color options for your elements. This ensures that the color settings are centrally managed and adaptable to theme changes.

Usage of themeColor:

default: Sets the initial or fallback color and brightness. In this case, the default color is black with a brightness value of 300.

Output Example: controls the output format of the customColor property. In your template files, referencing {{customColor}} with the example configuration above would output: text-black-300.

Setting Light and Dark mode colours

Theme Font

Displays the Theme Studio Font control.

{
    "title": "Theme Font",
    "id": "fontFamily",
    "themeFont": {
        "default": {
            "base": { "name": "body" },
            "sm": { "name": "heading" },
            "md": { "name": "quote" }
        }
    }
}

{
    "groups": [{
        "title": "Theme Font Example",
        "properties": [{
            "title": "Theme Font",
            "id": "fontFamily",
            "themeFont": {
                "default": {
                    "base": { "name": "body" },
                    "sm": { "name": "heading" },
                    "md": { "name": "quote" }
                }
            }
        }]
    }]
}

For effective theme integration in RapidWeaver Elements, it is recommended to use the themeFont attribute to define all font family settings for your elements. This approach ensures that font preferences are coordinated with the overall theme settings, providing a consistent user experience.

Here’s a structured example for defining a font property:

Output Example: In your template files, referencing {{fontFamily}} with the example configuration above would output: font-sub-heading sm:font-heading md:font-quote.

Theme Spacing

Displays the Theme Studio Spacing control.

{
    "title": "Padding",
    "id": "themeSpacing",
    "themeSpacing": {
        "mode": "padding",
        "default": {
            "base": {
                "left": "sm",
                "right": "sm",
                "top": "sm",
                "bottom": "sm"
            },
            "md": {
                "left": "md",
                "right": "md",
                "top": "md",
                "bottom": "md"
            }
        }
    }
}

{
    "groups": [{
        "title": "Theme Spacing Example",
        "properties": [{
            "title": "Padding",
            "id": "themeSpacing",
            "themeSpacing": {
                "mode": "padding",
                "default": {
                    "base": {
                        "left": "sm",
                        "right": "sm",
                        "top": "sm",
                        "bottom": "sm"
                    },
                    "md": {
                        "left": "md",
                        "right": "md",
                        "top": "md",
                        "bottom": "md"
                    }
                }
            }
        }]
    }]
}

The themeSpacing attribute is should be used for all space settings like padding, margins, gaps, translate, and positioning.

This control allows the user's site to dynamically adapt to any theme updates, changes, or overrides to the spacing scale.

The themeSpacing control has the following modes:

padding
margin
gap
transition
position
single

Each one of these modes correspond to the appropriate Tailwind utility classes. This means both developers and users can manage one single spacing scale that help promote consistency across all sites built in RapidWeaver Elements. See the examples below for more information.

{
    "groups": [{
        "title": "Theme Spacing Example",
        "properties": [{
            "title": "Padding",
            "id": "themeSpacing",
            "themeSpacing": {
                "mode": "padding",
                "default": {
                    "base": {
                        "left": "sm",
                        "right": "sm",
                        "top": "sm",
                        "bottom": "sm"
                    },
                    "md": {
                        "left": "md",
                        "right": "md",
                        "top": "md",
                        "bottom": "md"
                    }
                }
            }
        }]
    }]
}

Single Mode

The single mode allows you to access the spacing scale from the Theme Studio in a single select control. This is handy when you need to set a single property rather than all four properties (top, right, bottom left). For example, if you need to set only the top css property you can do so like this:

{
    "title": "Top",
    "id": "top",
    "format": "top-{{value}}"
    "themeSpacing": {
        "mode": "single",
        "default": {
            "base": {
                "value": "2"
            }
        }
    }
}

In this example, the default value will be returned as top-2.

Custom Values

You can also specify that a custom value should be used by default for the themeSpacing control. This allows you to gain precise control over the value of the spacing when your element is dropped on to a page.

Linking Values

Theme Shadow

Displays the Theme Studio Shadow control.

{
    "title": "Shadow",
    "id": "boxShadow",
    "themeShadow": {
        "default": {
            "name": "none"
        }
    }
}

{
    "groups": [{
        "title": "Theme Shadow Example",
        "properties": [{
            "title": "Shadow",
            "id": "boxShadow",
            "themeShadow": {
                "default": {
                    "name": "none"
                }
            }
        }]
    }]
}

Theme Text Style

Displays the Theme Studio Text Style control.

{
    "title": "Text Style",
    "id": "headingTextStyles",
    "themeTextStyle": {
        "default": {
            "base": {
                "name": "3xl"
            }
        }
    }
}

{
    "groups": [{
        "title": "Theme Text Style Example",
        "properties": [{
            "title": "Text Style",
            "id": "headingTextStyles",
            "themeTextStyle": {
                "default": {
                    "base": {
                        "name": "3xl"
                    }
                }
            }
        }]
    }]
}

Theme Typography

Displays the Theme Studio Typography class picker.

 {
          "title": "Typography",
          "id": "typography",
          "themeTypography": {
            "default": {
              "base": {
                "name": "body"
              },
              "md": {
                "name": "heading"
              }
            }
          }
        },

{
    "groups": [{
        "title": "Theme Text Style Example",
        "properties": [
         {
          "title": "Typography",
          "id": "typography",
          "themeTypography": {
            "default": {
              "base": {
                "name": "body"
              },
              "md": {
                "name": "heading"
              }
            }
          }
        },
        ]
    }]
}