Status
This feature is currently in beta. Please reply to this post with questions and feedback
Requirements
Currently, level localization requires using our React SDK, but is also supported to some level via our Angular and Vue SDK as well.
Limitations
This post is for field level localization within content blocks in the Visual Editor, and does not cover localization for custom fields. For custom field level localization you can find more info in this post: Custom Field Localization (beta)
Integration
React
In order to use this feature, you need to pass a locale property to the data prop of the BuilderComponent. For example, to display localized values for 'en-US'
<BuilderComponent model={yourModel} context={{ locale: 'en-US' }} />
Now any values localized to en-US will be displayed in your rendered content. Learn more about context in our React SDK here
Angular
The same step in Angular can be achieved by passing in the locale through the options attribute on the BuilderComponent (and not the data). For example, to display content for the locale en-US, the following options object can be set as a property in your custom component:
options: any = {
options: {
data: {
locale: "en-US"
}
}
};
Do note the options key inside the options property, it is important! Then, we can simply pass them to our BuilderComponent in the HTML:
<builder-component
[options]="options"
[data]="data"
model="page"
></builder-component>
Vue
Vue allows passing in the locale to the options attribute on the RenderContent element. Do take note of the options key inside the options property on the element. In order to render content for the locale en-US, use the following:
<RenderContent
model="page"
:options="{
options: {
data: {
locale: 'en-US',
},
},
}"
/>
Usage
To add localized values, select a layer and next to any option chose the binding icon (4 dots in a square). Then choose “localize values” and enter what value you want for each locale
To add locales choose “add locales here” and enter your new locale name.
To manage locales go to Builder.io: Drag and drop page builder and CMS and choose the pencil button next to “Custom targeting attributes” and you can add and remove locales next to the locale field
Up next
More docs will be coming soon 
