Element Editor

​

Features

The Element Editor lets you:

• Select elements in your app’s preview for editing
• Edit text directly from the preview if it’s a string in your source code
• Adjust styles using intuitive controls for properties like padding, text color, and background color
• Instantly preview styling & changes
• Save those changes by updating the source code instantly

​

Usage

Activate the Element Editor from the Agent chat.

1. Select an Element: Click any element in your app’s preview to start editing.
2. Edit Element: Directly edit text if it’s a string in your source code, right from the preview. Or use the editor pane in the chat to update more properties like padding, margin, color, etc.
3. Preview Changes: Changes are previewed live in the preview.
4. Save: Hit save to update the source code instantly. If it’s a simple change, your edits will directly update the source code without consuming AI credits. If there’s uncertainty or hidden complexity involved in the edit, Element Editor seamlessly sends targeted metadata to Agent for accurate assistance.

​

Example Use Cases

The Element Editor is useful for a variety of UI modifications:

• Text Edits in Preview: Click, type, done. Edit text directly in the Preview tool.

• Perfect Color Updates: Use the color picker to adjust text and backgrounds.

  Try alternative input methods, such as typing a color name like ‘purple’ in the input field, or the eyedropper to pick a color from anywhere on your screen.

• Style Changes Across Elements: Adjust padding, margins, and more.

​

Tips & guidelines for effective use

• Select the most precise element possible for your intended change
• Selecting an element rendered in a loop or used in multiple places will highlight and update all instances of it
• Updating text of composite elements which are made up of multiple sub elements is disabled in Element Editor, but you can ask Agent to make changes like this in chat
• Clicking on the top left label will take you to the element in the source code
• Escape key can be used to dismiss the element editor when inside the preview

​

Upgrading from Element Selector to Element Editor

We will be rolling out a change to automatically prompt you to upgrade to the new element editor.

If you want to upgrade manually, you can do so in any Agent-created JavaScript App by opening the Shell pane and running the following command:

npm i @replit/vite-plugin-cartographer@latest

Once you’ve installed the plugin, you can restart your app to start using the new Element Editor.