Measured gzipped bundle sizes for four form libraries across two scenarios: a simple login form and
a complex booking form with validation and conditional logic. All measurements are reproducible —
the full test suite is in the FormEngine GitHub
repository.
Libraries tested: FormEngine Core, react-jsonschema-form (RJSF), SurveyJS, Vueform. Note that
Vueform is primarily a Vue.js library — it’s included here because it ships a React-compatible
build, but direct architectural comparisons with React-native libraries have limits.
Last reviewed: April 2026.
Why bundle size matters
Modern web applications face strict performance budgets, particularly when serving users on mobile devices or in regions with limited
network connectivity.
Network impact at a glance
| Additional JavaScript | Slow 3G Impact | 4G Impact | User Experience Impact |
|---|
| +50 KB | ~1.5–1.7 seconds | ~0.15 seconds | Noticeable delay on mobile |
| +100 KB | ~2.6–2.8 seconds | ~0.30 seconds | Significant delay, possible abandonment |
| +300 KB | ~7.0–7.5 seconds | ~0.70 seconds | High abandonment rate |
| +500 KB | ~11–12 seconds | ~1.1 seconds | Critical performance issue |
Testing methodology
All test configurations, build scripts, and raw data are in the GitHub
repository. You
can reproduce any measurement locally.
To ensure comparable results:
Test scenarios
- Login form: Simple form with email and password fields
- Booking form: Complex multi-step form with validation and conditional logic
- Build tool: Vite (default production configuration)
- Optimizations: Minification + gzip enabled
- Tree-shaking: Enabled by default
- UI variations: Tested with default UI, Material UI (MUI), and Mantine (for FormEngine, RJSF, and SurveyJS) where applicable
Equalization approaches
- Duplicate package removal: Eliminated version mismatches
- UI kit equalization: Tested with default UI and UI-library variants (Material UI and Mantine where available)
- Tree-shaking evaluation: Measured effectiveness of dead code elimination
Bundle size results: gzipped comparison
The following tables present gzipped bundle sizes for each library across different scenarios. Gzipped size represents what actually
travels over the network to users’ browsers.
| Library | Default UI Size | With Material UI | With Mantine | Key Insight |
|---|
| Vueform | 141.64 KB | 142.02 KB | — | Smallest baseline, minimal MUI impact |
| RJSF | 176.39 KB | 233.38 KB | 258.70 KB | Mantine adds more overhead than MUI |
| FormEngine Core | 245.15 KB | 189.86 KB | 172.18 KB | Lowest Mantine size among tested React stacks |
| SurveyJS | 426.85 KB | 395.42 KB | 361.00 KB | Large baseline, but lower with Mantine |
| Library | Default UI Size | With Material UI | With Mantine | Key Insight |
|---|
| Vueform | 199.86 KB | 200.03 KB | — | Stable size, integrated UI |
| RJSF | 179.22 KB | 236.31 KB | 285.08 KB | Strong baseline, large growth with UI overlays |
| FormEngine Core | 317.70 KB | 200.56 KB | 245.26 KB | Good MUI result and competitive Mantine result |
| SurveyJS | 428.87 KB | 460.49 KB | 473.09 KB | Highest overall sizes in this scenario |
Architectural analysis: Why results vary
Different libraries adopt distinct architectural approaches that directly impact their bundle size characteristics.
FormEngine’s pluggable architecture replaces its default React Suite components entirely when you
switch to Material UI or Mantine. The default UI ships zero bytes when unused, which is why the MUI
and Mantine numbers are lower than the “Default UI” column — you’re swapping one complete UI layer
for another, not adding to it.
This makes FormEngine smaller on MUI/Mantine stacks than its default-UI baseline suggests. Teams
already using Material UI or Mantine across their app will likely see the 189–200 KB range rather
than the 245–317 KB range.
Mantine UI integration
FormEngine also provides a dedicated Mantine view package in @react-form-builder/components-mantine (see src/packages/views/mantine).
You can replace the default React Suite UI with Mantine components in the same way as with Material UI:
- Drop-in Mantine support: Use Mantine-based inputs, containers, and layouts while keeping FormEngine’s data model and validation.
- Same modular behavior: React Suite components are removed from the bundle when you switch to Mantine.
- Bundle-size friendly: Mantine integration benefits from the same tree-shaking and “only pay for what you use” model as the MUI view.
This is especially useful if your application already uses Mantine for the rest of its UI and you want a consistent visual language without
duplicating component libraries.
Vueform delivers the smallest baseline through tight integration:
- Monolithic architecture: UI, validation, and rendering are coupled
- Stable size: Consistent across UI variations
- Suitable for: Standalone applications with strict size budgets
RJSF offers predictable bundle growth:
- Small core runtime: Lightweight foundation
- Linear scaling: Bundle size grows with feature usage
- MUI overhead: Adds 21-32% to bundle size
SurveyJS: Feature-rich foundation
SurveyJS prioritizes features over size:
- Large baseline: Substantial runtime even for simple forms
- Framework-agnostic: Flexibility comes at a size cost
- Inconsistent optimization: MUI impact varies by scenario
- Best for: Survey-focused applications needing extensive features
Reading these numbers
If you’re already on Material UI or Mantine: FormEngine Core’s 189–200 KB range is competitive.
The default-UI column (245–317 KB) isn’t the relevant number — you’d be replacing React Suite with
your existing UI library.
If you’re starting from scratch with no UI library: Vueform delivers the smallest baseline. Keep
in mind it’s primarily a Vue library — weigh that against React ecosystem fit.
If you need a small, predictable core: RJSF has a lean foundation that scales linearly. The MUI
column grows more than FormEngine because RJSF adds MUI on top of its own renderer rather than
replacing it.
If you need survey-specific features: SurveyJS has the largest footprint in every scenario
tested. Its feature breadth justifies the size for survey-heavy use cases but is hard to justify for
general form rendering.
Reproduce the measurements
All measurements were taken with Vite’s default production build (minify + gzip + tree-shaking). To run your own:
git clone https://github.com/optimajet/formengine
cd community/examples/bundle-size
npm install
npm run build:all
Full report
The complete report with JSON datasets and charts is available in the source materials:
Next steps
Last modified on April 16, 2026
