Skip to main content

Try the Low-Code Engine Demo

Access URL​

You can open the Low-Code Engine Demo via this permanent link:

Designer demo

We update the demo often, so the link above always points to the latest version.

Low-Code Engine Demo feature overview​

In the Demo project you will see many regions on the page:

image.png

It mainly includes these capabilities:

image.png

Top: actions​

  • Right side: undo and redo, save to local, reset page, preview, load resources asynchronously

Left: panels and actions​

  • Outline panel: adjust the component tree structure on the page
  • Materials panel: find components and drag them onto the editor canvas
  • Source panel: edit page-level JavaScript and CSS
  • Submit Issue: report bugs to the engine team
  • Schema editor: edit the page's underlying data
  • Language switch: switch the editor language

Center: visual page editing canvas​

  • Click a component to show its property options in the right panel
  • Drag to change component order
  • Drag components into container-type components
  • Copy a component: click the copy button at the top-right of the component
  • Delete a component: click the X at the top-right of the component, or press Delete

Right: component-level configuration​

  • Selected component: the path from the page down to the current selection; click a name to switch to that component
  • Selected component settings: category tabs for the current component; depending on type, they may include:
    • Props: basic property values
    • Style: style configuration
    • Events: bind events exposed by the component
    • Advanced: loop, conditional rendering, and key settings

Using the Low-Code Engine Demo in depth​

The Low-Code Engine Demo ships with built-in product usage docs that guide common scenarios. The entry is here:

image.png

If you do not see the product usage docs yet, open this permanent link: /lowcode-engine/docs/demoUsage/intro