Browser

The Browser is a full-featured Chromium-based browser built into RightPlace. It uses the CEF (Chromium Embedded Framework) engine for rendering and provides navigation, developer tools, element inspection, screenshot capture, responsive previews, and deep WordPress integration with session persistence.

Adding a Browser

To add a Browser to your project, open the Add Resource dialog and select Website under the Web & CMS category.

The creation form lets you configure:

• Collection Name: a label for the website collection (e.g. “Production Websites”)
• Environment (optional): an environment tag (Development, Staging, Production, etc.)
• Description (optional): a note about what these websites are for
• URLs: one or more URLs to browse. Click + Add URL to add additional sites to the collection.

Once created, the Website resource appears in your project sidebar. Click it to open a browser tab pointed at the configured URL.

Opening from Places

You can also open a browser directly from a Place. In the Places sidebar, expand a project and click the Browser tab at the top of the Place page. This opens a browser scoped to that Place, with access to any Website resources in the project.

Browser Interface

The browser layout consists of:

• Top toolbar: navigation buttons (back, forward, reload), address bar, and action buttons (find, downloads, settings)
• Content area: the rendered web page
• Loading indicator: a progress bar at the bottom of the address bar during page loads

Navigation Controls

The top toolbar provides standard navigation:

• Back (Cmd+[ or Alt+Left): go to the previous page in history
• Forward (Cmd+] or Alt+Right): go to the next page in history
• Reload (Cmd+R): reload the current page
• Hard Reload (Cmd+Shift+R): reload the page and bypass the cache
• Stop (shown while loading): cancel the current page load

The address bar shows a colored status dot: green when the browser tab is focused, yellow when unfocused.

Address Bar

The address bar supports smart URL detection and search:

• URL detection: typing a domain-like string (e.g. example.com) auto-adds https://. Localhost and IP addresses get http://.
• Search fallback: non-URL input is sent as a Google search query.
• Focus: press Cmd+L to jump to the address bar from anywhere.

History Autocomplete

As you type in the address bar, the browser suggests pages from your browsing history:

• Dropdown suggestions: up to 10 matching results, filtered by URL and title
• Ghost hint: a completion suggestion appears in lighter text overlaid on the input. Press Tab to accept it.
• Keyboard navigation: Arrow Up/Down to move through suggestions, Enter to navigate, Escape to close

Find in Page

Press Cmd+F to activate find in page. The search bar replaces the address bar and shows match highlighting across the page.

• Match counter: displays “X of Y” or “0 results”
• Navigate matches: Enter or Cmd+G for next match, Shift+Enter or Cmd+Shift+G for previous match
• Highlighting: matched text is highlighted in bright yellow
• Exit: press Escape or click the close button

WordPress Integration

The browser integrates with WordPress sites connected to your project.

Login and Sessions

When the browser detects a WordPress login form, it can autofill credentials:

• Autofill bar: appears when a login form is detected, showing matching credentials from your vault
• Credential capture: after submitting a login form, the browser offers to save the password
• Session persistence: cookies persist across app restarts, so you stay logged in between sessions
• wp-admin access: navigate directly to /wp-admin paths on connected sites

Connection Status

The Browser widget panel (in the right sidebar) shows the connection health for the associated WordPress site with three status indicators:

• Site: online status with response time and WordPress version (green = online, red = offline)
• Session: login state (green = logged in, amber = logged out)
• Plugin: RightPlace plugin installation and pairing status (green = paired, gray = not installed)

See the Widgets documentation for more details on the Browser widget.

Inspector

The inspector is a suite of tools for examining the rendered page. Toggle it on or off with the power icon in the Browser Inspector widget panel.

When enabled, hovering over elements on the page highlights them in real time with an overlay showing the tag, ID, and classes. Click to select and lock an element for detailed inspection.

Inspector Tools

The inspector toolbar provides 11 tools:

Tool	Description
Inspector	Click any element to select and inspect it
CSS	View computed CSS properties of the selected element
Box Model	Visualize the CSS box model (margin, border, padding, content)
DOM	Navigate the document structure as a tree
Font	Inspect typography and font properties
Color Picker	Pick any color from an element on the page
Layout	Toggle grid and flexbox overlay visualization
Copy	Copy selectors, HTML, or attributes of the selected element
Capture	Take a screenshot of the page or a selected region
Responsive	Preview the page at different viewport dimensions
Image	Inspect image dimensions, alt text, and format

See the Widgets documentation for full details on the Browser Inspector widget.

Developer Tools

Press Cmd+Alt+I to open the Chromium DevTools in a separate window. This gives you full access to the Elements panel, Console, Network inspector, Sources, Performance profiler, and all other standard Chrome DevTools features.

