JSX.Design
  • Introduction
    • Why JSX.Design?
    • Minimum Requirements
  • Getting Started
    • Building your first React UI
    • Making your UI responsive
    • Exporting your code
  • Styling UI
    • Basic styling
    • Creating reusable components
    • Conditional rendering with view states
    • Creating & using Props
    • Mapping an array
  • Advanced Features
    • Bring custom code or other React libraries
    • Ejecting a custom component
  • Troubleshooting
    • Handling Global CSS warning
    • Syncing project versions between JSX.Design and IDE
    • Handling export conflicts for unsaved projects
Powered by GitBook
On this page
  1. Getting Started

Making your UI responsive

Responsive design allows you to create layouts that adapt to various screen sizes, from mobile phones to large monitors. JSX.Design makes it simple to design responsive UIs directly in the editor with breakpoint-specific customization.

How to design a responsive canvas in JSX.Design

  • The device toolbar is located at the top of the editor. It allows you to choose from:

    • Auto

    • Mobile (for smaller screen devices)

    • Tablet (for medium-sized screens)

    • Monitors (for standard desktop monitors)

    • Large Monitors (for larger screen sizes)

  • Once switched to a breakpoint (e.g., mobile or tablet), any changes made will affect only that screen size. For example, you may want to reduce the padding or resize text when the design is viewed on mobile devices.

  • Use the toolbar to easily navigate and customize your design for different screen sizes.

Changes done in Auto mode will affect across all breakpoints.

Next Steps:

Brilliant! Now let's export your canvas to your React project:

PreviousBuilding your first React UINextExporting your code

Last updated 3 months ago