Visual Editor

The remote-browser, sign-in, and allowance rules below describe cloud conversion on the website. To save an open tab with the development extension, see the browser extension guide.

Visual Editor is the visual webpage editor for making targeted changes before creating a PDF. It is useful when automatic cleanup cannot identify one particular banner, when a collapsed section must be opened, or when an element needs a small layout adjustment.

Configure the webpage first

Visual Editor uses the same webpage to PDF layout, loading, cleanup, content, watermark, security, and metadata settings as Custom Convert. See the complete Custom Convert settings guide for those shared controls:

• Page layout covers viewport, paper size, margins, scale, rendering style, dark mode, and backgrounds.
• Page loading covers navigation timeout, extra wait, and deferred-content loading.
• Page cleanup covers cookie prompts, ads, popups, floating widgets, and fixed elements.
• PDF content and document settings cover page ranges, links, headers, footers, watermarks, security, and metadata.

Choose these settings before starting the editor. The cleanup choices are also reused by the editor's Clean action, and the document settings are applied when you select Generate PDF.

Start an editing session

A Visual Editor session keeps one remote webpage available while you inspect and change it. Complete these steps before generating the PDF from the visual webpage editor.

Clicking and selecting in a long preview

A long page may use several screenshot tiles, but the editor presents them as one continuous page. Click positions are mapped back to the live webpage using preview scale and scroll position. DOM selection and outlines use the same page information; you do not need to calculate offsets for individual images.

If an outline no longer matches its element after an interaction, use Refresh to update the preview and node map before editing again. Avoid making repeated changes against a stale screenshot. Use Reload only when you are ready to discard the current edits.

How extension Visual differs

Website Visual operates on a remote webpage. Extension Visual works directly on your current tab, with its tools in the browser side panel by default. It also supports selected-node export and has separate extension access checks. See extension Visual and selected-element export for setup and recovery instructions.

Select and Browse modes

The Visual Editor preview is a full-page screenshot of the remote browser. The two modes decide what a click on that visual webpage editor preview means.

Select

Use Select when you want to inspect, hide, or restyle an element. Clicking the preview chooses the smallest meaningful visible node at that position, draws a highlight around it, and opens its details in the Node tab.

Some pages contain several nested elements in the same place. If the preview chooses a child when you need its container, use the DOM tab to select the parent explicitly.

Browse

Use Browse when the page itself must change before capture. A click is sent to the corresponding interactive element in the remote page. This can open a disclosure, expand an accordion, follow a link, or activate a button.

Native select menus open an option list inside the editor. Choose an enabled option to apply it to the remote page. Other controls depend on the website's own behavior.

Toolbar actions

The Visual Editor toolbar sends focused actions to the live remote page and then returns an updated preview.

Hide is available only after an element is selected. Clean, Browse, and style changes operate on the live remote page, so wait for each action to finish before starting another one.

The Node sidebar

The Visual Editor Node tab is read-only. It helps you confirm that the selected outline represents the element you intend to change.

Document identity

• Tag shows the HTML element type, such as header, section, button, or img.
• Selector shows the locator used to address that element in the remote page. Use the copy button when you need to keep it for troubleshooting.

Geometry

• Size shows the current rendered width and height in CSS pixels.
• Position shows the element's computed CSS positioning mode, such as static, relative, absolute, fixed, or sticky.

Rendering

• Display shows the computed layout type.
• Visibility shows whether the selected element is visible through CSS.
• Overflow shows how content outside the element's box is handled. Different horizontal and vertical values appear separated by a slash.
• Margin and Padding show the computed top, right, bottom, and left values in that order.

Content preview

The final area shows a short text or accessible-name preview. It is provided only to help identify the node; Visual Editor does not edit the webpage's text.

The Style sidebar

The Visual Editor Style tab changes the selected element. Its fields start with the values captured from the live page. Edit the required fields, then select Update preview to apply the complete set and capture the updated result.

State locks

State locks preserve a CSS appearance without sending the corresponding mouse or keyboard event:

More than one state can be enabled on the selected element. Clear locks removes all three from that element. A state lock affects CSS appearance only; it does not open content that requires JavaScript. Use Browse for an actual click.

Dimensions

Width and Height replace the selected element's rendered CSS dimensions. A plain number is treated as pixels, so 320 becomes 320px. Standard CSS lengths such as 50%, 24rem, or auto can be entered when they make sense for that property.

Changing dimensions can reflow neighboring content. Refresh the preview and inspect later sections of the page before generating the PDF.

Layout

• Display supports block, inline, inline-block, flex, grid, and none. Choose none to remove the element from layout. Unlike visibility: hidden, surrounding content can move into the freed space.
• Visibility supports visible and hidden. Hidden elements keep their layout space.
• Overflow supports visible, hidden, auto, and scroll. Use it carefully: hidden can clip content, while auto or scroll can leave content outside the captured area.

Margin and padding

Both groups have separate Top, Right, Bottom, and Left values.

• Margin changes space outside the selected element. Negative values can pull nearby content closer or overlap it.
• Padding changes space between the element's content and its border.

A plain number is converted to pixels. You can also enter a CSS length directly. Blank fields are applied as 0px, so leave the original value in place when that side should remain unchanged.

The DOM sidebar

The Visual Editor DOM tab lists the meaningful visible elements discovered during the latest full capture. Expand a row to inspect its children, then select any row to highlight and scroll to that element in the preview.

Each row shows the HTML tag plus a short identifier, class, or accessible name where available. The node count describes the current editable map. A Limited badge means the page exceeded the capture limit, so some deeper elements are not listed. Refreshing or reloading rebuilds the tree from the current page.

The DOM tree is most useful when:

• overlapping elements make preview selection ambiguous;
• a whole container should be hidden instead of one child;
• a small or transparent element is difficult to click;
• you need to move between a component and its parent structure.

Change history and revert

The bottom of the Visual Editor sidebar records reversible hide, style, and state-lock changes. Expand the history to see when each change was applied and use Revert beside one entry to restore that element's previous state.

Reverting an entry does not replay the entire page from the beginning. Browse actions, native menu choices, cleanup, and navigation are not general undo steps. Reloading or navigating can also rebuild the page and clear the displayed history.

Editing time and session expiry

The Visual Editor sidebar shows the remaining editing window. While no action is running, the label identifies whether the limiting factor is Idle time or the account's remaining Quota. The countdown changes color during its final 30 seconds.

Each accepted editor action settles the elapsed editing time and returns an updated allowance. The inactivity window is then renewed when time remains. If the idle window expires, reopen the editor to start again; previous visual edits are cleared. If the account allowance is exhausted, return to task progress and wait for the allowance to reset or obtain more conversion time.

A practical editing order

The actual cleanup panel, shown in English. Disable the category responsible for missing content before turning off every cleanup option.

For a predictable result, run automatic cleanup first, use Browse to expose the content you need, switch to Select to hide or restyle exact elements, and finish by checking the DOM tree and the full preview. Use Refresh after interactive changes and reserve Reload for abandoning the current page state.

If the page only needs standard cleanup or document settings, Custom Convert completes the same conversion without keeping an interactive editing session open.

Related visual webpage editor guides

• Read the Custom webpage to PDF settings guide for every shared layout, loading, cleanup, watermark, security, and metadata option.
• Choose the Quick URL to PDF workflow when the page needs no manual editing and a continuous capture is sufficient.
• Use Visual Editor troubleshooting when a selection no longer matches the live page, an action is rejected, or the editing session expires.
• Check conversion time and account access, or return to the online webpage to PDF converter to start a new Visual Editor session.