Benchmarks

How Attaform holds up across the Vue form-library field on the same demanding forms, measured in a real browser. Bundle size, supply-chain health, and per-scenario runtime, with every number traced to the run that produced it.

Category

Comparison

Method

Playwright, real Chromium

Provenance

committed results.json

This page is an honest scoreboard. The numbers come from apps/bench-arena, a self-contained harness that drives every library through identical scenarios in real Chromium via Playwright, then writes one provenance-stamped results.json that this page renders directly. Nothing is hand-entered. Where Attaform leads, the run says so; where it pays a cost, the run says that too. Both ship from the same green run.

How to read this

A fair cross-library comparison has to account for the fact that these libraries do different amounts of work. The harness handles that with a few rules:

• Layers are the fairness axis. Form-state libraries (Attaform among them) own reactive values, validation, and input binding. Validation-only libraries own validation against state you wire yourself. A batteries-included library renders its own inputs. Each row is labeled with its layer, so a validation-only engine mounting faster than a full form-state library is read as owning less, not as winning.
• The DOM is held constant. Every headless library drives the same bare <input> markup over the same field count and the same schema, so a runtime number reflects the library's own machinery, not its choice of components.
• Every library runs in its fastest idiomatic configuration. Debounces are neutralized, validation triggers are normalized, and array and union primitives use each library's native fast path. Attaform is measured on its shipping configuration, never a relaxed setting.
• Real builds, pinned validators. Attaform is consumed as its published dist, the same artifact an installer gets, minified and code-split in the same build as every other library. Zod v3 is pinned across the Zod-capable cohort, with one deliberate exception below.
• Two libraries run more than one row. Attaform appears twice in the runtime and capability tables, as Attaform (Zod 3) through attaform/zod-v3 and Attaform (Zod 4) through attaform/zod-v4. The two adapters are first-class peers, so the arena measures both rather than picking a favourite, and the rows are identical in every respect but the validator. Regle appears twice for the same reason, Regle (schema) over Zod and Regle (rules) over its own validators. The bundle table carries one Attaform row, built on the pinned Zod v3.
• Numbers normalize two ways. A ratio compares each library to Attaform at the same size. A slope compares a library to itself at the scenario's smallest size, so the shape of growth survives a change of machine.

The harness, every adapter, and the scenario generators live in apps/bench-arena. Found a fairer configuration for a library? The adapters are small and the README invites a pull request.

What it costs to adopt

Before any runtime number, three figures decide whether a library is worth reaching for: what it can express, what it adds to your bundle, and how its supply chain scores.

Capability coverage

What each library expresses as a first-class primitive versus composes by hand. A gap here becomes honest expressiveness data, never a rigged timing loss: a shape a library cannot express idiomatically is left out of its runtime rows rather than forced into a slow number.

Bundle size

Attaform is the heaviest in the cohort, and the heaviest in its own layer. That is the cost of shipping reactive form state, deep schema binding, and the whole display-state model in one zero-dependency package, and it is the honest price of admission. The figure is what a code-split build executes before the form is interactive; opt-in layers like the v-register directive, undo and redo, and the multi-step wizard live behind separate imports this minimal form never pays for.

The table groups by layer for the reason the fairness rule above gives: a validation-only engine is not a cheaper version of a form-state library, so the two should not be read as a single ranking. Each row also carries the one line the arena can derive about what that library is for, from its adapter's own declared design point. And the Zod rows share a floor, quoted under the table: building nothing but the two-field schema and the parse call every Zod adapter makes already costs most of a small library, so that much of each of those figures is identical bytes before any form library. That figure is measured by the same build as the rows rather than written here, so it cannot drift away from the chart it explains.

Supply-chain health

The OpenSSF Scorecard rates a project's adoption of supply-chain practices: branch protection, signed releases, pinned dependencies, CI hardening, and more. For a form library headed into an audited setting, that posture is part of the cost of adoption, so the benchmark stamps each project's current score alongside the size and runtime figures.

Typing into a form

Keystroke latency

The headline interaction. A keystroke runs the value write, validation, and the re-render it triggers. On a flat form Attaform clears a 60 fps frame budget with room to spare.

At five thousand fields the picture tightens. The harness reports where Attaform lands plainly, and it is a scenario worth a future look.

