> For the complete documentation index, see [llms.txt](https://gdplabs.gitbook.io/glchat/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gdplabs.gitbook.io/glchat/application-ui/how-to-guide/chat-input-and-responses/html-preview-in-glchat.md).

# HTML Preview in GLChat

### Overview

When GLChat generates HTML code, you can preview the result side-by-side with the conversation. This allows you to quickly review the visual output without copying the code into another tool or opening a separate editor.

This feature is useful for reviewing generated UI prototypes, simple web pages, forms, layouts, or other HTML-based outputs directly inside GLChat.

### Key Capabilities

#### Preview HTML Side-by-Side

If the LLM response contains valid HTML code, GLChat can display a live preview beside the chat conversation.

This helps you compare the generated code and the visual output in the same workspace, making it easier to validate the result and provide follow-up instructions.

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

#### Maximize the Preview

You can maximize the HTML preview to view it in full screen.

This is helpful when the generated output contains a larger layout, interactive elements, or detailed UI components that are easier to review with more screen space.

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

#### Download the HTML Code

You can download the generated HTML code for further use, testing, or sharing with your team.

After downloading, the file can be opened locally in a browser or handed over to the relevant team for further refinement.

### Privacy and Security Reminder

Since the HTML content is generated by an LLM, please avoid entering real, sensitive, or confidential data during preview.

Examples of data that should not be entered during preview include:

* Real customer information
* Passwords or credentials
* Personal identification data
* Financial information
* Internal confidential business data

Use dummy or sample data when testing the generated HTML preview.

### Interactive Preview Limitation

Some HTML previews may include interactive behavior such as forms, buttons, scripts, or dynamic UI components.

{% hint style="info" %}
For privacy and security reasons, additional setup or configuration may be required before full interactive preview is enabled. This helps ensure that generated content is handled safely, especially when scripts or user input are involved.
{% endhint %}

<figure><img src="/files/26iRQeqeXPOJDAFZ3zk3" alt=""><figcaption></figcaption></figure>

### Recommended Usage

Use the HTML preview feature to quickly validate generated UI or web-based content before deciding whether to refine, download, or share it.

For best results:

* Start with a clear prompt describing the HTML output you need.
* Review the side-by-side preview.
* Maximize the preview if the layout needs more space.
* Use dummy data during testing.
* Download the HTML code if you need to continue editing or share it externally.