Viewing in a web browser - Proto.io Player
The Proto.io Player is accessible from the 'Preview' button on the top right of the Editor. It opens a new tab in which you preview your project to experience how it looks and feels. You can try out your interactions and animations by using your mouse. You also have the option to navigate between the various screens, using the list or a thumbnail view of the screen browser on the right.
The vertical toolbar provides tools related to the Player: show/hide sidebar, zoom, refresh preview (reload project), change device orientation, show/hide interaction hotspots, show/hide click effect, change device skin color, and enter fullscreen. The show interaction hotspots feature, which can also be activated by pressing the SHIFT key, highlights the interactive areas on the screen and indicates what type of trigger event has been applied to them.
The various icons shown, depending on the trigger event are seen in the table below.
![]() |
Tap, click, delayed tap |
![]() |
Tap hold, force touch, press, press up |
![]() |
Touch, release |
![]() |
Swipe, pan, pan start, pan end |
![]() |
Swipe left, pan left |
![]() |
Swipe right, pan right |
![]() |
Swipe up, pan up |
![]() |
Swipe down, pan down |
![]() |
Pinch, pinch out, pinch in |
![]() |
Container page enter, container page change, container scroll, container scroll end, container scroll to |
![]() |
Keydown |
![]() |
Mouse over, mouse out |
![]() |
On drag, on drag start, on drag end, on throw update, on throw complete |
![]() |
On rotate, on rotate start, on rotate end, on rotate throw update, on rotate throw complete |
![]() |
On state enter, on state leave, on state transition start, on state transition end |
![]() |
On input focus, on input blur, on input key up |
![]() |
On change, on checkbox change, on picker change |
![]() |
On slider drag, on slider drag start, on slider drag end, on range drag, on range drag start, on range drag end |
Just below the screen browser, you have 4 options: a toggle for Editors’ comments, Send to mobile, Share (see Sharing basics), and Export to PDF/PNG.
The Editors’ comments toggle button enables and disables the comments and annotations feature among the users who have edit rights (see Setting up users). Comments and annotations facilitate the communication and collaboration between team members.
Send to mobile is a quick way to send a link to your phone (via SMS) for previewing your prototype. You will be prompted to open it in the Proto.io app.
You can also watch the relevant video tutorial.