Real-Time Results from Input

[johnlindquist]

When you pass a function as the second argument of arg, you can take the current input and return a string. Kit.app will then render the results as HTML. The simplest example looks like this:

await arg("Start typing", input => input)

If you want to make it look a bit nicer, you can wrap the output with some HTML:

await arg(
  "Type something",
  input =>
    `<div class="text-3xl flex justify-center items-center p-5">
${input || `Waiting for input`}
</div>`
)

Growing on the example above, here's a Celsius to Fahrenheit converter:

let cToF = celsius => {
  return (celsius * 9) / 5 + 32
}

await arg(
  "Enter degress in celsius",
  input =>
    `<div class="text-3xl flex justify-center items-center p-5">
${input ? cToF(input) + "f" : `Waiting for input`}
</div>`
)