<PoolEval/> · eval charts for svelte

Eval charts.
For Svelte.

A small, opinionated charting component for showing model evals. Drop it in. Customize the colors. Ship.

npm install @poolsideai/pooleval

SWE-bench Verified Bar chart with 6 bars. Poolside Nova highlighted at 54.2.

Beautiful eval charts

Super simple charts. Numbers count up, bars rise from the floor. Hover any column for the model name.

Beautiful eval charts Bar chart with 5 bars. Poolside Nova highlighted at 72.4.

1<script>2  import PoolEval from '@poolsideai/pooleval';3 4  const data = [5    { value: 72.4, provider: 'poolside', label: 'Poolside Nova', highlight: true },6    { value: 64, provider: 'openai', label: 'GPT-5' },7    { value: 58.7, provider: 'gemini', label: 'Gemini 2.5 Pro' },8  ];9</script>10 11<PoolEval data={data} max={100} title="Beautiful eval charts" />

Monochromatic mode + theming

Pass monochromatic to drop the canonical brand colors and let icons inherit your theme. The highlighted icon picks up --pe-icon-highlight alongside its bar.

GPQA Diamond Bar chart with 5 bars. Poolside Nova highlighted at 87.

1<PoolEval2  data={gpqa}3  max={100}4  monochromatic5  title="GPQA Diamond"6  theme={{7    'bar-highlight': '#10b981',8    'text-highlight': '#10b981',9    'icon-highlight': '#10b981',10    'bar-radius': '3px',11    'baseline-color': '#d1d5db',12    'baseline-padding': '14px',13  }}14  darkTheme={{15    'baseline-color': 'rgba(255, 255, 255, 0.2)',16  }}17/>

With units. Without animation.

Pass unit per data point and animate={false} to disable the count-up.

Inference latency, lower is better Bar chart with 5 bars. Claude Haiku 4.5 highlighted at 142ms.

1<PoolEval2  data={[3    { value: 142, provider: 'claude', label: 'Claude Haiku 4.5', highlight: true, unit: 'ms' },4    { value: 168, provider: 'openai', label: 'GPT-5 mini', unit: 'ms' },5    { value: 195, provider: 'gemini', label: 'Gemini 2.5 Flash', unit: 'ms' },6  ]}7  animate={false}8  title="Inference latency, lower is better"9  theme={{10    'bar-highlight': '#f97316',11    'text-highlight': '#f97316',12    'bar-radius': '4px',13  }}14/>

Rotated labels

Pass labels={true} to show compact model names below the provider icons. The label lane is measured from the longest label.

Arena win rate Bar chart with 5 bars. Poolside Nova highlighted at 91.

1<PoolEval2  data={labeled}3  max={100}4  labels={true}5  title="Arena win rate"6  theme={{7    'bar-highlight': '#2455ff',8    'text-highlight': '#2455ff',9    'bar-gap': '28px',10  }}11/>

Custom provider icons

Keep using built-in provider keys, or pass a Svelte component with providerIcons for your own provider marks. A datum-level icon can override a single column.

Custom provider icons Bar chart with 4 bars. Acme Reasoner highlighted at 94.

1<script>2  import PoolEval from '@poolsideai/pooleval';3  import AcmeProviderIcon from './AcmeProviderIcon.svelte';4 5  const data = [6    { value: 94, provider: 'acme', label: 'Acme Reasoner', highlight: true },7    { value: 88, provider: 'poolside', label: 'Lyra' },8    { value: 83, provider: 'openai', label: 'Nova 5' },9  ];10 11  const providerIcons = {12    acme: AcmeProviderIcon,13  };14</script>15 16<PoolEval {data} {providerIcons} max={100} title="Custom provider icon" />

Interactive sandbox

Tune chart props, data, and theme settings in realtime. Configure to your liking, then export the code to use in your own project.

Live Benchmark Bar chart with 5 bars. Poolside Nova highlighted at 76.

Bars

Bar Color theme.bar-color

Bar Highlight theme.bar-highlight

Bar Width 22px theme.bar-width Bar Gap 18px theme.bar-gap Bar Radius 2px theme.bar-radius

Text

Text Color theme.text-color

Text Highlight theme.text-highlight

Font Family

theme.font Font Size 13px theme.font-size

Counts

Override count text

Tooltips

Tooltip Background theme.tooltip-bg

Tooltip Foreground theme.tooltip-color

Tooltip Radius 6px theme.tooltip-radius

Override tooltip font

Baseline

Baseline Color theme.baseline-color

Baseline Width 1px theme.baseline-width Baseline Padding 10px theme.baseline-padding Baseline Offset 0px theme.baseline-offset

Icons

Use monochrome icons prop.monochromatic

Icon Foreground theme.icon-fg

Icon Size 20px theme.icon-size Icon Gap 12px theme.icon-gap

Labels

Chart

Chart Height 170px prop.chartHeight

Chart Background theme.bg

Animation

Animation Duration 900ms prop.duration

Design tokens

Pass these keys to theme or darkTheme. Dark values override the same token when the user prefers a dark color scheme.

Token	Default Value	Description
`bar-color`	`#d6d6d6`	Default bar fill.
`bar-highlight`	`#7c3aed`	Highlighted bar fill and focus ring.
`bar-width`	`22px`	Width of each bar column.
`bar-radius`	`0px`	Corner radius for bars.
`bar-gap`	`18px`	Space between bar columns.
`text-color`	`#b0b0b0`	Base text color for labels and count fallback.
`text-highlight`	`#7c3aed`	Highlighted label color and count fallback.
`font`	`"JetBrains Mono", ui-monospace, monospace`	Base font inherited by labels, counts, and tooltips.
`font-size`	`13px`	Base chart font size inherited by counts.
`count-color`	Inherits from `text-color`	Optional override for numeric counts above bars.
`count-highlight`	Inherits from `text-highlight`	Optional override for highlighted count text.
`count-font`	Inherits from `font`	Optional count font override.
`count-font-size`	Inherits from `font-size`	Optional count font-size override.
`tooltip-bg`	`#111`	Tooltip background color and arrow fill.
`tooltip-color`	`#fff`	Tooltip text color.
`tooltip-radius`	`6px`	Tooltip corner radius.
`tooltip-font`	Inherits from `font`	Optional tooltip font override.
`tooltip-font-size`	Inherits from `font-size`	Optional tooltip font-size override.
`baseline-color`	`rgba(0, 0, 0, 0.10)`	Baseline stroke color.
`baseline-width`	`1px`	Baseline thickness.
`baseline-padding`	`10px`	How far the baseline extends beyond the outside bars.
`baseline-offset`	`0px`	Vertical offset from the bar baseline.
`icon-color`	`#d6d6d6`	Monochromatic icon color.
`icon-highlight`	`#7c3aed`	Highlighted monochromatic icon color.
`icon-fg`	`#111`	Foreground color for full-color provider icons.
`icon-size`	`20px`	Provider icon size.
`icon-gap`	`12px`	Space between bar base and icon.
`label-color`	Inherits from `text-color`	Optional rotated label text color override.
`label-highlight`	Inherits from `text-highlight`	Optional highlighted label text color override.
`label-font`	Inherits from `font`	Optional rotated label font override.
`label-font-size`	`11px`	Optional rotated label text size override.
`label-gap`	`8px`	Space between icon and rotated label.
`bg`	`transparent`	Chart wrapper background.

Eval charts. For Svelte.