Variables Editor Example

<vce-variables-editor
 variables="{&quot;fontSize&quot;:&quot;12&quot;,&quot;background&quot;:&quot;#ff0&quot;,&quot;bg&quot;:&quot;&quot;}"
 variable-configurations="[{&quot;id&quot;:&quot;bg&quot;,&quot;display_name&quot;:&quot;&quot;,&quot;default_value&quot;:&quot;https://flif.info/example-images/fish-lossy454.jp2.png&quot;,&quot;is_overridable&quot;:true,&quot;type&quot;:&quot;image&quot;},{&quot;id&quot;:&quot;borderStyle&quot;,&quot;display_name&quot;:&quot;&quot;,&quot;default_value&quot;:&quot;solid&quot;,&quot;is_overridable&quot;:false,&quot;type&quot;:&quot;string&quot;},{&quot;display_name&quot;:&quot;Font Size&quot;,&quot;id&quot;:&quot;fontSize&quot;,&quot;default_value&quot;:&quot;16&quot;,&quot;is_overridable&quot;:true,&quot;type&quot;:&quot;integer&quot;},{&quot;id&quot;:&quot;background&quot;,&quot;display_name&quot;:&quot;Background&quot;,&quot;default_value&quot;:&quot;#cccccc&quot;,&quot;is_overridable&quot;:true,&quot;type&quot;:&quot;color&quot;},{&quot;id&quot;:&quot;pear&quot;,&quot;display_name&quot;:&quot;Pear&quot;,&quot;default_value&quot;:&quot;pear&quot;,&quot;is_overridable&quot;:true,&quot;type&quot;:&quot;string&quot;},{&quot;id&quot;:&quot;Paragraph Alignment&quot;,&quot;default_value&quot;:&quot;left&quot;,&quot;is_overridable&quot;:true,&quot;type&quot;:&quot;select&quot;,&quot;type_config&quot;:{&quot;options&quot;:[{&quot;id&quot;:&quot;1&quot;,&quot;name&quot;:&quot;Align left&quot;,&quot;value&quot;:&quot;left&quot;},{&quot;id&quot;:&quot;2&quot;,&quot;name&quot;:&quot;Align right&quot;,&quot;value&quot;:&quot;right&quot;}]}}]"
></vce-variables-editor>