# Editing and Previewing

#### Build, refine, and publish in one conversational loop

CodeWords lets you edit web apps by describing changes in plain language. You tell Cody what you want, Cody updates the app, and you review the result in a live preview before publishing.

#### Edit with natural language

Editing happens through conversation, whether you need a small visual tweak or a major redesign.

#### Describe your changes

You can request:

* **Small adjustments**\
  “Make the heading text larger and bold.”
* **Structural updates**\
  “Add a pricing section with three tiers below the features list.”
* **Section redesigns**\
  “Rebuild the hero section with a split layout: image on the left, text on the right.”

#### Prompt-based batch editing

You can request multiple changes in one message. Cody applies them together as a single update.

For example:

> “Make the main heading bolder and dark blue. Increase spacing in the pricing table. Change the footer background to light gray.”

Cody interprets each request and applies the full set in one pass.

#### Quick style controls

Use natural-language prompts for common UI updates:

| Edit Type  | Example Prompt                                                   |
| ---------- | ---------------------------------------------------------------- |
| Styling    | “Change the font of all headings to something more modern.”      |
| Layout     | “Increase spacing between cards in the pricing section.”         |
| Content    | “Change the main button text to ‘Get Started Now.’”              |
| Structure  | “Duplicate this section and place it below the contact form.”    |
| Color      | “Switch the app to dark mode with blue accents.”                 |
| Typography | “Use a serif for headings and a clean sans-serif for body text.” |

#### AI Edit: Your creative partner

Cody can do more than direct edits. You can ask for suggestions to improve copy, visual design, and structure.

| Goal           | Example Prompt                                                   |
| -------------- | ---------------------------------------------------------------- |
| Improve copy   | “Rewrite this headline to be more engaging and benefit-focused.” |
| Enhance design | “Suggest a cleaner, more modern color palette for this section.” |
| Refine layout  | “Restructure this feature list to make it easier to scan.”       |
| Add polish     | “Add subtle scroll animations to the testimonials section.”      |

#### Iterative refinement

Each update follows the same loop:

You describe <i class="fa-arrow-right">:arrow-right:</i> Cody updates  <i class="fa-arrow-right">:arrow-right:</i>  You review  <i class="fa-arrow-right">:arrow-right:</i>  You refine

After each change, Cody shows the updated result and confirms direction before continuing. This keeps iteration fast while maintaining control.\
\
**Preview**: See your application in real time

CodeWords provides a live, interactive preview during the build process so you can validate behavior as you go.

#### In-chat preview

The preview appears directly next to your conversation and refreshes after each edit.\
You can interact with the app: click buttons, navigate pages, and submit forms.

#### Desktop and mobile

Apps are responsive by default. Layouts adapt automatically to desktop, tablet, and mobile.\
You can still request screen-specific behavior, for example:

> “Stack the navigation vertically on mobile.”

<figure><img src="/files/m6iYJ48IwbxFC3O4fTzO" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.codewords.ai/website-builder/get-started/editing-and-previewing.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.