To thoroughly test your components on boards, you'll want to see how they look and respond in different window and canvas sizes, and to try different alignments, padding settings, and so on. Codux provides you with the tools you need to render your boards in different configurations.

Thoroughly testing your components means that you'll be able to find and fix the parts of your app that don't quite look or behave as you might have hoped. Not only can you see how your components look in their various configurations, but also how they look inside other components of various configurations (since components commonly contain other components).

Codux gives access to a board's settings through the Board Settings panel on the left side of the screen.

The window size mocks the environment where the app will be used (like a user's web browser). It is what triggers the responsiveness of components. The canvas settings represent the board area on the stage where your components render.

The properties of the canvas provide you with what you need to test the fluid behavior of your components to see how they respond based on the size of their parents, such as the:

Boards contain components or HTML elements that have specific permutations of props, states, and styles for more specific use cases. For example, you can have a button component that has different variants for different colors, sizes, or shapes. When you make changes to a board, the cover image depicting it in the Add Elements panel refreshes automatically.

To hide a board from the panel, toggle the setting in the Board Settings panel.

For information on how this works, see Consuming Board Content from Add Elements Panel.

For information on creating cover images, refer here.

The window size can also be adjusted directly from the top bar in Codux and the sizing handlers on the state.

From the top bar, either enter a custom resolution in the width and height fields (in pixels), or select from the list of predefined device profiles built into Codux.

From the stage, resize the window by grabbing the sizing handlers and dragging them.

Irrespective of the board's environment settings, Codux provides the functionality to view components in their actual layout in an isolated browser tab (where you'll also have access to the developer tools that you're used to). To view the board separately in the default web browser, click on Open in a new window from the menu in the top bar.