# How to Generate HTML, PDF, and other Advanced Outputs

{% embed url="<https://youtu.be/iA8XKMCrLM0>" %}

Generating HTML assets enables your AI agents to produce professional, styled web outputs—ideal for reports, articles, or visual summaries.

### Overview of the Workflow

The example workflow builds a long-form article page through the following steps:

1. **User Input**: Captures a topic from the user.
2. **User Context**: Gathers additional context via AI-generated questions.
3. **Generate Queries**: Uses that context to generate relevant Google search queries.
4. **Run Research Subworkflow**:
   * Searches Google
   * Scrapes each result
   * Summarizes each page
5. **Compile Results**: Collects all structured data into a JSON object.
6. **Generate Images**: Runs a subworkflow that:
   * Creates image prompts from each article section
   * Generates images with a model
7. **Combine Content**: Uses a custom function (e.g., `add images to report`) to merge article JSON and images into a final, structured variable (e.g., `updated report`).

### Preparing the HTML Asset

#### Step 1: Add a Generate Asset Block

* Set the **Source Type** to `HTML`.
* Output variable: e.g., `HTML`
* Format: `HTML`
* Enable image rehosting if needed.

#### Step 2: Create Your HTML Template

Expand the **Source Document** field to edit and preview your HTML. Use Handlebars-style syntax to bind JSON variables:

```html
<h1>{{updated_report.title}}</h1>
<p>{{updated_report.subtitle}}</p>

{{#each updated_report.sections}}
  <img src="{{image}}" />
  <h2>{{header}}</h2>
  <p>{{intro}}</p>
{{/each}}
```

* Use `{{#each}}` and `{{/each}}` to loop through arrays.
* Nest variables properly based on your JSON structure.

#### Step 3: Provide Sample JSON for Testing

Paste in your sample JSON and variable name (e.g., `updated_report`) to preview the output live in the editor.

### Optional: Use the Generate Asset Helper

If you don’t want to hand-code HTML:

* Use the **Generate Asset Helper** agent.
* Provide:
  * Your variable name (e.g., `updated_report`)
  * Sample JSON
  * A clear description of the page (e.g., “a long-form article page with images above each section”)

The helper will:

* Ask design questions (layout, font, colors, spacing)
* Generate a complete HTML template
* Provide instructions to paste it into your asset block

### Final Setup

Add a **Display Content** block:

* Set the type to `HTML`
* Connect it to the output of your Generate Asset block

Your AI agent will now generate and render a fully styled web page as the final output.

### Styling and Customization

The HTML template can include embedded CSS using `<style>` tags. You can:

* Adjust fonts, spacing, and layout
* Change image border radius or alignment
* Modify heading sizes (e.g., `h1`, `h2`, `h3`)

Edit and preview changes instantly in the asset editor.

### Notes on Variable Paths

When inserting dynamic content:

* Use full paths (e.g., `{{updated_report.title}}`)
* Don’t reference standalone keys (e.g., `{{title}}`) unless the variable is defined globally

### Summary

The Generate Asset block allows you to:

* Display highly customized HTML pages
* Combine AI-generated content and imagery
* Provide end users with a rich, professional experience

For advanced use cases, explore how other MindStudio agents (like “Generate LinkedIn Carousel” or “Generate Podcast”) implement this technique.