Features

• Output for CLIs and markdown
• Build your own columns
• Change column order
• Handles unicode & truncation
• Customizable count formatting:
  • none
  • shortest
  • highest
  • lowest
  • mean
  • thousands
  • millions
  • billions
• Customizable duration formatting:
  • shortest
  • highest
  • lowest
  • mean
  • nanoseconds
  • microseconds
  • milliseconds
  • seconds
• Sorting:
  • false
  • asc
  • desc
  • Function
• Uses Intl.NumberFormat for localization and removing insignificant fractions
• Customizable header titles, styles and alignments
• Customizable row styles and alignments
• Customizable borders and border styles
• …

Installation

1npm install @monstermann/tinybench-pretty-printer
2yarn add @monstermann/tinybench-pretty-printer
3pnpm add @monstermann/tinybench-pretty-printer

Getting Started

1import { Bench } from 'tinybench'
2
3const bench = new Bench()
4
5bench.add(Function)
6bench.add(Function)
7bench.add(Function)
8
9await bench.warmup()
10await bench.run()

Using Defaults

1import { tinybenchPrinter } from '@monstermann/tinybench-pretty-printer'
2
3const cli = tinybenchPrinter.toCli(bench)
4console.log(cli)

1import { writeFile } from 'node:fs/promises'
2
3const markdown = tinybenchPrinter.toMarkdown(bench)
4await writeFile('results.md', markdown)

Using Options

1import { tinybenchPrinter } from '@monstermann/tinybench-pretty-printer'
2
3const myCustomPrinter = tinybenchPrinter
4
5    // Display ops/sec in millions exclusively:
6    .ops({ method: 'millions' })
7
8    // Pick a time formatting method based on the mean duration of all benchmarks,
9    // and tweak some styling for that column:
10    .time({
11        method: 'mean',
12        rowAlignment: ['center'],
13        rowStyle: ['bold'],
14    })
15
16    // Sort ascending instead of descending:
17    .sort('asc')
18
19    // Decrease the default padding:
20    .padding(1)
21
22    // Remove some borders to make it more compact:
23    .useBorderTop(false)
24    .useBorderLeft(false)
25    .useBorderRight(false)
26    .useBorderBottom(false)
27
28console.log(myCustomPrinter.toCli(bench))

Configuring Default Columns

1import { tinybenchPrinter } from '@monstermann/tinybench-pretty-printer'
2
3tinybenchPrinter
4
5    .name({
6        // Change the header title:
7        header: 'name',
8        // Change the header style:
9        // (see https://github.com/alexeyraspopov/picocolors/blob/main/types.ts)
10        headerStyle: ['bold'],
11        // Change the header alignment: (left | center | right)
12        headerAlignment: 'center',
13
14        // Change the row alignment: (left | center | right)
15        rowAlignment: 'left',
16        // Change the row style:
17        // (see https://github.com/alexeyraspopov/picocolors/blob/main/types.ts)
18        rowStyle: [],
19    })
20
21    .summary({
22        // Change the column text of the fastest result:
23        fastestTitle: '🥇',
24
25        // Display as "10x slower":
26        method: 'x',
27        // Display as "-90%":
28        method: '%',
29
30        // Change the header title:
31        header: 'summary',
32        // Change the header style:
33        // (see https://github.com/alexeyraspopov/picocolors/blob/main/types.ts)
34        headerStyle: ['bold'],
35        // Change the header alignment: (left | center | right)
36        headerAlignment: 'center',
37
38        // Change the row alignment: (left | center | right)
39        rowAlignment: 'center',
40        // Change the row style:
41        // (see https://github.com/alexeyraspopov/picocolors/blob/main/types.ts)
42        rowStyle: [],
43
44    })
45
46    .ops({
47        // Display value as-is:
48        method: 'none',
49        // Display all rows in thousands, eg. "10K":
50        method: 'thousands',
51        // Display all rows in millions, eg. "10M":
52        method: 'millions',
53        // Display all rows in billions, eg. "10B"
54        method: 'billions',
55
56        // Choose from the above, favoring the shortest possible option for each row:
57        method: 'shortest',
58        // Chose from the above, based on the highest ops/sec of all benchmarks:
59        method: 'highest',
60        // Chose from the above, based on the lowest ops/sec of all benchmarks:
61        method: 'lowest',
62        // Chose from the above, based on the mean ops/sec of all benchmarks:
63        method: 'mean',
64
65        // Change the header title:
66        header: 'ops/sec',
67        // Change the header style:
68        // (see https://github.com/alexeyraspopov/picocolors/blob/main/types.ts)
69        headerStyle: ['bold'],
70        // Change the header alignment: (left | center | right)
71        headerAlignment: 'center',
72
73        // Change the row alignment: (left | center | right)
74        rowAlignment: 'right',
75        // Change the row style:
76        // (see https://github.com/alexeyraspopov/picocolors/blob/main/types.ts)
77        rowStyle: ['blue'],
78
79    })
80
81    .time({
82        // Display all rows in nanoseconds, eg. "10ns":
83        method: 'nanoseconds',
84        // Display all rows in microseconds, eg. "10µs":
85        method: 'microseconds',
86        // Display all rows in milliseconds, eg. "10ms":
87        method: 'milliseconds',
88        // Display all rows in seconds, eg. "10s":
89        method: 'seconds',
90
91        // Choose from the above, favoring the shortest possible option for each row:
92        method: 'shortest',
93        // Chose from the above, based on the highest time/op of all benchmarks:
94        method: 'highest',
95        // Chose from the above, based on the lowest time/op of all benchmarks:
96        method: 'lowest',
97        // Chose from the above, based on the mean time/op of all benchmarks:
98        method: 'mean',
99
100        // Change the header title:
101        header: 'time/op',
102        // Change the header style:
103        // (see https://github.com/alexeyraspopov/picocolors/blob/main/types.ts)
104        headerStyle: ['bold'],
105        // Change the header alignment: (left | center | right)
106        headerAlignment: 'center',
107
108        // Change the row alignment: (left | center | right)
109        rowAlignment: 'right',
110        // Change the row style:
111        // (see https://github.com/alexeyraspopov/picocolors/blob/main/types.ts)
112        rowStyle: ['yellow'],
113    })
114
115    .margin({
116        // Change the header title:
117        header: 'margin',
118        // Change the header style:
119        // (see https://github.com/alexeyraspopov/picocolors/blob/main/types.ts)
120        headerStyle: ['bold'],
121        // Change the header alignment: (left | center | right)
122        headerAlignment: 'center',
123
124        // Change the row alignment: (left | center | right)
125        rowAlignment: 'center',
126        // Change the row style:
127        // (see https://github.com/alexeyraspopov/picocolors/blob/main/types.ts)
128        rowStyle: ['magenta'],
129    })
130
131    .samples({
132        // Display value as-is:
133        method: 'none',
134        // Display all rows in thousands, eg. "10K":
135        method: 'thousands',
136        // Display all rows in millions, eg. "10M":
137        method: 'millions',
138        // Display all rows in billions, eg. "10B"
139        method: 'billions',
140
141        // Choose from the above, favoring the shortest possible option for each row:
142        method: 'shortest',
143        // Chose from the above, based on the highest ops/sec of all benchmarks:
144        method: 'highest',
145        // Chose from the above, based on the lowest ops/sec of all benchmarks:
146        method: 'lowest',
147        // Chose from the above, based on the mean ops/sec of all benchmarks:
148        method: 'mean',
149
150        // Change the header title:
151        header: 'samples',
152        // Change the header style:
153        // (see https://github.com/alexeyraspopov/picocolors/blob/main/types.ts)
154        headerStyle: ['bold'],
155        // Change the header alignment: (left | center | right)
156        headerAlignment: 'center',
157
158        // Change the row alignment: (left | center | right)
159        rowAlignment: 'right',
160        // Change the row style:
161        // (see https://github.com/alexeyraspopov/picocolors/blob/main/types.ts)
162        rowStyle: ['magenta'],
163    })

