Pressing the eye icon {{$:/core/ui/EditorToolbar/preview}} will open or close a preview window showing the results of rendering the WikiText (the icon-eye will also open or close).
Right to the eye there is another icon, {{$:/core/images/chevron-down}}, which when clicked, shows you a dropdown which gives you access to six different types of preview:
* //output// shows you the text as you see it when you do not edit the tiddler.
* //html// shows you the [[source code|https://www.w3schools.com/html/html_intro.asp]] of that output. Your web browser uses this source code to display webpages.
* //parsetree// and //widgettree// show you the two object trees that ~TiddlyWiki internally generates from ~WikiText. The //parsetree// collects basic information about your ~WikiText. From the informations of the parsetree the //widgettree// then generates extended informations and finally the above html (and the widgettree also does other things).
* //differences from current// shows you the differences since the tiddler was last saved. Deleted parts are <span style="color:red;">red</span>, added parts are <span style="color:green;">green</span>.
* //differences from shadow (if any)// does the same, but this time it shows you the differences to the underlying [[shadow-tiddler|ShadowTiddlers]].
<<.tip "By default, the preview pane button controls whether the preview pane is displayed for all tiddlers that are open for editing. There is a [[hidden setting|Hidden Setting: Show Edit Preview per Tiddler]] to make the button work on a per-tiddler basis">>
<<.tip "The variable [[tv-tiddler-preview|tv-tiddler-preview Variable]] can be used to detect whether content is being displayed in the preview pane.">>
