> For the complete documentation index, see [llms.txt](https://docs.codewords.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.codewords.ai/website-builder/get-started/editing-and-previewing.md).

# Editing and Previewing

CodeWords lets you build and edit your web app using natural language

#### 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="https://3479611838-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCemfgxXCw2G2R2qcJjZO%2Fuploads%2FPLlErdBp1IkpOkwy9FA1%2FMobile%20View.gif?alt=media&amp;token=97767018-3994-412f-85cc-341ea1c741c8" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.