peekx

Peek is an inline progressive disclosure component for React. Annotate words or phrases with pre-written context — readers click to expand, content streams in at reading speed. Write once, readable by every audience.

Live demo and full writeup →

---

Install

npm install peekx
# pnpm add peekx
# bun add peekx
# yarn add peekx

Usage

Works in .tsx, .jsx, and .mdx files.

import { Peek } from 'peekx'

// Basic
The model uses <Peek trigger="RLHF">Reinforcement Learning from Human Feedback —
someone paid $3/hr to vote yes or no on a response</Peek> to steer outputs.

// Nested
We use <Peek trigger="agents">autonomous programs that plan and execute tasks using
an <Peek trigger="LLM">Large Language Model — predicts the next token given everything
it has seen so far</Peek> as their reasoning engine</Peek>.

// Rich trigger
<Peek trigger={<code>temperature</code>}>a sampling parameter between 0 and 2 —
higher values make outputs more random, lower values more deterministic</Peek>

Configuration

Set once at your app root — applies everywhere:

import { peekConfig } from 'peekx'

peekConfig.wordsPerMinute = 400       // default: 300
peekConfig.triggerStyle = { borderBottom: '1px solid' }
peekConfig.colors = [
  { text: '#f97316', glow: '0 0 12px #f9731650' },
  { text: '#ec4899', glow: '0 0 12px #ec489950' },
  { text: '#14b8a6', glow: '0 0 12px #14b8a650' },
]

Props

Prop	Type	Description
trigger	ReactNode	The clickable word or phrase shown inline
children	ReactNode	The content that expands — supports nested Peeks
onOpen	() => void	Called when the Peek expands
onClose	() => void	Called when the Peek collapses

Requirements

• React 18+
• JSX-capable format (.tsx, .jsx, .mdx) — plain .md won't work

Notes

• Nesting is unlimited — colors cycle blue → violet → emerald → repeat
• Keyboard accessible: Enter/Space toggle, Escape closes
• peekConfig is a module-level singleton — configure it once before any Peek renders
• No dependencies beyond React
• Add 'use client' if using Next.js App Router

Demo

See it live: ossama.is/writing/peek

License

MIT