diff --git a/content/docs/configuration-options.md b/content/docs/configuration-options.md
index be4465c5..d49bfdc8 100644
--- a/content/docs/configuration-options.md
+++ b/content/docs/configuration-options.md
@@ -407,18 +407,20 @@ fields:
 
 ### `editor`
 
-This setting changes options for the editor view of a collection or a file inside a files collection. It has one option so far:
+This setting changes options for the editor view of a collection or a file inside a files collection. It has these options:
 
-* `preview`: set to `false` to disable the preview pane for this collection or file; defaults to `true`
+* `preview`: set to `false` to disable the preview pane for this collection or file; defaults to `true`.
+* `visualEditing`: set to `true` to allow users to click directly on content in the preview pane to edit fields. This works for preview widgets as well as for custom full-page preview templates. This is an alternative to scroll sync, providing a more direct way to interact with content. When enabled, scroll sync is automatically disabled to prevent interference. <span class="version-tag">3.6</span>
 
 **Example:**
 
 ```yaml
   editor:
-     preview: false
+    preview: true # default is true
+    visualEditing: true  # default is false
 ```
 
-**Note**: Setting this as a top level configuration will set the default for all collections
+**Note**: Setting `preview` as a top level configuration will set the default for all collections.
 
 ### `summary`
 
diff --git a/static/admin/config.yml b/static/admin/config.yml
index 1a509c94..bbbd83ea 100644
--- a/static/admin/config.yml
+++ b/static/admin/config.yml
@@ -6,11 +6,8 @@ backend:
   branch: main
 
 local_backend: true
-
 site_url: https://www.decapcms.org
-
 publish_mode: editorial_workflow
-
 media_folder: static/img
 public_folder: /img
 
@@ -20,6 +17,8 @@ docs_collection: &docs_collection
   summary: '{{weight}} - {{title}}'
   preview_path: 'docs/{{slug}}'
   sortable_fields: ['weight', 'title', 'group']
+  preview:
+    visualEditing: true
   fields:
     - { label: Title, name: title, widget: string }
     - label: Section
diff --git a/static/admin/editor-previews/docs.js b/static/admin/editor-previews/docs.js
index 87239d49..7c8114ee 100644
--- a/static/admin/editor-previews/docs.js
+++ b/static/admin/editor-previews/docs.js
@@ -4,12 +4,10 @@ CMS.registerPreviewStyle('/styles/style.min.css')
 
 const DocsPreview = createClass({
   render: function () {
-    const { entry, widgetFor } = this.props
-    const data = entry.getIn(['data']).toJS()
-    const { title } = data
+    const { widgetFor } = this.props
     return h('div', { className: 'container size-lg' },
       h('div', { className: 'page' },
-        h('h1', {}, title),
+        h('h1', {}, widgetFor('title')),
         h('div', { className: 'markdown' },
           h('div', {}, widgetFor('body'))
         )
@@ -22,10 +20,10 @@ const BlogPreview = createClass({
   render: function () {
     const { entry, widgetFor } = this.props
     const data = entry.getIn(['data']).toJS()
-    const { title, author, date } = data
+    const { author, date } = data
     return h('div', { className: 'container size-sm' },
       h('div', { className: 'page' },
-        h('h1', {}, title),
+        h('h1', {}, widgetFor('title')),
         h('p', { className: 'meta-info' },
           `By ${author} on ${date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}`
         ),