HTML API Demo
@raymondcamden
code:
data:privatelast updated:4 years ago
today
Build integrations remarkably fast!
You're viewing a public workflow template.
Sign up to customize, add steps, modify code and more.
Join 1,000,000+ developers using the Pipedream platform
steps.
trigger
HTTP API
Deploy to generate unique URL
This workflow runs on Pipedream's servers and is triggered by HTTP / Webhook requests.
steps.
handleGet
auth
to use OAuth tokens and API keys in code via theauths object
code
Write any Node.jscodeand use anynpm package. You can alsoexport datafor use in later steps via return or this.key = 'value', pass input data to your code viaparams, and maintain state across executions with$checkpoint.
async (event, steps) => {
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
}
53
if(event.method === 'GET') {
  let html = `
<html>
<head></head>

<body>

<div id="app">
<p>
<input v-model="name"> <button @click="sendToAPI">Process</button>
</p>

<p>
Result: {{ result }}
</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
	el:'#app',
	data: {
		name:'',
		result:''
	},
	methods: {
		async sendToAPI() {
			let resp = await fetch("${event.url}", {
				method:"post",
				body: JSON.stringify({name:this.name})
			});
			let data = await resp.json();
			this.result = data.response;
		}
	}

});

</script>
</body>
</html>
`;
  $respond({
    status: 200,
    headers: {
      "Content-Type": "text/html; charset=UTF-8"
    },
    body: html,
  });
	$end();   
} 
steps.
handlePost
auth
to use OAuth tokens and API keys in code via theauths object
code
Write any Node.jscodeand use anynpm package. You can alsoexport datafor use in later steps via return or this.key = 'value', pass input data to your code viaparams, and maintain state across executions with$checkpoint.
async (event, steps) => {
1
2
3
4
5
6
7
8
9
10
11
}
12
if(event.method === 'POST') {
	let name = 'Nameless';
	if(event.body.name) name = event.body.name;
	$respond({
		headers: {
			"Content-Type":"application/json"
		},
		body: {"response":`Hello ${name}`}
	});
}