​
Main View (Iframe)

Iframe

The iframe displays your website for real-time editing and previewing.

​
Chrome Extension Requirement

Note: Ensure the Coframe Chrome Extension is installed to utilize the Editor fully.

​
Interacting with Elements

  • Selecting Elements:
    • Hover over an element to highlight it with a blue rectangle and see its type.
    • Click to select the element, adding it to your In Scope list.
  • Adding New Elements:
    • Plus Buttons: Appear above and below hovered elements.
    • Click to Insert a New Element, which you can customize via prompts or manual editing.
  • Editing Elements:
    • Pencil Icon: Click to open the element in the editing panel.
    • Deselecting Elements:
      • Click the element again to deselect.
      • Click the X button on the top right corner to remove the element from scope.

​
Top Bar

The top bar provides navigation and various view options to enhance your editing experience.

​
Left Side

  • Close Button: Click to exit the Editor and return to the main dashboard.

​
Right Side

  • Grid View: Toggle to compare variants side by side in a grid layout.
  • Page View: Switch back to the standard single-page view.
  • Edit Mode: Enable or disable element selection and editing.
  • DOM Inspector: Toggle the DOM tree view for precise element selection.
  • Device Toggle: Switch device views and adjust scale (50% to 150%).

​
Grid View

Grid View

The Grid View allows you to compare multiple variants side by side.

​
Mobile View

Mobile View

Switch to Mobile View to see how your website and variants look on mobile devices.

​
DOM Inspector

DOM Inspector

Use the DOM Inspector to navigate and select elements directly from the DOM tree for precise control.