# Add a bindable content property

See Development process to load a base element in dev mod.

WARNING

Binding is only available for element

We will add a text property on our element, so that the user can dynamically change the text of the element.

# wwDefaultContent

First step is to add the default content value

wwDefaultContent: {
    textColor: "#BC1010",
    text: "My text",
},

# Use the value inside the template

<div class="my-element">
    <p :style="textStyle">{{ content.text }}</p>
</div>

# Change the ww-config.json

We will add a property inside ww-config.json to add a textarea input on the Settings pannel

{
    "componentPath": "./src/wwElement.vue",
    "editor": {
        "label": {
            "en": "My Element"
        },
        "styleOptions": {
            "textColor": {
                "label": {
                    "en": "Text color"
                },
                "type": "Color"
            }
        },
        "settingsOptions": {
            "text": {
                "label": {
                    "en": "Title"
                },
                "type": "Textarea",
                "bindable": true,
            }
        }
    }
}

WARNING

You need to restart your dev server so that the config is load correctly

See also: Add a dropzone for binding repeatable content