|
| 1 | +--- |
| 2 | +title: Live Preview |
| 3 | +--- |
| 4 | +import React from 'react'; |
| 5 | +import VideoPlayer from '@site/src/components/Video/player'; |
| 6 | + |
| 7 | +The **Live Preview** feature in **Phoenix Code** provides instant feedback on changes made to **HTML** and **CSS** files, letting you see your edits in real-time. |
| 8 | + |
| 9 | +> For HTML files, Live Preview is enabled by default. For other file types, you might need to do some manual setup. |
| 10 | + |
| 11 | +--- |
| 12 | + |
| 13 | +## Showing or Hiding Live Preview |
| 14 | + |
| 15 | +To show or hide Live Preview, click the **Lightning Bolt** icon at the top of the right toolbar. |
| 16 | + |
| 17 | + |
| 18 | +> This button toggles the visibility of the Live Preview panel. |
| 19 | + |
| 20 | +Alternatively, toggle from `File > Live Preview` or use the keyboard shortcut (default: `Ctrl + Alt + L` on Windows/Linux, `Cmd + Alt + L` on macOS). |
| 21 | + |
| 22 | +To customize the keyboard shortcut, see the [Keyboard Shortcuts Guide](../keyboard-shortcuts). |
| 23 | + |
| 24 | + |
| 25 | + |
| 26 | +--- |
| 27 | + |
| 28 | +## Understanding the Bolt Icon |
| 29 | + |
| 30 | +The Live Preview bolt icon appears in different colors, each indicating a different status: |
| 31 | + |
| 32 | + |
| 33 | + |
| 34 | +* **Gray bolt**: Live Preview is currently turned off. |
| 35 | + |
| 36 | + |
| 37 | + |
| 38 | +* **Half yellow bolt**: Live Preview is connecting. |
| 39 | + |
| 40 | + |
| 41 | + |
| 42 | +* **Full yellow bolt**: Live Preview is successfully connected. Changes will now appear in real-time. |
| 43 | + |
| 44 | + |
| 45 | + |
| 46 | +* **Pink bolt**: There is a syntax error in your code. Live Preview is not updating because of that. |
| 47 | + |
| 48 | +> You can also hover over the bolt icon to see a tooltip showing the current status. |
| 49 | + |
| 50 | +### Status Overlays |
| 51 | + |
| 52 | +When there's a syntax error, the bolt icon turns pink and Phoenix Code also displays an overlay in Live Preview stating that there is an error. |
| 53 | + |
| 54 | +<!-- TODO: replace this image as in this image the index.html file name is not completely visible --> |
| 55 | + |
| 56 | + |
| 57 | +You can close this overlay by clicking the `×` icon and the overlay won't appear again. |
| 58 | + |
| 59 | +Phoenix Code also displays a connecting overlay while Live Preview is establishing a connection. |
| 60 | + |
| 61 | +<!-- TODO: replace this image as in this image the index.html file name is not completely visible --> |
| 62 | + |
| 63 | + |
| 64 | +--- |
| 65 | + |
| 66 | +## Live Preview Toolbar |
| 67 | + |
| 68 | +Phoenix Code provides various options in the Live Preview toolbar. |
| 69 | + |
| 70 | + |
| 71 | + |
| 72 | +> The browser icons and settings button are hidden by default and appear only on hover. |
| 73 | + |
| 74 | +### Toolbar Options |
| 75 | + |
| 76 | + |
| 77 | + |
| 78 | +* **Reload Live Preview** — Refreshes the Live Preview page. Use this when Live Preview lags behind or doesn't update with your code changes. |
| 79 | + |
| 80 | +--- |
| 81 | + |
| 82 | +<!-- TODO: replace this image as the show ruler lines option is missing --> |
| 83 | + |
| 84 | + |
| 85 | +* **Live Preview Modes** — Live Preview offers 3 modes: **Preview Mode**, **Highlight Mode**, and **Edit Mode**. |
| 86 | + |
| 87 | + - **Preview Mode**: Disables all editing features. The page appears as it would in a normal browser. |
| 88 | + > Live Preview still updates in real-time when you edit source code in Preview Mode. |
| 89 | + |
| 90 | + - **Highlight Mode**: When you click an element in Live Preview, a highlight marker appears showing the element's position, padding, and margin. Phoenix Code also moves your cursor in the editor to that element so you can start editing directly. Highlighting also works in reverse: moving your cursor in the editor highlights the corresponding element in Live Preview. |
| 91 | + |
| 92 | + <VideoPlayer |
| 93 | + src="https://docs-images.phcode.dev/videos/live-preview/highlight-mode.mp4" |
| 94 | + /> |
| 95 | + |
| 96 | + - **Edit Mode**: Allows you to edit Live Preview directly. Phoenix Code will automatically update the source code. [Click here to read more about Live Preview Edit Mode and its features](../../Pro%20Features/live-preview-edit). |
| 97 | + > The `Edit Highlights on Hover` and `Show Measurements` option in the dropdown is an Edit Mode feature. |
| 98 | + |
| 99 | +--- |
| 100 | + |
| 101 | +<VideoPlayer |
| 102 | + src="https://docs-images.phcode.dev/videos/live-preview/preview-mode-button.mp4" |
| 103 | +/> |
| 104 | + |
| 105 | +* **Preview Mode Button** — Located right after the Reload button, this provides a quick shortcut to switch to Preview Mode. Click it to switch to Preview Mode; click again to return to your previous mode. |
| 106 | + |
| 107 | +--- |
| 108 | + |
| 109 | + |
| 110 | + |
| 111 | +* **Pin or Unpin Preview Page** — Pin a file in Live Preview so it remains displayed even when you switch to other files. Click again to unpin. |
| 112 | + |
| 113 | +--- |
| 114 | + |
| 115 | + |
| 116 | + |
| 117 | +* **File Name** — Displays the name of the currently previewed file. Click it to open that file in the editor (if not already open). |
| 118 | + |
| 119 | +--- |
| 120 | + |
| 121 | + |
| 122 | + |
| 123 | +* **Pop Out to New Window** — Opens Live Preview in your default browser. This is helpful when you want to see how your page looks in a full browser window. |
| 124 | + |
| 125 | +--- |
| 126 | + |
| 127 | + |
| 128 | + |
| 129 | +* **Browser Icons** — Select a specific browser icon to open the page in that browser. This helps you see how your page looks across different browsers. The icons are hidden by default. You need to hover over the toolbar to reveal them. |
| 130 | + > This option is available only in Desktop apps. |
| 131 | + |
| 132 | +--- |
| 133 | + |
| 134 | + |
| 135 | + |
| 136 | +* **Live Preview Settings** — Located at the right-most side of the toolbar. [Read more about Live Preview Settings](./live-preview-settings/#accessing-live-preview-settings). |
| 137 | + |
| 138 | +--- |
| 139 | + |
| 140 | +## Using Live Preview with HTML Files |
| 141 | + |
| 142 | +1. Open the HTML file you want to preview. |
| 143 | +2. Click the **Lightning Bolt** icon to open Live Preview (if it's closed). |
| 144 | +3. Make changes to the HTML file and see them update in Live Preview in real-time. |
| 145 | + |
| 146 | +> If changes don't appear, reload Live Preview and wait until the bolt icon turns full yellow. |
| 147 | + |
| 148 | +--- |
| 149 | + |
| 150 | +## Live Preview Demonstrated |
| 151 | + |
| 152 | +<VideoPlayer |
| 153 | + src="https://docs-images.phcode.dev/videos/phcode.io-site/live_preview.mp4" |
| 154 | +/> |
| 155 | + |
0 commit comments