A BibleEngine widget

Flint

Strike a light. Two lines put a working Bible search on any page you own — the box and the results — served straight from BibleEngine’s static JSON. No database, no server-side code, no build step, nothing to maintain.

your-page.html

<!-- 1. put this where you want the search box -->
<div id="flint-search"></div>

<!-- 2. put this wherever your scripts already go -->
<script src="https://bibleengine.org/flint/flint.js"></script>

That is the entire install, and the two pieces do different jobs. The div marks the spot. The script tag can go anywhere — in <head>, at the bottom of the page, in whatever include your theme already uses for scripts. It waits for the page to finish loading and then draws the box inside the div, wherever that ended up. The search below is those two lines, and nothing else.

If you would rather not add a div, you can drop the script tag straight into the page at the exact place you want the box and leave the div out — Flint falls back to drawing itself where the tag sits. That only works if the tag is in the body, which is why the div is the version we print first.

Since 2007

Three easy steps, minus one.

phpAV.com — a site I built nineteen years ago, since taken down for want of the funding to keep it running — offered this same idea, and it took three steps. Running the whole search in the visitor’s browser removes the first one, and with it the account, the login, the key and the quota.

1 Sign up for an account There is nothing to sign up for. No account, no key, no quota, and no switch on our end that could ever turn your search off.

2 Copy the code Two short lines. Use the builder further down if you want to change anything about them first.

3 Paste it on your site The div where the box should appear, the script wherever your scripts already live. That is the entire install.

Flint is the descendant of phpAV, which did this in 2007 with a server behind it. This one has no server behind it at all.

Live on this page

Try it right here.

Search a word, several words, an “exact phrase” in quotes, a wildcard like righteous*, a Strong’s number like G26, or just a reference like John 3:16. Flint hands the query to the same engine the API uses and figures out which kind it is.

YOUR-OWN-WEBSITE.COM

Results are paged twenty at a time, with the range and the total shown above them. The page number and the query both live in the URL, so any search you run here is a link you can send to somebody.

See it running on a site that is not this one. A pretend church website with the box in its sidebar, its own fonts and colours, and a results page of its own — the other way to set Flint up, explained further down this page.

⚙ Open the demo site

Build your snippet

Set it up, then copy the tag.

Change anything below and the snippet rewrites itself. Nothing is stored on our end — every option is an attribute on the tag you paste.

Where results appear

Translation

Results page URL

Results per page

Button label

Placeholder text

Passage layout

Max width

Accent colour

Keep the credit line

your-page.html

preview

The sidebar setup

Box on every page, results on one.

Put the box in a sidebar or footer where there is no room to show verses, and send visitors to a page you set aside for results. This takes two tags — but only because they go on two different pages.

1 · The box, in your sidebar or footer template

sidebar.php

<!-- in the sidebar or footer template -->
<div id="flint-search"></div>

<script src="https://bibleengine.org/flint/flint.js"
        data-results="/bible-search/"></script>

In this mode the search engine is never downloaded. The tag costs one small file and stays completely idle until somebody actually submits a search — which matters when the box is sitting on all two hundred of your pages.

2 · The results page you point it at

bible-search/index.html

<!-- where the results should appear -->
<div id="flint-search"></div>

<script src="https://bibleengine.org/flint/flint.js"></script>

That is the plain tag again — there is no separate “results” snippet to keep track of. Flint reads the query out of the URL, fills the box in with it, and runs the search on its own. The box on the results page keeps working as a search box, so a visitor can refine without going back.

Both tags are the same file. If you ever want the results to appear inline instead, delete data-results and you are done. Nothing else changes.

Reference

Every option.

All configuration is data- attributes on the script tag itself. There is no global config object and no second file.

