Generate Asset Block

Generate HTML assets.

The Generate Asset block allows users to generate designs and PDFs from a source HTML document.

Configuration

Source Document

Provide the source document that will generate your design. Types of allowed source documents include:

1. HTML Document

2. Markdown

3. Single Page Application (SPA) Bundle

Variables can be included in the source document.

The HTML Developer Environment

By selecting the expand icon within the source document area, you can open a full screen development environment to easily edit the HTML.

The developer environment provides you with additional capabilities:

Generate HTML: Generate HTML code based on a text prompt. You can specify any variables that you'd like to be used in the asset.

Modify HTML: Edit and update your HTML code with a text a prompt.

Test Data: Pass test data through the block and see the output results.

Output

Configure the output settings for the Generate Asset block.

Output Variable

Provide an output variable name for the generated result. Example: Asset_1

Format

Select the output format for the generated asset. Options include:

1. PDF

2. Image (PNG)

3. HTML

Rehost Media

Choose to automatically re-host any third party images in the final output.

Page Size & Orientation

Select the page size for your generated asset:

1. Letter

2. A4

3. Full Page

4. Custom Dimensions (if selected you will supply the height and width in pixels)

Select the orientation type for your document:

1. Portrait

2. Lanscape

Generated Asset Examples

• Instagram Carousels

• Canva-like social media posts

• Financial Reports

• Business Presentations

• Resumes

Inserting Variables to your HTML Document

Once you've added in your HTML template to the source document environment, you can add variables using Handlebars notation.

Single Value Variables

Single-value variables hold one piece of data (such as a title, URL, or short text) in your HTML template. You add them by writing your {{variableName}}, and when the template runs, it will be replaced with its actual value.

Example:

<!-- Page title -->
<h1>{{page.title}}</h1>

<!-- Subtitle -->
<h2>{{page.subtitle}}</h2>

<!-- Image source -->
<img src="{{page.imageURL}}" alt="{{page.imageAltText}}" />

Looping Arrays

When your JSON contains arrays you can use the each helper to loop through a list of sections in your array.

Example:

{{#each page.sections}}
  <section>
    <h3>{{this.header}}</h3>
    <p>{{this.body}}</p>
  </section>
{{/each}}

Conditional Rendering

You can use if-else to render a block of HTML when a value meets a certain condition.

Example:

{{#if page.featured}}
  <div class="featured-banner">
    Featured article: {{page.title}}
  </div>
{{/if}}

For more information on Handelbars notation, please review our article on Using Handlebars Templating.