Add Customizable Persistent Screen Sizes for Slice Simulator in slicemachine.config.json

[yacb2]

When testing slices and their variants in the Slice Machine simulator, it can be inconvenient to manually adjust pixel values for custom resolutions repeatedly. While the simulator currently supports breakpoints such as Desktop, Tablet, Mobile, and Custom, there is no way to predefine pixel values or add additional breakpoints that persist across the project. This makes testing multiple screen sizes more time-consuming.

It would be helpful to allow users to define custom screen sizes for the simulator that are persistent within a project. A viable option could be to configure these custom screen sizes directly in the slicemachine.config.json file. For example:

{
  "repositoryName": "repositoryName",
  "adapter": "@slicemachine/adapter-sveltekit",
  "libraries": [
    "./src/lib/slices"
  ],
  "localSliceSimulatorURL": "http://localhost:5199/slice-simulator",
  "simulatorScreens": [
    { "name": "Desktop 2XL", "value": 1536 },
    { "name": "Desktop XL", "value": 1280 },
    { "name": "Desktop LG", "value": 1024 },
    { "name": "Tablet", "value": 768 },
    { "name": "Mobile", "value": 480 }
  ]
}

This configuration would allow developers to define custom screen sizes that appear as options in the simulator, improving testing efficiency and ensuring consistency across the project.

Describe alternatives you've considered

Currently, the only way to test different screen sizes is by manually adjusting the pixel value in the “Custom” option for each session. While functional, this method is not ideal for projects that need consistent testing across multiple breakpoints.

This feature would be particularly useful for teams working with responsive designs, as it would streamline testing for various screen sizes and ensure uniformity. Here’s an example of how the custom screen sizes could appear in the simulator dropdown:
• Desktop 2XL (1536px)
• Desktop XL (1280px)
• Desktop LG (1024px)
• Tablet (768px)
• Mobile (480px)

Thank you so much for considering this suggestion! It would greatly enhance the developer experience and make responsive design testing much smoother. 💙

[benjammartin]

Hey @yacb2,

Thanks for your detailed suggestion!

For now, we haven’t defined a clear direction for the simulator’s evolution, and we’ve decided not to make any changes to it at this time. That being said, we appreciate the feedback and will keep this in mind for future iterations.

Thanks again for taking the time to share your thoughts! 💙