The core of our service’s usability lies in its intuitive and simple design. We’ve created an interface that allows you to manage everything on a single screen, without the need for multiple steps or transitions. From configuring settings in the Controller, to viewing real-time changes in the Preview, and generating the implementation code in the Code section, every action happens seamlessly in one place. This layout ensures a smooth, efficient experience, letting you focus on building your slider or carousel without interruptions.
Controller
The Controller section is where you manage the key settings of your UI component, allowing you to customize how it looks and behaves. Here, you can directly input values, click buttons, or adjust sliders and gauges to fine-tune various aspects of the component.

We understand that the three-panel layout may feel a bit overwhelming with numerous settings packed closely together. To address this, we’ve prepared a mode that temporarily hides the Code section, allowing you to focus solely on the Settings and Preview sections. This makes it easier to configure your component without any distractions.
Hide Code Mode
You can click the button in the upper right corner of the controller section.

Let’s compare the differences between normal mode and hide code mode.



Preview
The Preview section shows real-time updates based on the settings you adjust in the Controller. You can easily switch between different device sizes (mobile, tablet, laptop, and desktop) to check how your design responds to various screen resolutions. Additionally, you can enter full-screen mode to get a detailed view of your design.

Device-Specific Preview Options
You can easily switch between predefined screen sizes, including
375×812 for mobile
768×1024 for tablets
1280×800 for laptops
1920×1024 for desktops
This ensures that your design looks great on different devices, providing a responsive and versatile user experience.

Full-Screen Mode
In Full-Screen Mode, the Preview expands to cover the entire screen, excluding the controller and code sections. This allows you to see your design in a more immersive and detailed way, helping you better understand how it will appear to users without the distraction of other interface elements. It’s especially useful for getting a clear sense of the overall layout and responsiveness across different device sizes.


