Is there a way to hide some properties or group from styling tab in Visual Editor?

Technical Questions
, ,
1

Is there a way to hide some properties or group from styling tab in Visual Editor

2

Hello @soumya,

Yes, you can hide certain properties or groups from the styling tab and other parts of the Visual Editor in Builder.io by using the Builder.register('editor.settings', {...}) method. Below are examples of how you can achieve these customizations:

Hiding CSS Properties

To hide specific CSS properties, you can set their value to false in the designTokens object. For example, to hide the font family selector you can use:

designTokens: {
  fontFamily: false
}

This setting will prevent the font family selector from being displayed in the Visual Editor’s style settings.

Customizing the Visual Editor

You can use the following toggles in the Builder.register('editor.settings', {...}) method to hide various parts of the Visual Editor:

import { Builder } from '@builder.io/sdk';

Builder.register('editor.settings', {
  hideStyleTab: false,
  hideMainTabs: false,
  hideDataTab: false,
  hideOptionsTab: false,
  hideToolbar: false,
  hideHeatMap: false,
  hidePageUrlEditor: false,
  hideAnimateTab: false,
  hideInsertTab: false,
  hideTargeting: false,
  hideHelpWidget: false,
  disableTargetingFields: ['url', 'urlPath'],
  disableOverflowButtons: ['archive', 'duplicate']
});

This code allows you to hide tabs, parts of the toolbar, and targeting fields in the Visual Editor.

Using Strict Mode

If you set styleStrictMode to true, it will remove almost all styling options that don’t have corresponding design tokens, enforcing a stricter design governance in the Visual Editor:

Builder.register("editor.settings", {
  styleStrictMode: true, 
  designTokens: {
    colors: [
      { name: "Primary", value: "var(--primary-color, #ff0000)" }
    ],
    spacing: [
      { name: "Large", value: "var(--spacing-large, 20px)" }
    ]
  }
});

With strict mode enabled, users can only edit styles for which design tokens are specified. Any other properties are hidden and are not editable.

By customizing these settings, you can hide specific CSS properties or even entire tabs and groups from the Visual Editor to better control the design and ensure consistency.