Bundle size

Lattice is server-driven, but it still ships a React runtime that renders the component tree in the browser. This page explains what that costs and how the bundle is split — and the breakdown at the bottom is live, regenerated by Sonda on every docs build, so it always reflects the current main.

What is measured

The numbers come from the workbench app build (vite build) — a realistic app that exercises every Lattice feature — not the published package. The npm package itself ships unminified ES modules with React, Inertia, Radix, and TipTap externalized; your app’s bundler tree-shakes and minifies them, so the app build is the honest measure of what a user downloads.

Code splitting

Lattice lazy-loads its heavy pieces with React.lazy + dynamic import() at the registry boundaries, so a page only pays for what it actually renders:

• The rich editor (TipTap + ProseMirror — by far the largest dependency) loads only when a RichEditor field is rendered.
• The table renderer and the form field components load on demand as well.

Everything else — the renderer, registry, layout shell, toasts, and core components — sits in the eager entry chunk that every page loads.

If you prefer a single eager Lattice component graph, pass the eager registry when bootstrapping the app:

import { createLatticeApp } from "@lattice-php/lattice";
import { eagerRegistry } from "@lattice-php/lattice/registry/eager";

createLatticeApp({
  registry: eagerRegistry,
});

The default registry export remains lazy. Use the eager registry when your deployment favors fewer runtime chunk requests over a smaller initial component bundle.

Note

React, React-DOM, and Inertia are peer dependencies: your app already ships them, so they are not Lattice’s marginal cost even though they show up in the entry chunk below.

Live breakdown

370.4 KB gzipped · 1243.7 KB raw JavaScript

Dependency	Raw	Gzip	Share
Lattice code	168.2 KB	53.0 KB	14.3%
TipTap + ProseMirror	442.7 KB	136.5 KB	36.9%
recharts	253.4 KB	68.9 KB	18.6%
pusher-js	55.3 KB	16.4 KB	4.4%
Radix UI	41.2 KB	10.9 KB	3.0%
@zag-js/date-picker	39.9 KB	8.4 KB	2.3%
@internationalized/date	19.2 KB	5.6 KB	1.5%
immer	17.0 KB	5.3 KB	1.4%
d3-scale	14.6 KB	4.4 KB	1.2%
d3-shape	13.4 KB	4.1 KB	1.1%
@reduxjs/toolkit	10.7 KB	3.5 KB	0.9%
decimal.js-light	12.6 KB	3.3 KB	0.9%
Everything else	155.4 KB	49.9 KB	13.5%

Emitted JavaScript files

File	Raw	Gzip
rich-editor-DboNZjRt.js	463.7 KB	142.4 KB
chart-CgmcHqmt.js	375.4 KB	106.6 KB
app-Dkucv0zk.js	209.2 KB	62.4 KB
date-picker-control-C_dWeF6B.js	105.8 KB	32.1 KB
components-JPflzCU_.js	44.8 KB	14.0 KB
table-BUG3PiZH.js	42.7 KB	11.5 KB
subscriptions-BAg1Cxk6.js	1.2 KB	0.6 KB
EchoStatus-ChEXTaHN.js	0.3 KB	0.2 KB
signature-DN-vReaI.js	0.3 KB	0.3 KB
notifications-echo-DJCVGpP2.js	0.3 KB	0.2 KB

Open the full interactive treemap ↗ · Generated by Sonda 0.13.0 on Tue, 07 Jul 2026 09:46:10 GMT.

Stylesheet

The breakdown above is JavaScript only. Lattice also ships a stylesheet you import into your Tailwind entry with @import "@lattice-php/lattice/css". The source file is small — theme tokens plus a few component styles — but it carries an @source directive, so your own Tailwind build scans Lattice’s components and generates the utility classes they use. The compiled CSS Lattice contributes to the workbench app (the same build measured above, exercising every feature) lands in the tens of kilobytes raw — a handful gzipped — and like the JS its real cost depends on which components you actually render and your own Tailwind configuration.