Edit Page

Visual Editor enables you to update existing web pages quickly and intuitively without writing code. Whether you revise content, rearrange components, or add new sections, the canvas lets you preview changes as you make them.

To edit an existing web page, log in to your Contentstack account, and perform the following steps:

1. Navigate to your stack and select Visual Experience.
2. Click Editor in the bottom pill menu.
3. Use the website navigation or the URL bar to open the page you want to edit.
4. On the selected page, you can:
   1. Hover over any field to view detailed information, such as its field type and the associated content type.
   2. Click a component to open the toolbar. You can then make inline edits without switching to the Form panel.

      Tip You can drag and reposition the field modifier apps such as AI Assistant on the canvas to improve visibility of the underlying content. This allows you to review the layout and content more clearly before making any changes.

To add a new component:

1. To add new instances, click the “+” icon on the canvas.
2. Select a component from the list of available options.
3. Enter content using the Form panel in the right sidebar.
4. After reviewing the changes, click Save in the top-right corner, then confirm your changes in the Save Changes modal.

NotePage components and available fields are based on the content model of the selected content type.

Some field types open in a popup on the canvas, so you can change their value without opening the Form panel. This includes Rich Text Editor, JSON Rich Text Editor, Markdown, Custom, Link, Date, and URL fields, and the following field types:

• Select: Pick a value from a dropdown, radio buttons, or checkboxes. For a field that allows multiple values, the popup edits the whole selection, even when you click a single value on the page.
• Taxonomy: Remove a term, or click Select Terms to pick terms in the Select Term(s) dialog.
• Boolean: Switch the value on or off.
• Tags: Type a tag and press Enter to add it, or click the x on a tag to remove it.

To edit a field from the canvas, perform the following steps:

1. On the canvas, click the field you want to change.

2. In the field toolbar, click Edit (pencil icon). A popup opens with the current value. Select and Taxonomy fields open in the Canvas Quick Edit popup, and Boolean fields and tags open in a popup titled with the field name.

   Click to enlarge

3. Change the value.

4. Click Apply. The canvas shows the new value right away.

5. Click Save in the top-right corner to save your changes.

If you do not have permission to edit the entry, or the entry is in a workflow stage you cannot edit, the Edit button is disabled. Hover over it to see the reason.

Note Editing these field types from the canvas requires your website to use Live Preview Utils SDK version 4.6.0 or later. Tags appear as editable only if your website renders the entry's tags with an edit tag. For more information, refer to Set Up Visual Editor for Your Website.

If the entry is in a workflow stage with restricted permissions, editing is disabled.

When this happens:

• A message appears on the canvas and in the Form panel
• The option to Request Edit Access is displayed

Click to enlarge

To request access:

1. Click Request Edit Access from the message.
2. (Optional) Add a comment explaining your request.
3. Submit the request.Click to enlarge

After submission:

• The request is sent to users with permission to grant access
• The request status is set to pending
• Editing remains disabled until access is grantedClick to enlarge

If a request has already been submitted:

• The request option is disabled
• A “Request sent” message is displayed

After submitting a request, continue monitoring its status in the Visual Editor. Once access is granted, you can resume editing the page directly on the canvas.