Templating / Templates for the Live Editor

Note: You are currently reading the documentation for Bolt 3.7. Looking for the documentation for Bolt 5.2 instead?

Bolt comes with built-in support for editing records as they'll appear on your website. It requires a little bit of set up, but once it's ready, the experience will look something like this:

Note: This feature is marked "Experimental": This means that it will basically work, but complex use-cases are not supported. Live Editing does not work with TemplateFields or Repeaters, for example.

In any record that has a corresponding page (which means viewless: false - the default for the ContentType), you can make any HTML, text or textarea field editable. When it is editable, clicking on the "live edit" button while editing that record will open an inline, live editor. Any field that is editable will have a yellow outline around it. After making changes, an editor can click "close editor" at the top right and those changes will propagate to their relevant fields in the regular editor.

Tip: the default Bolt-2016 theme is live-editor enabled. If you're unsure about how this all works, take a look at its source code in your Bolt installation.

To enable a field to be editble, Bolt has to know what field to map it to. It requires a very small and easy change to your theme code. For the live editor to work, the field must be the only contents of the element it is in. Then, you just add a data-bolt-field attribute set to the name of the field. For example, if you have a title field set up in your templates like this:

<h1>{{ record.title }}</h1>

This is how you would set it up for live editing:

<h1 data-bolt-field="title">{{ record.title }}</h1>

Simple!

To enable this for template fields, you need to make a reference with the text templatefields followed by the name of the field in square brackets. For example:

<section data-bolt-field="templatefields[section_1]">{{ record.templatefields.section_1 }}</section>

Note: To disable the live editor across your entire Bolt installation, set liveeditor: false in your config.yml.

Note:To disable the live editor for a ContentType, set liveeditor: false in your contentypes.yml. However, the global setting in config.yml must remain set to true