Clear and concise description of the problem
As a developer using Histoire I want to configure the default initial value of the responsive size picker (the responsiveWidth / responsiveHeight that seeds the _histoire-sandbox-settings-v3 store on a first visit) so that stories render at their natural width by default, instead of being constrained to the hardcoded 720px breakpoint until the user clicks the picker.
Today the only way to escape the 720px default is to fully disable the picker via defaultStoryProps.responsiveDisabled: true - but that also removes the ability to switch to mobile / tablet / laptop breakpoints on demand. For projects whose primitives are most usefully previewed at their natural in-app width (forms, dialogs, list items), the 720px starting point looks like a bug.
I have a PR ready for this — #842
Suggested solution
Add a defaultPreviewSettings entry in the defineConfig schema so users can set initial values for the persisted preview-settings store:
// histoire.config.js
export default defineConfig({
defaultPreviewSettings: {
responsiveWidth: null, // null → picker shows "Auto"
responsiveHeight: null,
// (other fields: rotate, backgroundColor, checkerboard, textDirection)
}
})
The UI already handles null correctly — StoryResponsivePreview.vue:121 renders responsiveWidth.value ?? 'Auto', and lines 141–145 apply htw-w-fit only when !!finalWidth is truthy, so a null width falls through to the parent's full size.
Implementation passes the configured initial values through to the useStorage defaults in packages/histoire-app/src/app/stores/preview-settings.ts instead of the current hardcoded literal { responsiveWidth: 720, ... }.
Alternative
- Add responsiveDisabled: true to defaultStoryProps — works, but drops the picker entirely. The picker is useful when actually QA-ing a layout at mobile width.
- Custom responsivePresets with a "Full" entry — fails because ResponsivePreset.width is typed number (no null), so an "Auto" preset can't be expressed.
- Pre-seed localStorage in histoire.setup.js — works but is brittle: relies on the private store-key _histoire-sandbox-settings-v3, breaks every time Histoire bumps the store schema version.
Additional context
- Repo file with the hardcoded default: packages/histoire-app/src/app/stores/preview-settings.ts#L7
- Picker UI that already supports null: packages/histoire-app/src/app/components/story/StoryResponsivePreview.vue#L121
- Reference config doc that does not currently document this knob: https://histoire.dev/reference/config
Validations
Clear and concise description of the problem
As a developer using Histoire I want to configure the default initial value of the responsive size picker (the
responsiveWidth/responsiveHeightthat seeds the_histoire-sandbox-settings-v3store on a first visit) so that stories render at their natural width by default, instead of being constrained to the hardcoded 720px breakpoint until the user clicks the picker.Today the only way to escape the 720px default is to fully disable the picker via
defaultStoryProps.responsiveDisabled: true- but that also removes the ability to switch to mobile / tablet / laptop breakpoints on demand. For projects whose primitives are most usefully previewed at their natural in-app width (forms, dialogs, list items), the 720px starting point looks like a bug.I have a PR ready for this — #842
Suggested solution
Add a
defaultPreviewSettingsentry in thedefineConfigschema so users can set initial values for the persistedpreview-settingsstore:The UI already handles null correctly — StoryResponsivePreview.vue:121 renders responsiveWidth.value ?? 'Auto', and lines 141–145 apply htw-w-fit only when !!finalWidth is truthy, so a null width falls through to the parent's full size.
Implementation passes the configured initial values through to the useStorage defaults in packages/histoire-app/src/app/stores/preview-settings.ts instead of the current hardcoded literal { responsiveWidth: 720, ... }.
Alternative
Additional context
Validations