Hi everyone 
Today, we released an update that greatly improves the code generated when you publish a WeWeb app 
The DOM of your live apps is now much cleaner because we removed superfluous wrappers.
As a result, your apps will be much lighter, faster, and it will be easier for you to implement custom CSS and accessibility features.
There are, however, a few breaking changes you should be aware of before you republish your app (more on these below).
To make this update possible, we’ve had to introduce some restrictions on how certain UIs can be built (for example, adding a link to a Kanban board or input element is no longer supported).
These changes encourage alignment with web development best practices and should only affect a small number of projects, but please don’t hesitate to reach out if there’s anything that’s unclear or you need help with an update.
Let’s take a look at what has changed.
Links
Before, you could add links on any element of your app, including inputs or a kanban for example. But this is not standard practice in web development.
Now, we will only handle links on certain elements, namely: sections, divs, containers, texts, icons, images, and buttons.
If, by any chance, you need to add a link to another type of element, say an input for example, you will need to wrap that element inside a div or container and set the link on the wrapper.
This is another step to help you follow web development best practices while building in the WeWeb editor.
Action required before you republish your app:
Use our search & copy link features to ensure that all links are properly configured.
BACKGROUND VIDEOS
Similarly to links, before, you could add background videos on any element of your app.
Now, background videos will only be displayed if they were added to a section, div, or container.
Action required before you republish your app:
If you added a background video on another type of element (e.g. a text element), we recommend that you move the background video to a container and republish your app.
DATAGRID
There is a very specific corner case where you may experience issues with the scroll behavior of a datagrid.
If you have a datagrid element with all the following settings:
- a fixed width on the columns,
- the sum of the width is bigger than the width of the datagrid itself, and
- the datagrid has an
overflowproperty set toautoorscroll
Before the release, you had a horizontal scroll on the Datagrid without needing to do anything. Now, because we removed the wrapper, the Datagrid will no longer have a horizontal scroll.
Action required before you republish your app:
Wrap the Datagrid inside a Flexbox and set the property overflow on the Flexbox. You will need to set the same width as you set for the Datagrid on the Flexbox.
DATE & TIME PICKER
In our Date and time picker element, there is a Flexbox Placeholder container. For this Flexbox, if you set the parameter Reverse on the value on , it swapped the text and icon on the left of the date picker, like this:
Now, with the property Reverse, if you set the value on, the text and icon are pushed to the right of the date picker:
Action required before you republish your app:
To have the same display as before the release: set the property Reverse to the value off, and manually switch the position of the element in the layout.
INPUTS (simple, advanced, masked)
In these three elements, if you defined a cursor, it was only applied to the border of the element and the text cursor was applied for the text area.
Now, it’s applied to the all element (border and text area).
CUSTOM CLASS CSS
Before, the DOM of your WeWeb apps included superfluous wrappers, identified by the ww-object and ww-object-elem CSS classes.
Now, these superfluous wrappers and CSS classes no longer exist.
Action required before you republish your app:
If you targeted the wrapper (the parent div) through JavaScript or with the ww-object or ww-object-elem classes in your custom code, you may need to update this code.
We recommend you add an id or class to the element you were targeting and update your custom code accordingly.
CODED COMPONENTS
In WeWeb, you can import custom Vue.js components to your workspace. The release impacts how these coded components work in combination with the WeWeb editor.
Action required before you republish your app:
If you’re not using coded components in your projects, there’s no action required 
If you do leverage custom coded components in your WeWeb projects, then you may need to take action.
As this is more of an advanced subject that requires more in-depth technical context, we’ve put together a dedicated guide on the topic here.
To check if you are using custom coded components, go to the “Coded components” tab of your WeWeb workspace:
Ok, that’s it for now!
We’re very excited about this update because it’s a continuation of our efforts to standardize the code generated by WeWeb
It will allow us to improve how CSS classes work in WeWeb and build new elements that are both powerful and more easily customizable, including but not limited to new tables, select elements, and dynamic form builders.
Of course, we will do our best to make this transition as smooth as possible for you! Should you have any questions, please feel free to reach out.
PS: try right clicking in the WeWeb Editor for a nice surprise 