Re-render scope

Editing one cell of a large grid should re-render one field, not the form. Configured optimally, the modern headless cohort all reaches that bound, and there is no lower number to beat.

Standing up a form

Mounting a large form

Building a two-thousand-field form from scratch is where the form-state libraries separate. Attaform mounts the whole reactive tree, validation wiring included, every value and validation path live before the first paint.

Memory

Retained heap after mount, the library's reactive and validation state at scenario size. Churn is the per-cycle allocation pressure, and leak is the residual across mount and teardown cycles. The sparkline traces retained heap across the measured cycles.

Working the harder shapes

Validation throughput

A full-form validation pass over a massive form, the cost of a submit on the largest shape in the suite.

Discriminated unions

Writing into and flipping between variants of a discriminated union. Attaform walks only the active branch, so a variant flip touches the branch in play rather than every alternative.

Dynamic arrays

Appending and reordering rows in a growing list. Attaform's array helpers copy the target array before mutating, which keeps reads fast and identity stable but shows up as real cost on a reorder at a hundred rows. It is an honest line on the board.

Multi-step wizard

Most of the cohort has no wizard primitive and composes a multi-step flow by hand, so this is an expressiveness comparison as much as a timing one. Where a comparable step transition exists, here is its cost; Attaform's useWizard ships the flow as a first-class shape.

Caveats

The methodology is only as good as what it admits.

• FormKit owns its inputs. It cannot drive the shared bare field, so its re-render figure is a DOM-mutation proxy, marked in the tables, and its mount and memory figures include its own component tree. It is labeled batteries-included throughout and never placed silently beside bare-input libraries.
• Heap is Chromium-quantized. usedJSHeapSize reports rounded magnitudes, not byte-exact values, so memory figures show whole kilobytes and the slope across sizes carries more signal than any single number.
• Every cell shares one time budget. Each measured cell gets the same per-cell ceiling on the CI runner, identical for every library. A cell that cannot settle to a stable median inside it (a single mount of thousands of fields, or a full-form validation at the largest sizes on the heaviest libraries) is recorded as "did not finish" rather than dropped or estimated. The ceiling is uniform across the cohort, so it marks where a shape outgrows one measurement window, never a verdict on a library.
• Bundle is the initial load, with any deferred part beside it. The build code-splits the way a real bundler does. A row's figure is the entry chunk plus every chunk it reaches through static imports, minified and gzipped, with the validator weighed in. Anything reached only through a dynamic import is weighed separately and shown beside the figure as deferred, so a row with no deferred badge loads in one chunk. Vue is external, since every app ships it once.
• The shared-validator floor is a floor, not a subtraction. The figure quoted under the bundle table is the schema and parse call every Zod row has in common. An adapter that reaches further into Zod (async parsing, issue introspection) pulls a little more than that; none pulls less. So it is the right figure for "how much of this is not the form library at all" and the wrong one for backing out an exact library-only size per row.
• An absent score has two distinct meanings. "Not published" means a project has not opted into a Scorecard, which is a choice and not a deficiency. "Unavailable" means the lookup did not complete on that run, a network gap on our side and never a statement about the project. The viewer linked on each row shows the live result either way, and scores are point-in-time.
• Local versus CI. The committed numbers come from CI rather than a developer machine, but CI is not one fixed machine. The sweep shards across runners and takes whatever hardware the host assigns that day, so a row's absolute milliseconds can move between refreshes with no code change behind it. Every row within a single table is measured on one runner, which is what keeps the comparison inside a table honest, and the ratio and slope are the figures built to survive a refresh. A figure stamped "local run" is illustrative shape data from a developer machine, superseded the next time CI refreshes the page.

Reproduce it yourself

The harness is meant to be run by hand. Clone the repo, build Attaform's real dist with pnpm prepack, then from apps/bench-arena install the browser and run the arena. The full instructions live in the bench-arena README. Every adapter mounts by query parameter, so you can also open a single library and scenario in a browser and watch it work.

Where to next

• Performance: Attaform's own hot-path numbers, measured against a per-PR regression gate.
• How values are stored: the slim write shape behind the keystroke and validation figures.
• Field-array mutations: the array-helper characteristics behind the dynamic-array rows.