DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Diagram - Adaptability

The Diagram can adapt its layout to narrow screens. In this demo, the component's Height property is set to 100% to fit a screen.

Note the following changes to the toolbox and properties panel:

  • The toolbox is docked to the left component border.
  • The properties panel is docked to the bottom component border.
  • A tool slides out of the screen when a user drags a shape from the toolbox or edits an item's text.
  • Only one tool can be displayed at a time.

You can switch between landscape and portrait layouts to see the Diagram's appearance and behavior on wide and narrow screens.

To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API