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
Section titled “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
Section titled “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 chart loads Recharts.
- The date inputs load their zag-js date picker.
Live breakdown
Section titled “Live breakdown”760.6 KB gzipped · 2417.0 KB raw JavaScript
| Dependency | Raw | Gzip | Share |
|---|---|---|---|
| Lattice code | 337.8 KB | 117.0 KB | 15.4% |
| TipTap + ProseMirror | 423.2 KB | 123.4 KB | 16.2% |
| recharts | 305.7 KB | 81.7 KB | 10.7% |
| React / React-DOM | 185.8 KB | 51.7 KB | 6.8% |
| @codemirror/view | 153.2 KB | 47.4 KB | 6.2% |
| Inertia | 95.3 KB | 35.2 KB | 4.6% |
| @lezer/javascript | 75.9 KB | 29.2 KB | 3.8% |
| @lezer/php | 94.2 KB | 26.4 KB | 3.5% |
| Radix UI | 75.3 KB | 24.8 KB | 3.3% |
| pusher-js | 55.5 KB | 18.1 KB | 2.4% |
| i18next | 48.1 KB | 15.2 KB | 2.0% |
| @codemirror/state | 45.0 KB | 14.1 KB | 1.9% |
| Everything else | 521.9 KB | 176.4 KB | 23.2% |
Emitted JavaScript files
| File | Raw | Gzip |
|---|---|---|
app-CsfqOCVi.js | 590.9 KB | 177.3 KB |
code-block-view-C_CoW-fx.js | 526.0 KB | 177.6 KB |
chart-view-CiUi4Moc.js | 423.8 KB | 116.4 KB |
dist-DHG3I5r9.js | 284.0 KB | 88.8 KB |
rich-editor-field-DkQfsrnq.js | 148.8 KB | 49.5 KB |
date-picker-field-CuG1WeCk.js | 89.9 KB | 27.4 KB |
ApiReference-DUq91DEC.js | 58.0 KB | 16.6 KB |
instance-CfLoZ246.js | 43.0 KB | 13.6 KB |
label-BVMtjzSP.js | 31.2 KB | 10.9 KB |
sprite-CS_fyl_X.js | 28.0 KB | 9.0 KB |
esm-CJdDFbav.js | 20.5 KB | 6.3 KB |
CalendarDate-CPu9C4hq.js | 19.0 KB | 6.4 KB |
floating-ui.dom-B0ujvShr.js | 18.0 KB | 7.1 KB |
tree-Bsh310ue.js | 16.4 KB | 6.1 KB |
timeline-XL3wFw7A.js | 16.3 KB | 5.4 KB |
field-D9zW6Ewd.js | 14.1 KB | 5.3 KB |
library-view-7049NaBY.js | 12.5 KB | 4.5 KB |
debounce-CBXrtDuZ.js | 9.8 KB | 3.4 KB |
code-block-BH5pWbYo.js | 9.3 KB | 3.8 KB |
react-SIfiwpqq.js | 8.0 KB | 3.1 KB |
page-props-ByxWZRFT.js | 7.4 KB | 3.0 KB |
use-dependent-field-sthlLdHK.js | 7.3 KB | 2.9 KB |
field-BiNjGyFZ.js | 5.2 KB | 2.2 KB |
button-DwrlQJll.js | 4.5 KB | 1.2 KB |
react-dom-prtvU8oi.js | 3.5 KB | 1.3 KB |
dist-Dvl7tuJV.js | 3.5 KB | 1.5 KB |
media-picker-Cu03FMjr.js | 3.1 KB | 1.4 KB |
timezone-DL1s6QpV.js | 2.2 KB | 1.1 KB |
use-effect-dispatcher-DJSxcI8N.js | 1.5 KB | 0.8 KB |
icon-button-wXsPmbUA.js | 1.4 KB | 0.7 KB |
dist-zUQp6X2f.js | 1.4 KB | 0.7 KB |
input-D2kupwXl.js | 1.2 KB | 0.6 KB |
subscriptions-Bk2sA_9W.js | 1.2 KB | 0.6 KB |
media-image-dialog-D53wXa67.js | 0.8 KB | 0.5 KB |
use-debounced-callback-BKUOyRnT.js | 0.8 KB | 0.5 KB |
signature-lidkiDWc.js | 0.8 KB | 0.4 KB |
color-CXV-Y5Qv.js | 0.7 KB | 0.4 KB |
materialize-CWqnSEHR.js | 0.6 KB | 0.4 KB |
jsx-runtime-0vZSBttN.js | 0.5 KB | 0.3 KB |
clsx-CjueKrWZ.js | 0.4 KB | 0.3 KB |
EchoStatus-CXr3cdbn.js | 0.3 KB | 0.3 KB |
notifications-echo-CpDc6AIR.js | 0.3 KB | 0.2 KB |
registry-context-B7Xx0uWy.js | 0.3 KB | 0.2 KB |
format-context-BBqvsEPr.js | 0.3 KB | 0.2 KB |
test-id-DkJ41bb8.js | 0.3 KB | 0.2 KB |
library-B3Or4B9k.js | 0.2 KB | 0.2 KB |
Stylesheet
Section titled “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.