{"componentChunkName":"component---src-templates-doc-jsx","path":"/docs/synced-interactions/","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nconst _frontmatter = {\n  \"title\": \"Synced interactions\"\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `Polypane syncs interactions across all panes simultaneously so when you scroll, click, type, or hover in one pane, every other pane follows. This means you only need to test an interaction once to see it at every breakpoint at the same time.`), mdx(\"p\", null, `You can manage which interactions are synced, or disable them all, by right-clicking the sync button in the address bar.`), mdx(\"img\", {\n    src: syncedInteractions,\n    alt: \"\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `By default Polypane syncs the following user interactions and events: navigation, scroll, hover, click, keypress, input, change. It can also sync focus across panes.`), mdx(\"h3\", {\n    \"id\": \"scroll-syncing\"\n  }, `Scroll syncing`), mdx(\"p\", null, `The scroll position in panes is synced automatically, and you can toggle it on and off using the button in the address bar or by pressing `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `cmd/ctrl o`), `.`), mdx(\"p\", null, `Scroll syncing works on all scrollable elements in both directions. This means that if you have a scrollable element inside a pane, the scroll position of that element will be synced across panes as well.`), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, `The main vertical scroll on a page, the one on `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `document.scrollingElement`), `, is special in that browsers have optimized that scroller compared to all others. So while Polypane syncs any scrollable element, we recommend using the browsers `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `scrollingElement`), ` above others for the best performance.`)), mdx(\"h4\", {\n    \"id\": \"syncing-is-disabled-when-browsersync-is-detected\"\n  }, `Syncing is disabled when Browsersync is detected`), mdx(\"p\", null, `Browsersync also syncs the scroll position, clicks and form elements but because it's slightly slower than Polypane's syncing, it continuously undoes Polypane's syncing, leading to a very frustrating experience.`), mdx(\"p\", null, `Polypane will `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `disable its syncing`), ` when it detects Browsersync with \"ghost mode\" active to prevent this poor behavior. We recommend you `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/browsersync-and-polypane/\"\n  }), `migrate to using Polypane's built-in tools`), ` or `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.browsersync.io/docs/options#option-ghostMode\"\n  }), `turn off ghostMode`), ` in Browsersync and let Polypane handle all the event synchronisation.`), mdx(\"p\", null, `Polypane will show a popup notifying you about this for every page that it detects browsersync on.`), mdx(\"h3\", {\n    \"id\": \"mouse-interactions\"\n  }, `Mouse interactions`), mdx(\"p\", null, `Hover and click interactions are synchronized between panes. This means you will see the hover effect of an element in each pane, and click interactions that trigger focus or open a menu are applied everywhere.`), mdx(\"p\", null, `Mouse clicks are fully simulated. Website code that checks whether a mouse click is synthetic will possibly not be executed.`), mdx(\"h4\", {\n    \"id\": \"form-submissions-are-prevented\"\n  }, `Form submissions are prevented`), mdx(\"p\", null, `When a mouse click event (or keyboard event) triggers a form POST submit action, that event it is not synced across panes to make sure POST calls are only sent once. Most servers will not handle multiple submissions of the same form well. For example, a delete action, database insertion action or a payment action might be triggered multiple times causing unintended side effects.`), mdx(\"p\", null, `Note that if you use JavaScript event handlers without also using the appropriate `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `form`), ` semantics, we can not detect this.`), mdx(\"h4\", {\n    \"id\": \"disabling-syncing-the-next-click\"\n  }, `Disabling syncing the next click`), mdx(\"p\", null, `Sometimes while testing you will want to disable the next click from syncing, for example to prevent a JavaScript form from being submitted.`), mdx(\"p\", null, `Instead of turning off click syncing and then turning it back on, right-click the page to open the context menu and select \"Don't sync next click\".`), mdx(\"h3\", {\n    \"id\": \"keyboard-interactions\"\n  }, `Keyboard interactions`), mdx(\"p\", null, `Polypane syncs both input event and key presses, so that form interactions and any shortcuts you may have on a page will be triggered in all panes.`), mdx(\"h3\", {\n    \"id\": \"form-filling\"\n  }, `Form filling`), mdx(\"p\", null, `Interacting with forms is synced between panes. Anything typed into an input or textarea or any selection made in a select, radio or checkbox is automatically applied in the other panes too. Check out our `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/form-autofill/\"\n  }), `form autofilling feature`), ` to fill forms even more efficiently.`), mdx(\"h4\", {\n    \"id\": \"restrictions\"\n  }, `Restrictions`), mdx(\"p\", null, `File inputs values are not synced, as they are not allowed to be set programmatically for security reasons. When testing a form with file inputs, make sure to set the file input in each pane.`), mdx(\"h3\", {\n    \"id\": \"focus\"\n  }, `Focus`), mdx(\"p\", null, `Usually only a single element can have focus at any one time. By turning on Focus sync, the focus status in each pane is preserved. This lets you test out focus styling across all panes in one go.`), mdx(\"video\", {\n    src: \"/blogs/polypane-8/focus-sync.mp4\",\n    loop: true,\n    controls: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"h4\", {\n    \"id\": \"emulate-a-focused-page\"\n  }, `Emulate a focused page`), mdx(\"p\", null, `Focus sync also lets you emulate a focused page, where interactions like popout menus that disappear when focus is lost are preserved, letting you inspect them.`), mdx(\"p\", null, `When the sync button is not available (in the Focus and Full layouts) you can open the pane's devtools, click the three-dot menu, go to 'more tools', then 'rendering' and then scroll down to 'Emulate a focused page'.`), mdx(\"h3\", {\n    \"id\": \"navigation-sync\"\n  }, `Navigation sync`), mdx(\"p\", null, `Navigation is synced between all panes as a last measure when input syncing doesn't result in the same URL in all panes (for example, because `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/website-issues-you-could-encounter/#not-syncing-between-panes\"\n  }), `the mobile size uses a different navigation than the desktop size`), `).`), mdx(\"video\", {\n    src: navsync,\n    controls: true,\n    muted: true,\n    playsInline: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `Navigation sync can be toggled from the sync menu by clicking \"navigation\". Doing so will disable navigation for all panes in the current tab.`), mdx(\"p\", null, `Navigation sync can also be turned off for a specific pane in the \"network\" tab under the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/emulation/#sync-navigation\"\n  }), `device options`), ` of a pane for that specific pane, letting you decouple that pane from the rest. You can use this to compare your local site with the live site, or compare two different sites side-by-side.`), mdx(\"p\", null, `For a comprehensive guide on working with multiple different URLs in Polypane, see `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/showing-multiple-urls/\"\n  }), `Showing multiple URLs`), `.`), mdx(\"h3\", {\n    \"id\": \"polypane-message-bus\"\n  }, `Polypane Message Bus`), mdx(\"p\", null, `For events that aren't synced out of the box by Polypane, you can use the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/message-bus/\"\n  }), `Polypane Message Bus`), `.`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":3,"excerpt":"Polypane syncs interactions across all panes simultaneously so when you scroll, click, type, or hover in one pane, every other pane follows…","frontmatter":{"title":"Synced interactions","cover":null,"date":null,"beta":null},"fields":{"nextTitle":"Web Vitals","nextSlug":"/docs/web-vitals/","prevTitle":"Storage panel","prevSlug":"/docs/storage-panel/","slug":"/docs/synced-interactions/","date":null,"ogFileName":"synced-interactions"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/docs/1-password-setup-instructions/"},"frontmatter":{"title":"1Password setup instructions"}}},{"node":{"fields":{"slug":"/docs/accessibility-audit-workflow/"},"frontmatter":{"title":"Accessibility audit workflow"}}},{"node":{"fields":{"slug":"/docs/accessibility-overview/"},"frontmatter":{"title":"Accessibility overview"}}},{"node":{"fields":{"slug":"/docs/accessibility-panel/"},"frontmatter":{"title":"Accessibility panel"}}},{"node":{"fields":{"slug":"/docs/application-folder/"},"frontmatter":{"title":"Application folder"}}},{"node":{"fields":{"slug":"/docs/brand-guidelines/"},"frontmatter":{"title":"Brand guidelines"}}},{"node":{"fields":{"slug":"/docs/breakpoints/"},"frontmatter":{"title":"Breakpoints"}}},{"node":{"fields":{"slug":"/docs/browse/"},"frontmatter":{"title":"Browse"}}},{"node":{"fields":{"slug":"/docs/browser-extensions/"},"frontmatter":{"title":"Browser extensions"}}},{"node":{"fields":{"slug":"/docs/browser-features/"},"frontmatter":{"title":"Browser features"}}},{"node":{"fields":{"slug":"/docs/browsersync-and-polypane/"},"frontmatter":{"title":"Browsersync and Polypane"}}},{"node":{"fields":{"slug":"/docs/color-picker/"},"frontmatter":{"title":"Color Picker"}}},{"node":{"fields":{"slug":"/docs/command-bar/"},"frontmatter":{"title":"Command Bar"}}},{"node":{"fields":{"slug":"/docs/command-line-options/"},"frontmatter":{"title":"Command line options"}}},{"node":{"fields":{"slug":"/docs/configuring-logitech-mouses/"},"frontmatter":{"title":"Configuring Logitech mouses"}}},{"node":{"fields":{"slug":"/docs/configuring-webstorm-to-work-with-polypane/"},"frontmatter":{"title":"Configuring WebStorm to work with Polypane"}}},{"node":{"fields":{"slug":"/docs/console/"},"frontmatter":{"title":"Console"}}},{"node":{"fields":{"slug":"/docs/customizing-polypane/"},"frontmatter":{"title":"Customizing Polypane"}}},{"node":{"fields":{"slug":"/docs/dark-and-light-mode/"},"frontmatter":{"title":"Dark and light mode"}}},{"node":{"fields":{"slug":"/docs/data-processing-agreement/"},"frontmatter":{"title":"Data Processing Agreement"}}},{"node":{"fields":{"slug":"/docs/debug-tools/"},"frontmatter":{"title":"Debug tools"}}},{"node":{"fields":{"slug":"/docs/detecting-polypane/"},"frontmatter":{"title":"Detecting Polypane"}}},{"node":{"fields":{"slug":"/docs/developer-tools/"},"frontmatter":{"title":"Developer tools"}}},{"node":{"fields":{"slug":"/docs/device-presets/"},"frontmatter":{"title":"Device presets"}}},{"node":{"fields":{"slug":"/docs/devtools-panel/"},"frontmatter":{"title":"Devtools Panel"}}},{"node":{"fields":{"slug":"/docs/elements-panel/"},"frontmatter":{"title":"Elements Panel"}}},{"node":{"fields":{"slug":"/docs/emulation/"},"frontmatter":{"title":"Emulation"}}},{"node":{"fields":{"slug":"/docs/experimental-chromium-features/"},"frontmatter":{"title":"Experimental Chromium features"}}},{"node":{"fields":{"slug":"/docs/find-elements/"},"frontmatter":{"title":"Find elements"}}},{"node":{"fields":{"slug":"/docs/form-autofill/"},"frontmatter":{"title":"Form autofill"}}},{"node":{"fields":{"slug":"/docs/global-zoom/"},"frontmatter":{"title":"Global zoom"}}},{"node":{"fields":{"slug":"/docs/helper-extension-for-other-browsers/"},"frontmatter":{"title":"Helper extension for other browsers"}}},{"node":{"fields":{"slug":"/docs/horizontal-overflow/"},"frontmatter":{"title":"Horizontal overflow detection"}}},{"node":{"fields":{"slug":"/docs/integrations/"},"frontmatter":{"title":"Integrations"}}},{"node":{"fields":{"slug":"/docs/intro-to-panel/"},"frontmatter":{"title":"Intro to panel"}}},{"node":{"fields":{"slug":"/docs/intro-to-panes/"},"frontmatter":{"title":"Intro to panes"}}},{"node":{"fields":{"slug":"/docs/json-and-xml-viewer/"},"frontmatter":{"title":"JSON and XML viewer"}}},{"node":{"fields":{"slug":"/docs/known-issues/"},"frontmatter":{"title":"Known issues"}}},{"node":{"fields":{"slug":"/docs/layout-debugging/"},"frontmatter":{"title":"Layout debugging"}}},{"node":{"fields":{"slug":"/docs/layouts/"},"frontmatter":{"title":"Layouts"}}},{"node":{"fields":{"slug":"/docs/link/"},"frontmatter":{"title":"Share panel"}}},{"node":{"fields":{"slug":"/docs/list-of-shortcuts/"},"frontmatter":{"title":"List of shortcuts"}}},{"node":{"fields":{"slug":"/docs/live-auto-reloading/"},"frontmatter":{"title":"Live/auto reloading"}}},{"node":{"fields":{"slug":"/docs/making-screenshots/"},"frontmatter":{"title":"Making screenshots"}}},{"node":{"fields":{"slug":"/docs/measure-text-length/"},"frontmatter":{"title":"Measure text length"}}},{"node":{"fields":{"slug":"/docs/mental-model/"},"frontmatter":{"title":"Mental model of Polypane's browser contexts"}}},{"node":{"fields":{"slug":"/docs/message-bus/"},"frontmatter":{"title":"Message Bus"}}},{"node":{"fields":{"slug":"/docs/meta-information/"},"frontmatter":{"title":"Meta information"}}},{"node":{"fields":{"slug":"/docs/network-panel/"},"frontmatter":{"title":"Network panel"}}},{"node":{"fields":{"slug":"/docs/other-tools/"},"frontmatter":{"title":"Polypane and local servers"}}},{"node":{"fields":{"slug":"/docs/outline-panel/"},"frontmatter":{"title":"Outline Panel"}}},{"node":{"fields":{"slug":"/docs/pane-management/"},"frontmatter":{"title":"Manage panes"}}},{"node":{"fields":{"slug":"/docs/pane-sizes/"},"frontmatter":{"title":"Pane sizes"}}},{"node":{"fields":{"slug":"/docs/performance/"},"frontmatter":{"title":"Performance"}}},{"node":{"fields":{"slug":"/docs/pitching-polypane/"},"frontmatter":{"title":"Pitching Polypane"}}},{"node":{"fields":{"slug":"/docs/polypane-peek/"},"frontmatter":{"title":"Polypane Peek"}}},{"node":{"fields":{"slug":"/docs/portal/"},"frontmatter":{"title":"Polypane Portal"}}},{"node":{"fields":{"slug":"/docs/projects/"},"frontmatter":{"title":"Projects"}}},{"node":{"fields":{"slug":"/docs/recording/"},"frontmatter":{"title":"Recording"}}},{"node":{"fields":{"slug":"/docs/reference-image/"},"frontmatter":{"title":"Reference image"}}},{"node":{"fields":{"slug":"/docs/reload-css/"},"frontmatter":{"title":"Reload CSS"}}},{"node":{"fields":{"slug":"/docs/responsive-debugging-workflow/"},"frontmatter":{"title":"Responsive debugging workflow"}}},{"node":{"fields":{"slug":"/docs/review-and-approval-by-it-and-security/"},"frontmatter":{"title":"Review and approval by IT and Security"}}},{"node":{"fields":{"slug":"/docs/rulers-grids-and-guides/"},"frontmatter":{"title":"Rulers, grids and guides"}}},{"node":{"fields":{"slug":"/docs/sales-and-procurement/"},"frontmatter":{"title":"Sales and Procurement"}}},{"node":{"fields":{"slug":"/docs/security-policy/"},"frontmatter":{"title":"Security Policy"}}},{"node":{"fields":{"slug":"/docs/security/"},"frontmatter":{"title":"Security"}}},{"node":{"fields":{"slug":"/docs/session-management/"},"frontmatter":{"title":"Session management"}}},{"node":{"fields":{"slug":"/docs/setup/"},"frontmatter":{"title":"Setup"}}},{"node":{"fields":{"slug":"/docs/showing-multiple-urls/"},"frontmatter":{"title":"Showing multiple URLs"}}},{"node":{"fields":{"slug":"/docs/simulators/"},"frontmatter":{"title":"Simulators"}}},{"node":{"fields":{"slug":"/docs/snippets/"},"frontmatter":{"title":"Snippets"}}},{"node":{"fields":{"slug":"/docs/social-card-and-open-graph-workflow/"},"frontmatter":{"title":"Social card and Open Graph workflow"}}},{"node":{"fields":{"slug":"/docs/source-panel/"},"frontmatter":{"title":"Source panel"}}},{"node":{"fields":{"slug":"/docs/storage-panel/"},"frontmatter":{"title":"Storage panel"}}},{"node":{"fields":{"slug":"/docs/switching-to-polypane/"},"frontmatter":{"title":"Switching to Polypane"}}},{"node":{"fields":{"slug":"/docs/synced-interactions/"},"frontmatter":{"title":"Synced interactions"}}},{"node":{"fields":{"slug":"/docs/tab-customization/"},"frontmatter":{"title":"Tab customization"}}},{"node":{"fields":{"slug":"/docs/team-workflows/"},"frontmatter":{"title":"Team workflows"}}},{"node":{"fields":{"slug":"/docs/ui-overview/"},"frontmatter":{"title":"Polypane UI overview"}}},{"node":{"fields":{"slug":"/docs/web-vitals/"},"frontmatter":{"title":"Web Vitals"}}},{"node":{"fields":{"slug":"/docs/website-issues-you-could-encounter/"},"frontmatter":{"title":"Website issues you could encounter"}}},{"node":{"fields":{"slug":"/docs/workspace-management/"},"frontmatter":{"title":"Workspace management"}}},{"node":{"fields":{"slug":"/docs/workspaces/"},"frontmatter":{"title":"Workspaces"}}}]}},"pageContext":{"slug":"/docs/synced-interactions/"}},"staticQueryHashes":["4164364741","425175329"]}