Skip to main content
S
1d ago

Exposed State Machine Inputs Work in Rive Editor but Are Empty in Runtime (SvelteKit)

Hi everyone,

I’m using SvelteKit and working with a Rive file where a child artboard (Mouth) has a state machine (LipSync_StateMachine) exposed to the parent artboard (Character).

In the Rive editor everything works perfectly. However, at runtime, when I try to access the state machine inputs from the parent artboard, the inputs array is empty.

If I access the child artboard directly, the inputs work fine, but they aren’t accessible through the parent artboard.

What I’ve Tried:

  1. Verified artboard and state machine names match the Rive file.

  2. Logged all artboards and state machines.

  3. Confirmed that the state machine is properly exposed in Rive.

Issue:
State machine inputs work in the child artboard but not in the parent, even though they’re exposed.

Has anyone experienced this issue or knows how to fix it?

Thanks in advance for your help! 🙏

2 replies
S
20h ago

Hi ! Make sure you are exporting the Nested Artboard layer by right clicking it and selecting "Export name". It should display brackets around its name, like [this]. That means that name has been exported to runtime and you should be able to access your nested inputs. Let me know if that works!

S
7h ago

Thank you so much for your reply,

I didn’t know that I had to export the nested artboard layer but I’ve done that now and the "Mouth" layer is correctly displayed inside brackets.

But I’m still facing the issue.

Here’s a partial snippet of my code:

When I access the child artboard directly, everything works fine, and all the inputs are displayed in the console log. But when I try to access the inputs from the parent artboard, the inputs array is empty.

Any idea why this might be happening? Thanks in advance for your help!

	onMount(() => {
		const canvas = document.getElementById('lipSyncCanvas');
		audio = document.getElementById('testAudio');

		riveInstance = new Rive({
			src: '/rive/lip-syncing.riv',
			canvas: canvas,
			autoplay: true,
			artboard: 'Character', // Parent artboard
			stateMachines: 'State Machine 1', // Main state machine in parent
			onLoad: () => {
				console.log('Rive file loaded successfully!');

				// Access state machine inputs
				const stateMachine = riveInstance.stateMachineInputs('State Machine 1');
				if (!stateMachine) {
					console.error('State machine not found!');
					return;
				}
				stateMachineInputs = stateMachine;
				console.log('State machine inputs loaded:', stateMachineInputs);

				// Log all triggers for verification
				stateMachineInputs.forEach((input, index) => {
					console.log(`Input ${index}: ${input.runtimeInput?.name || 'Unnamed Input'}`);
				});
			}
		});