Edit in Live View

Live View uses a chromium-based rendering engine so that your content looks the same in Dreamweaver as it looks in your favourite web browsers. During development, you can switch to Live View to quickly preview your page. And, to save time switching between different views (code and design view), you can edit HTML elements directly within Live View.

Live View refreshes instantly to show the changes on the page.

You can use the following components to edit your page in Live View:

• DOM panel: (Window > DOM) Shows the HTML structure of your document and lets you copy-paste, duplicate, delete, and rearrange the elements within the view. See DOM panel for more information.
• Element Display: Appears above the selected HTML element in Live View. Element Display lets you associate HTML elements with classes and IDs. See Associate HTML elements with classes and IDs for more information.
• Quick Property Inspector: Appears when you click the Sandwich icon in Element Display or select text. Quick Property Inspector lets you edit image attributes and format text in Live View. See Quick Property Inspector for more information.
• Live View Property Inspector: Appears below the Document window and lets you edit various HTML and CSS properties in Live View. See Live View Property Inspector for more information.
• Insert panel: (Window > Insert) Lets you drag elements from the panel directly into Live View. See Insert elements directly in Live View for more information.

Tips:

• If Live View goes blank when you are editing the page, switch off Live View and switch it on again.
• If you do not see the edits reflected on the page, click the refresh button in Live View.

Content that is rendered dynamically through databases or JavaScript, and non-editable regions in templates cannot be edited in Live View. When you click such elements in Live View, a grey border appears around them to indicate that the elements cannot be edited.

Using Element Display, you can associate HTML elements with classes and IDs directly in Live View. The Element Display hints you with the available classes and IDs to help you quickly view and choose the required option. 

You can also format tables using Element Display. For more information, see link.

Click the required element in Live View. The Element Display appears and displays the currently associated class and ID.

While in Live View, you can also click the HTML element in the DOM panel to see the Element Display for the element.

• To dissociate the HTML element from a class or ID, click ‘x’ adjacent to the class or ID.
• To change the class or ID associated with the HTML element, click in the box. A list of available classes and IDs appears. Click the required option.
• To add a class or an ID and apply it to the element, click ‘+’, and type in the name. To save the changes, click '+' or press Enter.

You can then use the CSS Designer to define a selector that includes this class or ID. For more information, see Laying out pages using CSS Designer.

Quick Property Inspector appears right above the selected elements in Live View. Using this Property Inspector, you can edit attributes, or format text in Live View.

To show or hide Quick Property Inspector, press Ctrl+Alt+H (Win)/CMD+Ctrl+H (Mac).

In Bootstrap documents, the Quick Property Inspector also includes options to customize images.

• Clip to Shape: Click to clip the corners of images to circular or rounded corners, or as a thumbnail image.
• Make image responsive: Click to make images responsive and adapt to various screen sizes.

Quick Property Inspector for text in Live view lets you quickly format, indent, and hyperlink text. The Quick Property Inspector for text appears when you click the sandwich icon for text elements: h1-h6, pre, and p.

• The format option allows you to quickly change the element tag to one of these tags: h1-h6, p, and pre. 
• The link option helps you hyperlink the text element. 
• The icons for Bold and Italic help you add <strong> and <em> tags to the text element.
• The indentation icons help you add or remove text indentation. <blockquote> tag is added or removed from the code accordingly.

In Bootstrap documents, the Quick Property Inspector for text also lets you align and transform the text elements.

• Align: Aligns Bootstrap text elements to left, center, right, or justify by applying the corresponding classes.
• Transform: Changes the text casing of an element by applying classes for lowercase, uppercase, or sentence case.

Live View Property Inspector is the traditional Property Inspector that is available below the Document window.

The Live View Property Inspector lets you examine and edit the most common properties for the currently selected page element, such as text or an inserted object. The contents of the Live View Property Inspector vary depending on the element selected.

To access Help for a particular Property Inspector, click the Help button in the upper right corner of the Property Inspector. Or, select Help from a Property Inspector’s Options menu. 

The following are the elements that you can edit using Live View Property Inspector:

You can quickly add, edit, or remove HTML attributes of images directly in Live View using the Quick Property Inspector.

The Quick Property Inspector for images appears when you click the sandwich icon . Depending on the space available, the Property Inspector appears on the right, left, top, bottom, or above the image. You can move around the Property Inspector and place it at any convenient position. 

