HTML/CSS to Image

The API for generating high-quality images from HTML/CSS. No yak shaving required.

Integrate the HTML/CSS to Image API with the Formatting API

Setup the HTML/CSS to Image API trigger to run a workflow which integrates with the Formatting API. Pipedream's integration platform allows you to integrate HTML/CSS to Image and Formatting remarkably fast. Free for developers.

Create Image From HTML with the HTML/CSS to Image API

Create Image From HTML. See the docs.

 
Try it
[Data] Convert JSON to String with the Formatting API

Convert an object to a JSON format string

 
Try it
Create Image From URL with the HTML/CSS to Image API

Create Image From URL. See the docs.

 
Try it
[Data] Parse JSON with the Formatting API

Parse a JSON string

 
Try it
[Date/Time] Add/Subtract Time with the Formatting API

Add or subtract time from a given input

 
Try it

Overview of HTML/CSS to Image

With the HTML/CSS to Image API you can:

  • Generate images from HTML/CSS code snippets
  • Use CSS selectors to grab specific elements from the HTML code
  • Use HTML5 canvas to crop, filter, or resize the images
  • Output the resulting images in various formats (JPEG, PNG, GIF, WebP)

Connect HTML/CSS to Image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { axios } from "@pipedream/platform"
export default defineComponent({
  props: {
    html_css_to_image: {
      type: "app",
      app: "html_css_to_image",
    }
  },
  async run({steps, $}) {
    const data = {
      "url": `https://google.com`,
    }
    return await axios($, {
      method: "post",
      url: `https://hcti.io/v1/image`,
      auth: {
        username: `${this.html_css_to_image.$auth.user_id}`,
        password: `${this.html_css_to_image.$auth.api_key}`,
      },
      data,
    })
  },
})

Connect Formatting

1
2
3
4
5
6
export default defineComponent({
  async run({ steps, $ }) {
    const text = ' Hello world! ';
    return text.trim()
  },
})