Adding Custom Columns

[!NOTE] You can also use this to overwrite the default columns!

1import { tinybenchPrinter } from '@monstermann/tinybench-pretty-printer'
2
3tinybenchPrinter
4
5    .column('my-custom-column', {
6        // Return the string that should be displayed in each row:
7        content({
8            task,
9            tasks,
10            fastestTask,
11            slowestTask,
12            locales,
13            formatNumber,
14            formatDuration,
15            formatCount,
16        }) {
17            return String(task.result.hz)
18        },
19
20        // Set the header title:
21        header: 'ops/sec',
22        // Set the header style:
23        // (see https://github.com/alexeyraspopov/picocolors/blob/main/types.ts)
24        headerStyle: ['bold'],
25        // Set the header alignment: (left | center | right)
26        headerAlignment: 'center',
27        // Set the row alignment: (left | center | right)
28        rowAlignment: 'right',
29        // Set the row style:
30        // (see https://github.com/alexeyraspopov/picocolors/blob/main/types.ts)
31        rowStyle: ['blue'],
32    })
33
34    // After you set up your columns, you need to define which columns to display,
35    // in what order:
36    .order(['name', 'summary', 'my-custom-column'])

Rendering Options

1import { tinybenchPrinter } from '@monstermann/tinybench-pretty-printer'
2
3tinybenchPrinter
4
5    // Change the order of the columns and/or drop unwanted ones:
6    .order(['name', 'ops'])
7
8    // Change the sorting method used:
9    .sort(false)
10    .sort('asc')
11    .sort('desc')
12    .sort(tasks => tasks)
13
14    // Change the locales passed to Number.toLocaleString:
15    .locales('en-US')
16
17    // Change the NodeJS.WriteStream that is used to detect the maximum available width:
18    .stdout(process.stdout)
19    // Force a custom max-width:
20    .maxWidth(undefined)
21
22    // Change the padding between columns:
23    .padding(2)
24
25    // Customize which borders should be used:
26    .useHeader(true)
27    .useTopBorder(true)
28    .useBottomBorder(true)
29    .useLeftBorder(true)
30    .useRightBorder(true)
31    .useDividerBorder(true)
32    .useHeaderSeparator(true)
33    .useRowSeparator(false)
34
35    // Change the style of all borders:
36    // (see https://github.com/alexeyraspopov/picocolors/blob/main/types.ts)
37    .borderStyle(['dim'])
38
39    // Customize the borders:
40    .borders({
41        top: '─',
42        topLeft: '┌',
43        topRight: '┐',
44        topDivider: '┬',
45
46        bottom: '─',
47        bottomLeft: '└',
48        bottomRight: '┘',
49        bottomDivider: '┴',
50
51        left: '│',
52        right: '│',
53        divider: '│',
54
55        separator: '─',
56        separatorLeft: '├',
57        separatorRight: '┤',
58        separatorDivider: '┼',
59    })