You can also open DevTools by right-clicking the page and selecting Inspect Element from the context menu.

Screenshots and Capture

The Capture tool (available from the inspector toolbar) supports four capture modes:

• Visible: captures the current viewport as shown on screen
• Full Page: captures the entire page by scrolling through its full height
• Region: click and drag on the page to select a custom rectangular area
• Selected Element: captures the currently selected or hovered element

After capturing, a preview thumbnail is shown. You can Save the screenshot as a PNG file or Copy it to the clipboard.

Responsive Preview

The Responsive tool lets you preview the page at specific viewport dimensions. A set of device presets is available:

• iPhone SE: 375 x 667
• iPhone 16: 393 x 852
• iPhone 16 Pro Max: 430 x 932
• iPad: 768 x 1024
• iPad Pro: 1024 x 1366
• Desktop sizes: 768, 1024, 1280, 1440, 1920 widths

You can also enter a custom width and height. When the viewport is larger than the available space, zoom-to-fit adjusts automatically. Horizontal and vertical pixel rulers appear along the edges for reference.

Context Menu

Right-click anywhere on a page to access the context menu with these options:

• Reload: reload the current page
• Hard Reload: force reload, bypassing cache
• Copy Page URL: copy the current URL to the clipboard
• Open in Default Browser: open the URL in your system browser
• Inspect Element: open Chromium DevTools focused on the clicked element
• RightPlace Inspector: activate the built-in RightPlace inspector on the clicked element
• Save Image As: save an image from the page (available when right-clicking an image)

Downloads

When a file download begins, a download indicator appears in the toolbar. Click it to open a popdown with download details:

• Active downloads: filename, progress bar, percentage, and file size with a cancel button
• Completed downloads: filename and size with options to Open the file or Show in Folder
• Clear all: remove all completed downloads from the list

Browser Settings

Access browser settings from the settings icon in the toolbar or from the global Settings page.

Home URL

Set the default page that opens for new browser tabs. Defaults to https://google.com.

Sessions

View and manage all browser tab sessions:

• Session details include state, URL, place, scroll position, zoom level, and timestamps
• Filter sessions by place
• Delete individual sessions

Browsing History

Browse and search your full browsing history:

• Search: filter by URL or title
• Paginated list: 20 entries per page, most recent first
• Visit count: shows how many times each page has been visited
• Delete: remove individual entries or clear all history

Keyboard Shortcuts

Shortcut	Action
Cmd+L	Focus address bar
Cmd+F	Find in page
Cmd+G	Next find match
Cmd+Shift+G	Previous find match
Cmd+R	Reload
Cmd+Shift+R	Hard reload (bypass cache)
Cmd+[ or Alt+Left	Back
Cmd+] or Alt+Right	Forward
Cmd+=	Zoom in
Cmd+-	Zoom out
Cmd+0	Reset zoom to 100%
Cmd+Alt+I	Open DevTools
Cmd+Shift+C	Toggle inspector pick mode
Tab	Accept address bar ghost hint
Escape	Exit find / close suggestions

Widgets

Browser Widget

Appears when a Browser tab is active. Shows connection health for the connected WordPress site.

Features:

• Connection status indicators with colored dots:
  • Site: online status with response time and WordPress version (green = online, red = offline)
  • Session: login state, logged in or logged out (green = logged in, amber = logged out)
  • Plugin: RightPlace plugin installation and pairing status (green = paired, gray = not installed)
• Hostname display
• Last checked timestamp
• Debug section for troubleshooting connection issues

Browser Inspector Widget

Appears alongside the Browser panel when a Browser tab is active. Provides a suite of inspection tools for the rendered page.

The inspector toolbar offers 11 tools:

Tool	Description
Inspector	Click any element on the page to select and inspect it
CSS	View computed CSS properties of the selected element
Box	Visualize the CSS box model (margin, border, padding, content)
DOM	Navigate the DOM hierarchy as a tree
Font	Display font metrics and properties for the selected element
Color	Pick any color from the page
Layout	Toggle grid and flexbox overlay visualization
Copy	Copy selectors, HTML, or attributes of the selected element
Capture	Take a screenshot of the page or a cropped region
Responsive	Preview the page at different viewport widths
Image	Inspect image dimensions, alt text, and format

Toggle the power icon to enable or disable the inspector. When enabled, hovering over elements on the page highlights them in real time.

Next steps

• Widgets: See the Browser and Browser Inspector widget panels for connection status and inspection tools
• WordPress: Connect and manage WordPress sites
• Image Editor: Edit images with professional-grade tools