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