Skip to main content

Vanilla JavaScript/HTML example using async/await to call an API.

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vanilla JavaScript App</title>
  * {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;

  body {
    margin: 0;
    border: 0;
    padding: 0;
    background-color: #fff;

  main {
    margin: auto;
    width: 50%;
    padding: 20px;

  main {
    text-align: center;

  h1 {
    font-size: 3.5em;
    <h1>Vanilla JavaScript App</h1>
    <p>Loading content from the API: <span id="message"></span></p>
(async function () {
  let response = await fetch('api/message');
  let message = await response.json();

  document.querySelector("#message").innerHTML = message.text;