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 a bench build of the npm package: a minimal consumer entry that calls createLatticeApp() with the default registry (every built-in component), compiled as a production app build — tree-shaken and minified, exactly like your own Vite build. The package’s peer dependencies (React, React-DOM, Inertia, Echo) are external, because your app ships them whether or not it uses Lattice. What remains is Lattice’s marginal cost: its own code across @lattice-php/core, ui, form, table, and action, plus the third-party dependencies it brings along.

First-party packages are measured separately — each package page (Tree, Media, Map, Calendar, API Reference) carries its own breakdown of what that package adds on top of the framework.

Code splitting

Every component loads eagerly in the entry chunk, except the ones below. Each lazy-loads its heavy dependency from inside the component (React.lazy + dynamic import()), so that dependency loads only when the component renders:

• The rich editor loads TipTap + ProseMirror.
• The code editor loads CodeMirror.
• The chart loads Recharts.
• The date inputs load their zag-js date picker.
• The i18n bootstrap loads i18next only when the backend shares the lattice.i18n prop.

The “Emitted JavaScript files” table below shows this split: the entry chunk and its few static imports are what every visitor downloads; the rest arrives on demand.

Live breakdown

602.6 KB gzipped · 1924.3 KB raw JavaScript

Dependency	Raw	Gzip	Share
@lattice-php/ui	84.0 KB	29.6 KB	4.9%
@lattice-php/form	85.1 KB	29.4 KB	4.9%
@lattice-php/table	45.2 KB	13.0 KB	2.2%
@lattice-php/lattice	16.1 KB	6.2 KB	1.0%
@lattice-php/core	7.8 KB	2.9 KB	0.5%
@lattice-php/action	3.6 KB	1.5 KB	0.3%
CodeMirror	519.4 KB	174.4 KB	28.9%
TipTap + ProseMirror	433.4 KB	135.1 KB	22.4%
recharts	302.3 KB	81.1 KB	13.5%
zag-js date picker	100.4 KB	30.3 KB	5.0%
Radix UI	75.3 KB	23.0 KB	3.8%
i18next	48.2 KB	11.0 KB	1.8%
Everything else	203.4 KB	65.2 KB	10.8%

Emitted JavaScript files

File	Raw	Gzip
code-block-view-DDIVg8XI.js	525.9 KB	177.6 KB
chart-view-BrfsURrz.js	429.1 KB	119.1 KB
entry-DDy_onzC.js	337.8 KB	105.7 KB
dist-CS567SJ9.js	305.1 KB	91.6 KB
rich-editor-view-Bnea5HFR.js	150.7 KB	50.1 KB
date-picker-view-BYp3PqJG.js	106.3 KB	32.3 KB
floating-ui.dom-CAffPQgl.js	49.5 KB	17.1 KB
page-props-DHyjGxlb.js	7.3 KB	3.0 KB
pattern-input-view-Cnl90PHG.js	4.8 KB	2.2 KB
with-selector-DjAcznnj.js	2.7 KB	1.2 KB
locale-ClXLzOKU.js	1.7 KB	0.8 KB
w3c-keyname-BOAvb0qz.js	1.5 KB	0.8 KB
subscriptions-DA7KY9--.js	1.1 KB	0.5 KB
clsx-CjueKrWZ.js	0.4 KB	0.3 KB
notifications-echo-DzPZYw1i.js	0.3 KB	0.3 KB

Open the full interactive treemap ↗ · Generated by Sonda 0.14.0 on Sat, 22 Aug 2026 17:50:34 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 lands in the tens of kilobytes raw — a handful gzipped — and its real cost depends on which components you actually render and your own Tailwind configuration.