Snippets | The Bible API

1. Basic API Usage

Minimal fetch examples for every core endpoint.

Fetch

Get Verse (Live Fetch Example)

Retrieve a single verse by book, chapter, and verse number.

JavaScript

const res = await fetch(
  'https://thebibleapi.netlify.app/.netlify/functions/getVerse'
  + '?book=John&chapter=3&verse=16&translation=web'
);
const data = await res.json();
console.log(data.text);

Fetch

Get Chapter (Full Passage)

Fetch a complete chapter as an ordered list of verses.

JavaScript

const res = await fetch(
  'https://thebibleapi.netlify.app/.netlify/functions/getChapter'
  + '?book=Genesis&chapter=1&translation=web'
);
const data = await res.json();
data.verses.forEach(v => {
  console.log(`${v.verse}. ${v.text}`);
});

Fetch

List All Books

Return every book available in the selected translation.

JavaScript

const res = await fetch(
  'https://thebibleapi.netlify.app/.netlify/functions/getBooks'
  + '?translation=web'
);
const { books } = await res.json();
console.log(`${books.length} books available`);

2. UI Components

Drop-in markup for common Bible UIs.

Component

Verse Display Card

A clean, accessible verse card - HTML + CSS only.

HTML

<article class="verse-card">
  <cite class="verse-ref">John 3:16</cite>
  <p class="verse-text">
    For God so loved the world, that he gave
    his only begotten Son…
  </p>
  <footer class="verse-meta">World English Bible</footer>
</article>

John 3:16

For God so loved the world, that he gave his only begotten Son, that whosoever believeth in him should not perish, but have everlasting life.

Component

Chapter Reader Layout

Render an entire chapter with verse numbers inline.

JavaScript

async function renderChapter(book, chapter, el) {
  const url =
    `https://thebibleapi.netlify.app/.netlify/functions/getChapter`
    + `?book=${book}&chapter=${chapter}&translation=web`;
  const { verses } = await (await fetch(url)).json();
  el.innerHTML = verses
    .map(v => `<p><sup>${v.verse}</sup> ${v.text}</p>`)
    .join('');
}

¹ In the beginning God created the heavens and the earth.

² The earth was formless and empty. Darkness was on the surface of the deep…

³ God said, "Let there be light," and there was light.

Component

Search Input + Results

A minimal search box wired up to the /search endpoint.

JavaScript

async function searchBible(query, out) {
  const url =
    `https://thebibleapi.netlify.app/.netlify/functions/search`
    + `?q=${encodeURIComponent(query)}&limit=5&translation=web`;
  const { results } = await (await fetch(url)).json();
  out.innerHTML = results
    .map(r => `<li><strong>${r.book} ${r.chapter}:${r.verse}</strong>
                - ${r.text}</li>`)
    .join('');
}

3. Practical Apps

Small, complete apps you can ship today.

Widget

Verse of the Day

A deterministic daily verse - perfect for a homepage widget.

JavaScript

async function loadVerseOfDay(el) {
  const res = await fetch(
    'https://thebibleapi.netlify.app/.netlify/functions/verseOfDay'
    + '?translation=web'
  );
  const v = await res.json();
  el.innerHTML = `
    <blockquote>${v.text}</blockquote>
    <cite>- ${v.book} ${v.chapter}:${v.verse}</cite>
  `;
}

App

Random Verse Generator

Pick a random book + chapter + verse and fetch it.

JavaScript

async function randomVerse() {
  const base = 'https://thebibleapi.netlify.app/.netlify/functions';
  const { books } = await (await fetch(
    `${base}/getBooks?translation=web`
  )).json();
  const book = books[Math.floor(Math.random() * books.length)];
  const chapter = 1 + Math.floor(Math.random() * book.chapters);
  const { verses } = await (await fetch(
    `${base}/getChapter?book=${book.name}&chapter=${chapter}&translation=web`
  )).json();
  return verses[Math.floor(Math.random() * verses.length)];
}

App

Simple Devotional Generator

Pairs the verse of the day with a short reflection prompt.

JavaScript

const PROMPTS = [
  'What does this verse reveal about God\'s character?',
  'How can this shape your day today?',
  'Who could you share this with?',
];

async function devotional(el) {
  const v = await (await fetch(
    'https://thebibleapi.netlify.app/.netlify/functions/verseOfDay?translation=web'
  )).json();
  const prompt = PROMPTS[new Date().getDate() % PROMPTS.length];
  el.innerHTML = `
    <blockquote>${v.text}</blockquote>
    <cite>${v.book} ${v.chapter}:${v.verse}</cite>
    <p class="reflect">Reflect: ${prompt}</p>
  `;
}