Concordance

A text search overlay for any corpus. As you type, matching words are highlighted and connected by curved SVG arcs. Related word chips can be configured per query. Uses ResizeObserver to recompute link positions on layout changes. Includes a meta row showing match count and related words.

concordance-preview

0 matches

The art of programming is the art of organizing complexity, of mastering multitude and avoiding its bastard chaos as effectively as possible. A programmer is a person who passes as an orderly person in order to deal with a seemingly disordered matter. Programming is the art of telling another human being what one wants the computer to do. The most important property of a program is whether it accomplishes the intention of its user.

Type to highlight · click a match to follow it

Loading preview...

Why it helps: A concordance turns a wall of text into an interactive exploration tool. The curved arcs create a visual rhythm between repeated words, making patterns jump out.

Also good to know:

-SVG arcs are computed via ResizeObserver + RAF - on long texts with many matches, this can cause layout thrash
-Tokenization is simple (splits on non-word chars) - won't handle hyphenation or CJK correctly
-Max matches is capped at 40 by default to avoid overwhelming the SVG layer

Source

components/live/Concordance.tsx

// Loading source...

Usage

example.tsx

import { Concordance } from "@/components/live/Concordance";

<Concordance
  text="Your long text here..."
  related={{ word: ["synonym1", "synonym2"] }}
/>
import { Concordance } from "@/components/live/Concordance";

<Concordance
  text="Your long text here..."
  related={{ word: ["synonym1", "synonym2"] }}
/>

Props

text-

string

The corpus text to search within.

related-

Record<string, string[]>

Optional related word map.

placeholder"Find a word…"

string

Search input placeholder.

fontSize17

number

Base font size for the corpus.

highlightColor"#c4462a"

string

Active match accent color.

linkColor"rgba(196,70,42,0.28)"

string

Link arc stroke color.

maxMatches40

number

Max highlighted matches.

showMetatrue

boolean

Show match count and related chips.

onQueryChange-

(query: string) => void

Called when the query changes.

className-

string

Additional CSS classes.