How to force values (Design System)

Feature Requests
1

Hi,

As a frontend dev, I build stuff via Builderio. Afterwards, the content manager has the ability not only to change the content (text, images) but also add new elements (blocks, grids) and apply some basic styling like margin, font-size, column gaps.

Currently, the content manager has the freedom to set e.g. the margin to what ever he likes to pixel value. This I want to restrict to keep the overall website styling according to the my design system, which allows only a restricted set of values. So in concrete words: I would like to give the content manager only a set of possible values that he can set (like only 14px, 18px, 22px, 28px - that’s all).

Is it possibly to achieve this with current functionality? If not, I would like to raise a feature request herewith.

Thx

2

Hi @Detzler,

Currently, this feature is not available but as a workaround, you can certainly create a data model with those fixed values and use it across your space or you can use custom CSS targeting builder block classes, i.e., builder-text, builder-content, builder-blocks etc.

Please raise a feature request for the same at Builder.io Ideas

3

Design tokens is now a built-in feature :tada: Design Tokens - Builder.io

4

Hi @steve

thank you very much. This feature enables a lot, e.g. Tailwind integration.

Does it work when fetching html+css via HTML API?

5

ya! for use with the HTML API, you’ll pass the configuration like this

<script>
window.builderWcLoadCallbacks = [
  (context) => {
    context.Builder.register('editor.settings', {
      designTokens: { ... }
    })
  }
]
</script>

That just tells the Visual Editor what tokens are available, and then they’ll be used in the HTML API response as expected anywhere they are used

6

Hi @steve ,

please help me to understand. I thought the HTML API initializes it’s own Builder JS SDK where no one can’t access it except of via the HTTP GET parameter.

In other words, I can add builderWcLoadCallbacks to the Web Component on my own page. But it will be only available in the Visual Editor, not in the HTML API runtime. Isn’ it?

7

the HTML API uses our webcomponents SDK under the hood to ensure any interactive elements are interactive

so any time you use the HTML API you are also using the webcomponents SDK

you could choose to strip out the tag from the response if you want purely static HTML, and are ok with 0 interactivity (and no or minimal dynamic content). in that case, be sure to only do that in production and not when loading in our visual editor so our editor will pick up your designs tokens