Skip to content
Merged
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,12 @@ Do not turn images into components. Unlike components, images aren't reused as r

![diagram comparing an image wrapped as a component versus an image applied as a frame fill](./assets/img/images-as-fills-diagram.svg)

## Charts

Design to Code does not support charts yet. Any chart in your design is converted to an image in the generated code.

Because of this, treat charts as images during annotation review. If a chart has not been annotated as **Image**, change it to Image yourself. A chart that comes through as a clean image is easier to replace with a real chart bound to real data using the WaveMaker AI Assistant once the project has been created.

## Color Management

WaveMaker Design to Code strictly follows the designer's intent, and this principle extends directly to how colors are handled in the generated code. If a designer defines a color as a local variable and applies it consistently across the design, particularly within components, that variable is preserved and translated into a corresponding CSS variable in the final code.
Expand Down Expand Up @@ -76,3 +82,11 @@ When a section contains repeatable or related elements, group them under a meani
This isn't strictly necessary, and the plugin can often still generate usable code without it. But semantic grouping goes a long way toward improving code quality, since it helps the plugin correctly infer the relationship between elements and generate more accurate, better-structured components. It's a small extra step in the design phase that can save significant time during development.

![diagram comparing loose sibling rows versus rows grouped under a meaningfully named parent frame](./assets/img/semantic-grouping-diagram.svg)

## Optional Features

The plugin settings include two features that are off by default: **Wizards** and **Data Table**. While they are off, a wizard comes through as plain frames and a data table comes through as a list. Switch them on and the plugin builds the real WaveMaker widget instead.

They start off because wizards and tables are among the trickier things to design for. Every designer builds them a little differently, and WaveMaker has its own expectations about how the pieces fit together — which layer is a step, which row is the header, which cell sits where. Whether the generated widget turns out well comes down to those annotations being right, and you are in a far better position to judge that than the plugin is. So for now this one is left to you.

Turn them on if you already know how WaveMaker structures these widgets and you go through every annotation, not just the ones marked **Needs review**. If you would rather stick to the flagged ones, leave them off for now — you lose nothing, and you can always come back to this later. The [Data table](./annotation-glossary#data-table-web) entry in the annotation glossary is a good place to see what the plugin expects.
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,28 @@ WaveMaker announces the release of WaveMaker AI 1.0.0 Beta. This release is inte

For details about the technology stack upgrades, refer to [Technology Stack](/tech-stack).

## 1.0.0-BETA-RC9

*Release date: 10 August 2026*

<TabsWrapper>
<TabItem name="Features">
<Accordian title="Platform" />
</TabItem>

<TabItem name="Enhancements">
<Accordian title="Platform" />
</TabItem>

<TabItem name="Bug Fixes">
<Accordian title="User Interface" />

<Accordian title="Backend" />

<Accordian title="Platform" />
</TabItem>
</TabsWrapper>

## 1.0.0-BETA-RC8

*Release date: 03 August 2026*
Expand All @@ -27,7 +49,11 @@ For details about the technology stack upgrades, refer to [Technology Stack](/te
</TabItem>

<TabItem name="Bug Fixes">
<Accordian title="User Interface" />
<Accordian title="User Interface">
- ### Hover line overlapping properties panel <Pill type="web" />

Fixed the hover indicator line overlapping the properties panel while hovering over a canvas component whose content is wider than the canvas.
</Accordian>

<Accordian title="Backend" />

Expand Down Expand Up @@ -101,6 +127,12 @@ For details about the technology stack upgrades, refer to [Technology Stack](/te
Auto Layout now supports `width=fill` and `height=fill` in addition to fixed values like px and %, letting a component occupy the available space within its parent container instead of sizing to content (`hug`).

This Fill sizing, previously available only for containers, is now supported for all components placed inside Auto Layout containers, making it easier to build responsive, flexible layouts. Currently available in Angular.

- ### Charts widget migrated to ECharts <Pill type="mobile" />

The Area, Bar, Column, Line, Bubble, Pie, and Donut chart types on mobile now render using [ECharts](https://github.com/wavemaker/wm-react-native-echarts) instead of Victory Native.

As a result, these charts render with smoother animations, richer tooltips, and a more polished look and feel with the existing markup.
</Accordian>

<Accordian title="Platform">
Expand Down