--- title: "Build World-Class Blazor WebAssembly Apps with Globalization and Localization" published_at: "2021-12-01T11:00:14+00:00" modified_at: "2025-11-06T15:17:53+00:00" url: "https://www.syncfusion.com/blogs/post/build-world-class-blazor-webassembly-apps-with-globalization-and-localization" excerpt: "The world is full of people in different cultures, speaking different languages. For the sake of the global reach of our web applications, we have to provide the web content in users’ native language. In technical terms, we call it..." taxonomy_category: - "Blazor" - "DataGrid" - "Web" taxonomy_post_tag: - "Blazor" - "DataGrid" - "globalization" - "Localization" - "WebAssembly" --- # Build World-Class Blazor WebAssembly Apps with Globalization and Localization [Alan Sangeeth](https://www.syncfusion.com/blogs/author/alans) ![Build World-Class Blazor WebAssembly Apps with Globalization and Localization](https://www.syncfusion.com/blogs/wp-content/uploads/2021/12/Build-World-Class-Blazor-WebAssembly-Apps-with-Globalization-and-Localization.png) The world is full of people in different cultures, speaking different languages. For the sake of the global reach of our web applications, we have to provide the web content in users’ native language. In technical terms, we call it [globalization and localization](https://en.wikipedia.org/wiki/Internationalization_and_localization) . Syncfusion [Blazor](https://www.syncfusion.com/blazor-components) platform includes popular [Charts](https://www.syncfusion.com/blazor-components/blazor-charts) , [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) , [Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) , [Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) , [Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor) , and [Maps](https://www.syncfusion.com/blazor-components/blazor-map) controls, as well as unique [file-format libraries](https://www.syncfusion.com/sales/products/fileformats) for manipulating [Excel](https://en.wikipedia.org/wiki/Microsoft_Excel) , [Word](https://en.wikipedia.org/wiki/Microsoft_Word) , [PDF](https://en.wikipedia.org/wiki/PDF) , and [PowerPoint](https://en.wikipedia.org/wiki/Microsoft_PowerPoint) files. These components completely support globalization and localization features. In this blog, let’s look at how Syncfusion Blazor components adapt well to the browsers’ language settings in WebAssembly apps. ## Browser settings For this blog, I am going to use the Syncfusion [Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started) component and the [Chrome](https://en.wikipedia.org/wiki/Google_Chrome) web browser. To see the globalization and localization features of the Blazor DataGrid component (in the WebAssembly app) in action, you first need to know how to change your browser language settings. Refer to the [Setting language preferences in a browser](https://www.w3.org/International/questions/qa-lang-priorities) documentation to learn in detail about browser language settings. In the following GIF image, you’ll see the procedure to change the browser language from the Google home page. ![Setting Languange in Google Homepage](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Setting-Languange-in-Google-Homepage.gif) ## Globalization Globalization is offering content in different formats and designs for the same language. Let’s take the English language as an example. It is the common language of both the U.S. and the U.K. But the date format in the U.S. is mm/dd/yyyy, and in the U.K. it’s dd/mm/yyyy. Syncfusion Blazor WebAssembly components react automatically based on the browser’s language settings and no extra work is needed for dates to be correctly formatted. You can simply render our Syncfusion components by following the documentation and they will adapt automatically to the browser’s language settings: - [Getting started with Blazor WebAssembly App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) - [Getting Started with the Blazor DataGrid Component](https://blazor.syncfusion.com/documentation/datagrid/getting-started#add-datagrid-component) - [Globalization in the Blazor DataGrid Component](https://blazor.syncfusion.com/documentation/datagrid/global-local) In the following GIF, I show how the Syncfusion Blazor DataGrid component reacts to changes to the browser language. ![Globalization Support in Syncfusion Blazor WebAssembly DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Globalization-Support-in-Syncfusion-Blazor-WebAssembly-DataGrid.gif) ## Localization [Localization](https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.daytranslations.com%2Fblog%2Fthe-guide-localization%2F&data=05%7C02%7Cantoanisulbiya.n%40syncfusion.com%7C7790b60436a1429b5abc08dcc0d3ff3e%7C77f1fe12b04949198c509fb41e5bb63b%7C0%7C0%7C638597264000531955%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=WqDd5fu7ZKZGiqSvKQ0kJ3ClDHs%2BjrVGx0HaIIN7ubM%3D&reserved=0) is literally translating the content to a specific language. The procedures to add translation files and enable localization in our Syncfusion Blazor WebAssembly components is: 1. First, provide the language resource files: 1. Add a **Resource** folder in your WASM application. 2. Then, add the default and required language files you need in the folder. For the blog, we are going to add the resource file for the language German. The various culture resource files for our Blazor components are in the [blazor-locale](https://github.com/syncfusion/blazor-locale) GitHub repository. 2. Now, register the localization service configuration in the **~/Program.cs** file.``` builder.Services.AddSingleton(typeof(ISyncfusionStringLocalizer), typeof(SyncfusionLocalizer)); ``` 3. Then, create the **~/Shared/SyncfusionLocalizer.cs** file and implement the ** ISyncfusionStringLocalizer** interface in the ** SyncfusionLocalizer** class. 4. Finally, run the application and set the browser language as German. Then, the Syncfusion Blazor DataGrid content will be translated based on the browser language settings. Refer to the following GIF image. ![Localization Support in Syncfusion Blazor WebAssembly DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Localization-Support-in-Syncfusion-Blazor-WebAssembly-DataGrid.gif) **Note:** For more details, refer to the [Enable Localization in a Blazor WebAssembly application](https://blazor.syncfusion.com/documentation/common/localization#enable-localization-in-blazor-webassembly-application) documentation. ## GitHub reference Also, you can download the complete demo for [globalization and localization in Blazor WebAssembly](https://github.com/SyncfusionExamples/Globalization-and-Localization-in-wasm) . ## Conclusion Thanks for reading! We saw how to enable globalization and localization support in the Syncfusion [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) in your WebAssembly app. Apply these procedures to other Blazor components, too. You can easily reach a global audience by serving them in their local language and culture. Please leave your feedback in the comments section below! If you would like to try the Syncfusion components, you can download our [free trial](https://www.syncfusion.com/downloads/blazor/confirm) . Also, check out our [Blazor demos](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) and [documentation](https://blazor.syncfusion.com/documentation/introduction) for detailed explanations and the facts you need to proceed further. You can also contact us through our [support forum](https://www.syncfusion.com/forums) , [Direct-Trac](https://www.syncfusion.com/account/login) , or [feedback portal](https://www.syncfusion.com/feedback) . We are always happy to assist you! ## Related blogs - [Simple Steps to Upload Files to Azure Blob Storage in Blazor App](https://www.syncfusion.com/blogs/post/simple-steps-to-upload-files-to-azure-blob-storage-in-blazor-app.aspx) - [Easily Synchronize Blazor Resource Scheduler with RESTful Services](https://www.syncfusion.com/blogs/post/easily-synchronize-blazor-resource-scheduler-with-restful-services.aspx) - [Easily Reach a Global Audience with Localization Support in Your Blazor Apps](https://www.syncfusion.com/blogs/post/easily-reach-a-global-audience-with-localization-support-in-your-blazor-apps.aspx) - [Elegantly Visualize Data with the World’s Fastest Blazor Charts](https://www.syncfusion.com/blogs/post/elegantly-visualize-data-with-the-worlds-fastest-blazor-charts.aspx)