Fit.Layout doesn't reflow elements in canvas-lite

[david-corb-hh]

---

Title:
Fit.Layout doesn't reflow layout-constrained elements in canvas-lite — elements render at top-left instead of
anchored position

---

Description:

When using @rive-app/react-canvas-lite with Fit.Layout, elements that use Rive Layout constraints (e.g.
pinned to bottom-left) are not reflowed correctly. They render at the top-left of the canvas instead of their
anchored position. The exact same .riv file works correctly with @rive-app/react-canvas (full runtime).

Environment:

  - @rive-app/canvas-lite: 2.35.0 (also reproduced on 2.34.3)
  - @rive-app/react-canvas-lite: 4.27.0
  - Works correctly with: @rive-app/react-canvas@4.26.2 + @rive-app/canvas@2.34.2
  - Browser: Chrome / Safari on macOS

Artboard info (from rive.bounds and rive.layout?.layoutScaleFactor):

  layoutScaleFactor: 1
  bounds: { minX: 0, minY: 0, maxX: 1512, maxY: 798 }

Canvas at runtime: correctly fills the viewport. The canvas
sizing itself is fine — the bug is purely the position of elements within the canvas.

Code:

  const { rive, RiveComponent } = useRive({
    src: animationUrl,
    stateMachines: 'Training Machine',
    layout: new Layout({ fit: Fit.Layout }),
  });

  return (
    <div style={{ position: 'fixed', inset: 0 }}>
      <RiveComponent />
    </div>
  );

Expected: elements pinned to bottom-left via Rive Layout constraints render at the bottom-left of the canvas
(as they do with react-canvas).

Actual: elements render at the top-left of the canvas regardless of their layout constraints.

[david-corb-hh]

Reading the documentation:

lite variants remove some features (for example, text, layout, audio, and scripting engines)
source​

We can't justify for our mobile web users to download almost 2Mb Wasm file to run a simple responsive animation, is there any chance to include the layout package in lite ? Or alternative?

WebGL package seems even bigger (reading the documentation)

I found this blog post from 2022
https://pixelpoint.io/blog/rive-react-optimizations/
I copy and paste:

This WASM module is not small and has a size of 78KB.

What has happened between 2022 and 2026 to increase so much?

Any advices? Exporting SVG maybe?

[zplata]

Hey @david-corb-hh - the main thing that changed since that article (and why we have a lite vs non-lite version of the react/js libs) is that those features you discovered in docs - text, layout, audio, and scripting, are all powered by various core dependencies under the hood in the underlying WASM builds. We don't have a way of modularly bringing in the dependency to power just the layout engine yet, but something that's been given some thought in the past. Let's keep this issue open though if we revisit that.

Using the @rive-app/react-canvas dependency would be the best solution at the moment if the Rive file is using Layout constraints.

[david-corb-hh]

I switched to webgl package, that doesn't require wasm (This should be in big letters in the documentation). I discovered this luckily trying something else!

UPDATE: It does require the WASM, it's just that I commented out the lines of self-hosted wasm file, and it was loading it under-the-hood via 3rd party unpkg