HTML Tone Checker

Keep the Sapling API key in your backend. This browser example calls an application-owned /api/tone route that proxies the request to Sapling.

<form id="tone-form">
  <label for="content-editor">Text to analyze</label>
  <textarea id="content-editor" sapling-ignore="true">
Really stoked about this! Will it be ready by next week?
  </textarea>
  <button type="submit">Check tone</button>
</form>

<pre id="results" aria-live="polite"></pre>

<script>
const form = document.getElementById('tone-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const text = document.getElementById('content-editor').value;
  const response = await fetch('/api/tone', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({text}),
  });

  if (!response.ok) {
    throw new Error(`Tone request failed: ${response.status}`);
  }

  const data = await response.json();
  document.getElementById('results').textContent = JSON.stringify(data, null, 2);
});
</script>