Image output

Large text on an SVG background

Grab attention with large text on a classic background.

This example is great for grabbing attention in an email or advertisement. It uses Bootstrap CSS and an SVG background. Play around with the color to fit your product.

Interactive example

Edit and render this image

Change the HTML, CSS, or API options. The browser preview updates as you edit; select Image to render the final output through the API.

Content

Adjust how content is rendered by adjusting these settings.

URL ?

Pass a publicly available URL and the API will capture it. (Only applies when a URL is provided)

Google Fonts ?

Google fonts to load. Separate multiple families with a pipe, such as Roboto|Open Sans, and set font-family in the CSS.

Selector ?

A CSS selector for an element in the HTML. We’ll crop the image to this specific element.

Transparent Background ?

Removes the background from the rendered image.

Image size & Viewport

By default images are cropped to the outermost HTML element or the chosen selector. Adjust viewport and sizing settings below.

Full Screen ?

Take a screenshot of the entire screen (Only applies when a URL is provided)

Device Scale ?

Adjusts the screenshot pixel ratio. HTML and template renders default to 2; URL renders default to 1.

Viewport ?

Height

Width

Set the height and width of Chrome's viewport. Setting a viewport disables automatic cropping.

Landscape Viewport

Sets the emulated viewport orientation to landscape.

Mobile Viewport

Makes the emulated viewport behave like a mobile device and honor mobile viewport behavior.

Touch Viewport

Makes the emulated viewport report support for touch events.

Timing

By default the API generates a screenshot once everything is loaded. If the page executes JavaScript, you may want extra time before the image is rendered.

Ms Delay ?

Adds extra time for JavaScript to execute before the screenshot is taken. Start with 500 milliseconds if the page renders blank.

Max Wait Ms ?

Sets a limit on how long to wait before taking the screenshot when irrelevant content continues loading.

Render When Ready ?

Waits for the page to signal that the screenshot is ready instead of capturing after normal loading.

Browser Context

These settings impact how Chrome is started, giving you more control when taking screenshots.

Color Scheme ?

Set Chrome to render as if the user prefers light or dark mode.

Media Type

Set Chrome to render the page using print or screen media styles.

Timezone ?

Render the page with Chrome set to a specified timezone.

Block Consent Banners ?

Attempt to block cookie/consent banners from displaying. (Only applies when a URL is provided)

Identify as HCTI

Send X-HCTI-SCREENSHOT: 1 with the top-level page navigation. (Only applies when a URL is provided)

Example code

Use this request in your app

Choose a language and copy a complete request using this example's HTML, CSS, and API options.

using System.Net.Http.Headers;
using System.Net.Http.Json;
using System.Collections.Generic;
using System.Text;
using System.Text.Json.Nodes;

var apiId = Environment.GetEnvironmentVariable("HCTI_API_ID")!;
var apiKey = Environment.GetEnvironmentVariable("HCTI_API_KEY")!;
using var client = new HttpClient();
var credentials = Convert.ToBase64String(Encoding.ASCII.GetBytes($"{apiId}:{apiKey}"));
client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic", credentials);

var request = new
{
    html = """
           <div class="wrapper text-center d-block p-4">
             <h1 class="text-white p-4 m-4">Sometimes you gotta work a little so you can <span class="highlight">ball a lot.</span></h1>
           </div>
           
           <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
           """,
    css = """
          .wrapper {
            width: 800px;
            background-color: #000000;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='30' viewBox='0 0 1000 120'%3E%3Cg fill='none' stroke='%23222' stroke-width='10' %3E%3Cpath d='M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3C/g%3E%3C/svg%3E");
          }
          h1 {
            font-size: 4rem !important;
          }
          .highlight {
            color: #c72b4e;
          }
          
          """,
};

using var response = await client.PostAsJsonAsync("https://hcti.io/v1/image", request);
response.EnsureSuccessStatusCode();
var result = await response.Content.ReadFromJsonAsync<JsonObject>();
var imageUrl = result?["url"]?.GetValue<string>();
if (imageUrl is not null)
{
    Console.WriteLine(imageUrl);
}

Read the C# Docs

From code to screenshot

How HCTI examples work

HTML/CSS to Image renders HTML and CSS in hosted Chrome, then captures the result as an image or PDF. Each example combines real source code with the API options used for the render, so it is both a working demo and a starting point for your own request.

Edit the source and options above to test changes in the browser, then render through the API to see the production result.

Common questions

Can I use the HTML and CSS from these examples?

Yes. Open an example to inspect and edit its complete HTML, CSS, and render options. Use it as a starting point, then send the resulting request from your application.

What is the difference between an example and a template?

Examples are complete API requests built from HTML and CSS. Templates are saved, reusable designs created in the visual editor and rendered repeatedly with different variable values.

Does HCTI create screenshots and PDFs?

Yes. HCTI can render HTML and CSS or capture a public webpage as an image, and it can generate PDFs when you need document output instead of a screenshot.