Autogenerated props

Preview.js lets you specify what properties to pass to your component.

Whenever possible, suitable props will be automatically generated based on detected types.

For example, say that you have the following component in React:

export const Button = (props: { label: string; disabled: boolean }) => {
  return <button disabled={props.disabled}>{props.label}</button>;
};

The following props will automatically be generated by Preview.js:

properties = {
  label: "label",
  disabled: false,
};

This also works for Vue components, including the newer <script setup> syntax used in Vue 3.

See it in action