Attribute	Default	What it does
`data-results`	—	URL of your results page. Set it and the tag renders a box only, which submits there. Leave it off and the box and results render together.
`data-translation`	`kjv`	`kjv` or `akjv`.
`data-per-page`	`20`	Results per page, 1–50.
`data-placeholder`	Search the scriptures…	Placeholder text in the input.
`data-button`	`Search`	Label on the submit button.
`data-accent`	`#a9853f`	Any CSS colour. Drives the button, the focus ring and the hit highlight. The button’s label colour is worked out from it, so a dark brand colour gets white lettering instead of unreadable near-black.
`data-accent-ink`	derived	Overrides that worked-out label colour, if you disagree with the choice.
`data-display`	`verse`	How a passage is set. `verse` gives one verse to a line with its number in bold and the pilcrows showing, the way a printed reference Bible sets it. `paragraph` runs the verses together into indented, solid-set paragraphs broken wherever the pilcrows fall, with the verse numbers as small superior figures and the chapter number set large in dark red, floated so the text wraps round it. `reading` is the same paragraphing with no verse numbers and no chapter numeral at all, set larger — the text as a book rather than as a reference work. Search results are unaffected; scattered verses are a list either way. Override `--flint-cap` to recolour the chapter numeral.
`data-display-toggle`	`on`	Set to `off` to fix the setting above and hide the switch. Left on, the reader picks, and their choice is remembered for next time.
`data-icon`	`on`	Set to `off` to drop the small open-book glyph inside the input.
`data-target`	—	The `id` of a specific element to render into, if you want something other than the usual container. Flint already looks for `#flint-search` and `.flint-search` on its own, and falls back to the script tag’s own position if it finds neither.
`data-param`	`q`	Query string parameter holding the search.
`data-page-param`	`fp`	Query string parameter holding the page number. It is not `p`, because WordPress already uses that for post IDs.
`data-link`	this site	Where a verse reference points. By default it points back at your site — your results page if you set one, otherwise the page the visitor is already on — so clicking a reference never hands your reader to somebody else. Set this only if you have a Bible reader of your own to send them to; the reference is appended URL-encoded, as in `https://example.org/bible/?ref=`.
`data-width`	—	Maximum width of the whole widget, as any CSS length — `680px`, `44em`. Left off, it fills whatever you put it in.
`data-autofocus`	`off`	Set to `on` to put the cursor in the box on load. Good on a results page, rude in a sidebar.
`data-credit`	`on`	Set to `off` to drop the credit line. It is a courtesy, not a condition.
`data-styles`	`on`	Set to `off` and no CSS is injected at all, leaving the `.flint-*` classes bare for you to style.
`data-engine` `data-base`	this site	Point at your own copy of `BibleEngine.js` and `/v1` if you would rather self-host the data.

How it works

Static files and a regular script tag.

Every verse reference in the results points back at your site, not at ours. A visitor who clicks one runs the lookup where they already are; when the results are on the same page it does not even reload. Set data-link only if you have a reader of your own to send them to instead.
Each search result carries an in context link that opens the whole chapter with that verse marked and scrolled to. The chapter and the verse both land in the URL, so it is a link worth sending to somebody.
A passage is set the way a printed reference Bible sets it, and the reader can switch it to running paragraphs, or to a reading setting with no verse numbers at all — the pilcrows the KJV printers put in become the actual paragraph breaks. Switching is instant: nothing reloads and nothing is fetched again, and the reader’s choice is remembered.
Searches, result pages and context jumps each get their own entry in the browser history, so Back goes to the previous set of results rather than off your site. Forward works too, and every step is a real URL that can be bookmarked or shared.
Flint is a plain classic script, not a module, so it can find its own tag and render itself in place. That is what keeps the install to one line with no placeholder <div> to remember.
The engine is pulled in with a dynamic import() the first time somebody searches — never on page load.
Word, wildcard and reference searches only fetch the chapters they need for the page being shown, so a search over the whole Bible costs a handful of small JSON files.
Supplied words stay in italic, words of Christ stay in red, pilcrows stay where they belong. The markers live in the stored JSON and are styled at display time.
Every hit is highlighted, including the specific word behind a Strong’s number.
Styles are self-contained and scoped to .flint, and they inherit your page’s font rather than importing one.

Content-Security-Policy. If your site sends a CSP header, allow bibleengine.org in both script-src and connect-src. Missing either one is the single most common reason Flint comes up empty, and it will tell you so in the box rather than failing silently.

One thing to know: exact-phrase search in quotes is the expensive query. Flint has to pull every verse containing the words before it can check the wording, so a phrase built from common words can take a moment. Single words, wildcards and references are all fast.

The KJV, American KJV and Strong’s texts are public domain; BibleEngine is released under CC0. Use it on anything, including something you charge for. Pasted it in and got a blank space? The FAQ works through the causes in the order they are worth checking. If you want references in your body text to show verses on hover as well, add VerseTagger — the two are built to sit on the same page.