Tinker

Declare which props of a component clients may change. A definition carries a JSON manifest (for building a panel) and a validator (for untrusted input), and mounts the same way in React, Solid, Vue or plain JS.

Definition

// chip.props.ts: written once, shared by every framework
export const chipProps = {
  label: props.Text({ name: 'Label', group: 'Content', defaultValue: 'Chip' }),
  count: props.Number({ name: 'Count', group: 'Content', min: 0, max: 999, decimals: 0 }),
  color: props.Color({ name: 'Color', group: 'Style', defaultValue: '#e4572e' }),
} satisfies PropsConfig<ChipProps>;

// react/Chip.tinker.ts (same shape for solid, vue and vanilla)
export default declareComponent(Chip, { name: 'Chip', props: chipProps });

// anywhere, with any framework's definition
const chip = definition.mount(element, clientValues);
chip.update({ count: 5 });

Playground

One generated inspector drives the same chip in four frameworks.

Validating client input

Whatever a client sends goes through definition.resolve or mount. Only exposed props get through, and values are clamped or replaced.

Manifest

JSON-safe. Store it, send it to a dashboard, validate with it. No component code needed.