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

# Edit mode

> Manually edit text, images, and styles.

**Edit mode** lets you update your site directly in Preview without using AI credits. Click any element to change its text, image, or style. All edits are saved in the built-in CMS and Media Library, and you can manage them later in [Content](/content/introduction) or [Assets](/assets/introduction).

## Why use Edit mode?

<Columns cols={2}>
  <Card title="Manual control" icon="pen-to-square">
    Make precise changes without AI prompts. Ideal for polishing copy and layout.
  </Card>

  <Card title="Saved to CMS & Media Library" icon="database">
    Your edits are stored automatically and available in
    [Content](/content/introduction) and [Assets](/assets/introduction).
  </Card>

  <Card title="Visual styling" icon="palette">
    Adjust typography, colors, spacing, and borders from the style panel.
  </Card>

  <Card title="AI or manual" icon="wand-magic-sparkles">
    Anything you edit here can also be changed via AI chat if you prefer prompts.
  </Card>
</Columns>

## How it works

<Steps>
  <Step title="Enter Edit mode">
    In Preview, click **Edit** (or press <kbd>⌥</kbd> / <kbd>Alt</kbd> <kbd>E</kbd>).
  </Step>

  <Step title="Select an element">
    Click a text block, image, card, list, or other component. Editable fields appear in the side panel.
  </Step>

  <Step title="Update content or styles">
    <Columns cols={3}>
      <Card title="Text" icon="text-height">
        Type inline for short copy. Use the WYSIWYG editor for long-form content.
      </Card>

      <Card title="Images" icon="image">
        Replace by pasting a URL, picking from the Media Library, or choosing from Unsplash.
      </Card>

      <Card title="Styles" icon="sliders">
        Tweak typography, colors, spacing, borders, and more from the style panel.
      </Card>
    </Columns>

    You can also describe the change in AI chat; the result is the same.
  </Step>

  <Step title="Review your changes">
    Edits are saved automatically in the CMS and visible in Preview.\
    Production does not change until you publish.
  </Step>
</Steps>

## Text editing

For short text, click and type inline.\
For long text blocks, use the **WYSIWYG editor** with:

* Paragraph and heading levels
* Bold, italic, underline, strikethrough
* Code snippets and links

<Tip>
  Prefer prompts? Ask AI to rewrite, shorten, translate, or adjust tone.\
  You can refine manually afterward in Edit mode.
</Tip>

## Image editing

When an image is selected, the side panel lets you:

* **Paste a URL** to replace the image
* **Pick from the Media Library**
* **Search Unsplash** for free, high-quality images

<Note>
  Image sources and alt text are stored in the Media Library so you can reuse assets across pages.
</Note>

## Styling

Selecting a component opens the **style panel**. Common options include:

* **Typography**: font family, weight, size, alignment, letter spacing, text decoration
* **Color**: text color and background color
* **Spacing**: margin and padding
* **Borders**: color, style, width, radius

<Tip>
  You can ask AI to restyle components (for example, “make this card more compact with tighter spacing and a subtle border”). Edit mode lets you fine-tune the details visually.
</Tip>

<Note>
  All changes made in Edit mode affect Preview only. Your live site updates when you publish.
</Note>