From Studio to your app

The Studio lets you tune a visual live: pick a pattern, drag its props, add materials, set up your app's states and bindings, and preview it at every size in light and dark. When it looks right, take it to your app in one of two ways.

Code

Export code gives you the component with only the props you changed, for each platform. Paste it into your view. This is best when the visual is fixed in your app and developers own it.

import { SinuaView } from "@sinua/web/react";

export function Visual() {
  return <SinuaView pattern="working" overrides={{ glowRadius: 3, glowStrength: 0.6 }} style={{ width: 160, height: 160 }} />;
}

// Or use the file: Spec menu → orb-working.fxspec.json (File tab).

Each one is the real export for the same design — an orb's working pattern with the glow material turned up — so the three read as one visual, not three examples.

File

Export file gives you an FX Spec, a .fxspec.json file with the whole design, including states and bindings. Load it into the component's spec prop. This is best when designers iterate on the look without code changes, or when you ship the design from a server.

The same file opens back in the Studio, so a design can round-trip between design and code.

Which one?