@textnode/dev

> Development tools for the textnode typography system

Part of the textnode typography system.

Features

- Font Debug Panel - Inspect font loading state in real-time
- Type Scale Visualizer - Preview all scale values visually
- CLS Monitor - Track Cumulative Layout Shift scores
- Font Loading Inspector - Debug font loading issues

Installation

``bash
npm install -D @textnode/dev
`

Components

$3

Interactive panel showing font loading status.

`tsx
import { FontDebugPanel } from '@textnode/dev';

function App() {
return (
<>

{process.env.NODE_ENV === 'development' && }

);
}
`

Features:
- Real-time font loading status
- Shows loaded, loading, and failed fonts
- Displays font file paths
- Toggleable visibility

$3

Visual preview of your type scale.

`tsx
import { TypeScaleVisualizer } from '@textnode/dev';

function DesignSystemPage() {
return (
showPixelValues
showRatios
sampleText="The quick brown fox"
/>
);
}
`

Props:
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| showPixelValues | boolean | true | Show px values |
| showRatios | boolean | false | Show scale ratios |
| sampleText | string | 'Aa' | Preview text |
| darkMode | boolean | false | Dark theme |

$3

Track and display Cumulative Layout Shift.

`tsx
import { CLSMonitor } from '@textnode/dev';

function App() {
return (
<>



);
}
`

Props:
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| position | string | 'bottom-right' | Panel position |
| threshold | number | 0.1 | Warning threshold |
| showHistory | boolean | true | Show shift history |

Hooks

$3

Programmatic CLS tracking.

`tsx
import { useCLSTracking } from '@textnode/dev';

function MyComponent() {
const { score, shifts, isGood } = useCLSTracking();

return (



);
}
`

Returns:
| Property | Type | Description |
|----------|------|-------------|
| score | number | Current CLS score |
| shifts | array | Individual shift events |
| isGood | boolean | Score < 0.1 |
| needsImprovement | boolean | 0.1 < Score < 0.25 |
| isPoor | boolean | Score > 0.25 |

Usage Tips

$3

Always conditionally render dev tools:

`tsx
{process.env.NODE_ENV === 'development' && }
`

$3

- Ctrl+Shift+T - Toggle type scale visualizer
- Ctrl+Shift+F - Toggle font debug panel
- Ctrl+Shift+C - Toggle CLS monitor

$3

All components accept className and style props:

`tsx
className="my-debug-panel"
style={{ zIndex: 9999 }}
/>
``

Related Packages

- @textnode/core - Core system
- @textnode/react - React components
- @textnode/nextjs - Next.js integration

License

MIT