> ## Documentation Index
> Fetch the complete documentation index at: https://docs.knot.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Visual Editor

> Design your store visually with point-and-click editing

## Overview

The Knot Visual Editor provides an intuitive, no-code way to customize your store's design. Simply click on any element in the preview window and make changes instantly - no coding required!

<img src="https://mintcdn.com/knot-6961b7be/USocuheQiB6OVesj/images/visual-editor.png?fit=max&auto=format&n=USocuheQiB6OVesj&q=85&s=85ae92a05f51b511b5e037f82e739080" alt="Visual Editor screenshot" style={{width: '100%', maxWidth: '800px', margin: '20px 0'}} width="2831" height="1424" data-path="images/visual-editor.png" />

## How It Works

<Steps>
  <Step title="Toggle the brush icon">
    Toggle the brush icon <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{display: 'inline-block', verticalAlign: 'middle'}}><path d="m14.622 17.897-10.68-2.913" /><path d="M18.376 2.622a1 1 0 1 1 3.002 3.002L17.36 9.643a.5.5 0 0 0 0 .707l.944.944a2.41 2.41 0 0 1 0 3.408l-.944.944a.5.5 0 0 1-.707 0L8.354 7.348a.5.5 0 0 1 0-.707l.944-.944a2.41 2.41 0 0 1 3.408 0l.944.944a.5.5 0 0 0 .707 0z" /><path d="M9 8c-1.804 2.71-3.97 3.46-6.583 3.948a.507.507 0 0 0-.302.819l7.32 8.883a1 1 0 0 0 1.185.204C12.735 20.405 16 16.792 16 15" /></svg> in the top right corner of the editor to enable Visual Editor mode.
  </Step>

  <Step title="Select an element">
    Click on any component in the preview window to select it.
    Dynamic content will be highlighted in green, and static content will be highlighted in blue.
  </Step>

  <Step title="Open the editor panel">
    Once selected, the editing panel will appear on the left side showing all available customization options.
  </Step>

  <Step title="Make your changes">
    Adjust any property and see your changes reflected in real-time in the preview.
  </Step>

  <Step title="Save your work">
    To persist your changes, click the "Save changes" button at the bottom of the visual editor panel,
    or discard changes by clicking "Discard".
  </Step>
</Steps>

## Styling Options

The Visual Editor gives you control over your store's appearance:

### Spacing & Layout

* **Padding**: Add internal spacing to elements
* **Margin**: Control external spacing between elements

### Typography

* **Text Content**: Edit text directly in the preview
* **Font Weight**: Make text lighter or bolder
* **Text Style**: Apply italic, underline, or strike-through
* **Text Color**: Choose from your brand colors or custom colors
* **Text Alignment**: Control how text aligns within its container

### Backgrounds

* **Background Color**: Set solid color backgrounds

### Image Replacement

Click on any image component to:

* Replace it with a new image from your media library
* Upload a new image directly
* Adjust image settings and positioning

## Dynamic Data

The Visual Editor allows you to control dynamic content in your store, such as product listings, collections, and more. Dynamic elements are highlighted in green when Visual Editor mode is active.

<Frame caption="Dynamic data elements are highlighted in green. If clicking the wrapper doesn't show dynamic options, click an inner item and use the up arrow (↑) in the editor panel to select the parent wrapper.">
  <img src="https://mintcdn.com/knot-6961b7be/USocuheQiB6OVesj/images/dynamic-area.png?fit=max&auto=format&n=USocuheQiB6OVesj&q=85&s=5e9abdb817c67d988685a8cbc85fb561" alt="Dynamic Data in Visual Editor" style={{width: '100%', maxWidth: '600px', margin: '20px 0'}} width="3308" height="1250" data-path="images/dynamic-area.png" />
</Frame>

### Collections

Configure which product collections are visible on your store:

* Show or hide specific collections

### Products

Control individual product display:

* Choose which products to feature

### Products by Collection

Fine-tune how products appear within collections:

* Filter products by specific collections
* Control product sorting (price, name, date)

## Tips & Best Practices

<Tip>
  **Pro Tips:**

  * Use the color highlights to distinguish between static (blue) and dynamic (green) content
  * Save your work frequently using the "Save changes" button
  * Preview your changes in different screen sizes before saving
</Tip>

<Warning>
  **Important:** Visual Editor changes are for styling and content adjustments only. For structural changes (adding new sections, rearranging layouts), use the Chat Interface in Action Mode.
</Warning>