The WYSIWYG designer of App Studio is a tool provided to assist in developing frontend pages. It provides common webpage components that allow you to create frontend pages by simple drag-and-drop operations. This topic describes the features of the WYSIWYG designer.

Use a compatible framework

The WYSIWYG designer is compatible with React, Angular, and Vue because it uses a common description language to describe the properties such as structures, appearances, and actions of pages at the underlying layer.

Integrate a simple data processing method to meet complex interaction needs

App Studio integrates a global state management solution to manage page data and associate components.

Provide the code mode to build complex interactive pages

The WYSIWYG designer uses the common structured description language domain-specific language (DSL) at the intermediate layer to switch between the visualized drag-and-drop mode and code mode. You can directly edit the code based on DSL. This feature brings the advanced user experience for high-end developers.

Visually configure component association

The WYSIWYG designer allows you to visually link parameters of components to associate them.

Publish and run pages without building

App Studio compiles the intermediate DSL code online into the code that can be directly run in the browser for page rendering.

Connect to DataService Studio of DataWorks and quickly integrate data APIs

App Studio seamlessly connects to DataService Studio APIs of DataWorks, allowing you to debug the APIs in real time.

Provide abundant components and templates

App Studio provides abundant components. You can also customize components and upload them to the component library.

In addition, App Studio provides abundant templates. You can quickly create a page based on a template. You can also save the created page as a template and publish it to the template market for use by others.