To edit the attributes, click the sandwich icon in the Quick Property Inspector. You can change the source of the image along with other attributes such as “title” and ”alt”, and the changes are reflected instantaneously. Similarly you can also adjust the Width and Height of the image in Live View.

The changes that you make are saved when you do any of the following:

• Click anywhere outside the Property Inspector
• Press Enter
• Press Tab to edit another attribute in the Property Inspector
• Save the file
  

When images are loaded dynamically, you can use the Quick Property Inspector of the image to quickly inspect the attributes that are set for the image. 

You can now edit text elements directly in Live View. You can simply click the text element to edit it. If you are in Element Display mode press Enter to edit the text.

The orange border around the text element indicates that the mode is changed to edit mode. 

The insertion point is placed where you click. To select all the text in the text element, triple-click the text element.

Cut, copy-paste, and undo-redo are supported while you edit text in Live View. When you paste text, it is pasted as plain text.

 Auto-sync feature allows any edits made in live view automatically synchronize with code view. 

The following table lists the supported and unsupported scenarios during text editing in Live View:

You can now change the formatting of text and hyperlink text directly in Live View. To see the text formatting options, select a word or a phrase. The Quick Property Inspector with formatting options appears just above the selected text.

Using the Insert panel, you can directly drag elements into the required position in the document in Live View. Visual aids in Live View such as Live Guides and DOM icons help you position the dragged elements with respect to a hovered element.

Live Guides (in green) appear as you hover the mouse over different elements on the page before dropping the element. These guides indicate the positions where the element can be inserted. They can appear above, below, left, or to the right of the element that is hovered over.

• Above and Below - Appears while hovering over all types of elements/tags, except inline tags. When you hover the mouse in the first (top) 50% of the element, guides appear above the hovered element. When you hover the mouse in the last (bottom) 50% of the element, guides appear below the hovered element.

• Left and Right - Appears while hovering over inline tags, for example, <a>, <span>, or over tags that have the 'float property' set.

When you pause for a while before dropping the element, the DOM icon (</>) appears. When you hover your mouse over this icon, the DOM panel opens and you can drop the element inside the DOM structure of the document.

To insert elements directly in Live View, perform the following steps:

Marquee selection allows you to easily select a block of text by clicking and dragging inside the tag in Live View. When you click and drag a block of text in Dreamweaver releases prior to 2014.1, the element used to move as a whole. 

In Live View, you can move an element by clicking on the tag name and then dragging to the desired location. When you click on a tag name, a hand cursor icon appears indicating that you can drag the tag from the point. When you start dragging the tag, guides help you place it in the precise location.  

By clicking on the tag name in Live View, you can select the full contents of that tag in Code View.

Inspect mode works together with Live View to help you quickly identify HTML elements and their associated CSS styles. With Inspect mode turned on, you can hover over elements on your page to see the CSS box model attributes for any block-level element.

In addition to seeing a visual representation of the box model in Inspect mode, you can also use the CSS Designer as you hover over elements in Live view.

When you have the CSS Designer open in Current mode and hover over an element on the page, the rules and properties in the CSS Designer automatically update to show you the rules and properties for that element.

Additionally, any view or panel related to the element you’re hovering over updates as well (for example, Code view, the Tag selector, the Property inspector, and so on).

You can traverse page elements or selectors in Element Display using your keyboard to quicken the editing process. 

Up and Down arrow keys help you traverse page elements in Live View. The traversal is based on the DOM structure of the document.

Keyboard navigation in Live View facilitates easy access to nested and wrapped elements.

When you access an element using the up or down arrow key, the Element Display for that element appears. You can then navigate to the selectors in the Element Display or press Enter to edit the text directly in Live View.

Press the Tab key to traverse through the selectors in Element Display. The selector in focus is displayed with an amber border as shown below: 

If you press the Tab key after the last applied selector, the add selector text box appears. 

• Dreaweaver template files cannot be edited in Live View.
• Tags that have both static and dynamic content. While you can edit the selectors for such tags, you cannot edit text in Live View. If you double-click such elements in Live View, a grey border appears around them, indicating that text editing is not supported.
• Tags that have pseudo selectors applied to them. You may encounter unexpected results when you try to edit such elements in Live View.
• CSS Grids are supported in Live View only in Dreamweaver 2019 and later versions.