User Guide

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.

Controller Panel

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.

Button to Hide Code Mode

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

Normal Mode
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.

Preview Panel

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.