Preview texts

This example stores a title field into the module.

module:
    module_options:
        form_fields:
            title:
                type: 'text'

You can preview it adding to the edit template:

<h1>{{ form.title.vars.data|default('') }}</h1>

It's recommended to be conservative, to prevent errors, so add a default filter.

Using placeholders

<h1 data-edit-content-placeholder="Write the title!">{{ form.title.vars.data|default('') }}</h1>

Content editable

module:
    module_options:
        form_fields:
            title:
                type: 'text'
                attr:
                    data-edit-content-input: 'title'

<h1 contenteditable="true" data-edit-content-target="title">{{ form.title.vars.data|default('')|raw }}</h1>

Important: if you use a display block element, when you add a new line it will append a <div> tag.
Use a inner inline-block element to prevent this behaviour.

Important: it's recommended to add a raw filter, to render HTML tags properly.

<h1><span contenteditable="true" data-edit-content-target="title">{{ form.title.vars.data|default('') }}</span></h1>

Work with translated texts

module:
    module_options:
        form_fields:
            title:
                type: 'translatable'
                type_options:
                    type: 'text'

{% for locale,localeField in form.title.vars.localeFields %}
    <h1 data-lang="{{ locale }}" contenteditable="true" data-edit-content-target="title.{{ locale }}">{{ localeField.vars.data|default('') }}</h1>
{% endfor %}