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 Data Stores API

Setup the HTML/CSS to Image API trigger to run a workflow which integrates with the Data Stores API. Pipedream's integration platform allows you to integrate HTML/CSS to Image and Data Stores 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
Add or update a single record with the Data Stores API

Add or update a single record in your Pipedream Data Store.

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

Create Image From URL. See the docs.

 
Try it
Add or update multiple records with the Data Stores API

Add or update multiple records to your Pipedream Data Store.

 
Try it
Append to record with the Data Stores API

Append to a record in your data store Pipedream Data Store. If the record does not exist, a new record will be created in an array format.

 
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,
    })
  },
})

Overview of Data Stores

With the Data Stores API, you can build applications that:

  • Store data for later retrieval
  • Retrieve data from a store
  • Update data in a store
  • Delete data from a store

Connect Data Stores

1
2
3
4
5
6
7
8
9
10
11
export default defineComponent({
  props: {
    myDataStore: {
      type: "data_store",
    },
  },
  async run({ steps, $ }) {
    await this.myDataStore.set("key_here","Any serializable JSON as the value")
    return await this.myDataStore.get("key_here")
  },
})