By organizing your property panel into items and allowing them to get groups, you can visually segregate your property panel:
FontProperties: {
type: "items",
label: 'Font Properties',
grouped: true,
items: {
group1: {
type:'items',
items: {
fontSizeSlider: {
type: "number",
component: "slider",
label: "Font Size (px)",
ref: "FontSizeSliderValue",
min: 10,
max: 20,
step: 1,
defaultValue: 15,
change: function(prop){
prop.fontSize = prop.FontSizeSliderValue
}
},
fontSize: {
type: "integer",
expression: "optional",
ref: "fontSize",
defaultValue: 15
}
}
},
group2: {
type:'items',
items: {
fontFamily: {
label: "Font Family",
type: "string",
expression: "optional",
ref: "fontfamily"
}
}
}
}
}
These will generate the following grouped view in the property panel: