Step 1: Enable Mobile Overrides in Tool Options
Inside your unlayer.registerTool() function, add the overrideAllowed property in the tool’s option definition:
unlayer.registerTool({
// ...
options: {
text: {
options: {
textColor: {
overrideAllowed: true
}
}
}
}
});This allows the selected property to be edited separately for mobile view.
Step 2: Define Mobile Styles in Property Editor
Inside your unlayer.registerPropertyEditor() function, define the deviceStyles() method to return the styles that should apply on mobile:
unlayer.registerPropertyEditor({
name: 'my_color_picker',
deviceStyles(value, _info) {
return {
color: value
};
}
});
This ensures Unlayer applies different styles for mobile view using media queries.
Step 3: Add Mobile Override Class to Exported HTML
Inside the renderer.exporters function of your custom tool, make sure to include a v-class following this pattern:
exporters: {
web(values) {
return `<div class="v-text-color-color" style="color: ${values.textColor};">I am a custom tool.</div>`;
}
}This class (v-text-color-color) ensures that Unlayer can identify and apply the mobile override styles properly.