Polypane syncs most interactions between all panes. You can manage which interactions are synced by right-clicking the sync button in the address bar.
By default Polypane syncs the following user interactions: scroll, hover, click, keypress, input, change. It can also sync focus across panes.
Hover and click interactions are synchronised between panes. This means you will see the hover effect in each pane, and click interactions that trigger focus or open a menu are applied everywhere.
The hover synchronisation can not fully simulate a mouse hover, so there are rules that are not applied: CSS rules that change child or pseudo elements of hovered elements are currently not applied, and thus won't be shown.
Mouse clicks are fully simulated. Website code that checks whether a mouse click is synthetic will possibly not be executed.
Form submissions are prevented
form semantics, we can not detect this.
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
By default scroll syncing works on the page viewport (which is the same as the
html element) but some websites set the height of the
html and the
body elements to 100%, making the
body element the scroll container. Though we recommend that you don't do that, scroll syncing will automatically switch over to sync the position of the
Scroll syncing is disabled when BrowserSync is detected
Browsersync can sync the scroll position but because it's slightly slower than Polypane's scroll syncing, it continuously resets the scroll to a previous position, leading to a very frustrating experience.
Polypane will disable its scroll syncing when it detects Browsersync with "ghost mode" active to prevent this poor behavior. We recommend you turn off ghostMode in Browsersync and let Polypane handle all the event synchronisation.
Polypane will show a popup notifying you about this for every page that it detects browsersync on.
Key presses are synchronised between panes, so that any shortcuts you may have on a page will be triggered in all panes, as well as any form input
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.
Normally on an operating system 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.
Polypane Message Bus
For events that aren't synced out of the box by Polypane, you can use the Polypane Message Bus.
Have a question about Polypane?
Contact us any time though chat, Slack or our contact form:Contact Support
Build your next project with Polypane
- Use all features on all plans
- On Mac, Window and Linux
- 14-day free trial – no credit card needed