Reference scripts in Blazor applications

19 Aug 202613 minutes to read

This page explains script isolation and how to reference Blazor scripts from the CDN, static web assets, and the Custom Resource Generator (CRG).

NOTE

JavaScript interop files are required for features that cannot be implemented natively in Blazor.

CDN reference

You can refer the Blazor scripts using the CDN resources.

  • For .NET 8, .NET 9, and .NET 10 Blazor Web App (any render mode: Server, WebAssembly, or Auto), add scripts in ~/Components/App.razor.
  • For a Blazor WebAssembly (standalone) App, add scripts in ~/wwwroot/index.html.

Blazor components are available on the CDN per version. Ensure that the version in the URLs matches the NuGet package version used in the application.

Component CDN Script Reference

All Blazor UI Components
  • CSHTML
    • https://cdn.syncfusion.com/blazor/34.2.2/syncfusion-blazor.min.js
    		 
    <head>
    ...
    <script src="https://cdn.syncfusion.com/blazor/34.2.2/syncfusion-blazor.min.js" type="text/javascript"></script>
</head>

    Additionally, Blazor components provide the latest scripts on the CDN without versioning. You can use this in a development environment if you want to always use the latest version of the scripts. It is not recommended to use this in a production environment.

    Component CDN Script Reference
    All Blazor UI Components https://cdn.syncfusion.com/blazor/syncfusion-blazor.min.js

    Static web assets

    You can refer to the Blazor scripts from NuGet packages by using static web assets.

    Enable static web assets usage

    To use static web assets, call UseStaticFiles in the app’s ~/Program.cs file.

    NOTE

    For a Blazor Web App (render mode: Auto) and a Blazor WebAssembly App, call UseStaticFiles in the Server project.

    Reference scripts from static web assets

    • Combined scripts are available in the Syncfusion.Blazor.Core package. To refer the script from static web assets, use the code below.

        <head>
      ...
      <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
  </head>

    Individual component script references

    Blazor components provide component-wise scripts that can be referenced externally in the application. If you are using only a few components, you can directly reference the required component scripts from the CDN or static web assets without using the CRG, instead of referencing the single script that includes all components.

    You can add a component script reference in one of the following ways based on usage:

    Usage Script reference

    Refer from static web assets
  • CSHTML
    • <head>
    ...
    <!--<script src="_content/<Package name>/scripts/<Component script name>" type="text/javascript"></script>-->
    <script src="_content/Syncfusion.Blazor.Inputs/scripts/sf-textbox.min.js" type="text/javascript"></script>
</head>

    Refer from CDN
  • CSHTML
    • <head>
    ...
    <!--<script src="https://cdn.syncfusion.com/blazor/<Version>/<Component script name>" type="text/javascript"></script>-->
    <script src="https://cdn.syncfusion.com/blazor/34.2.2/sf-textbox.min.js" type="text/javascript"></script>
</head>

    The following table lists the components and their script file names.

    Component Script name
    TextBox sf-textbox.min.js
    TextArea sf-textarea.min.js
    Toggle Switch Button sf-switch.min.js
    Numeric TextBox sf-numerictextbox.min.js
    Input Mask sf-maskedtextbox.min.js
    OTP Input sf-otp-input.min.js
    File Upload sf-uploader.min.js
    Range Slider sf-slider.min.js
    Calendar sf-calendar.min.js
    DatePicker sf-datepicker.min.js
    DateTime Picker sf-datepicker.min.js
    DateRangePicker sf-daterangepicker.min.js
    TimePicker sf-timepicker.min.js
    AutoComplete sf-dropdownlist.min.js
    ComboBox sf-dropdownlist.min.js
    Dropdown List sf-dropdownlist.min.js
    Multicolumn ComboBox sf-multicolumncombobox.min.js
    MultiSelect Dropdown sf-multiselect.min.js
    Mention sf-mention.min.js
    Dropdown Menu sf-drop-down-button.min.js
    Split Button sf-drop-down-button.min.js
    Progress Button sf-spinner.min.js
    ListBox sf-listbox.min.js
    Color Picker sf-colorpicker.min.js
    Signature sf-signature.min.js
    Rating sf-rating.min.js
    Speech to Text sf-speechtotext.min.js
    Context Menu sf-contextmenu.min.js
    Menu Bar sf-menu.min.js
    Breadcrumb sf-breadcrumb.min.js
    Carousel sf-carousel.min.js
    Dropdown Tree sf-dropdowntree.min.js
    Stepper sf-stepper.min.js
    Query Builder sf-querybuilder.min.js
    Grid sf-grid.min.js
    Accordion sf-accordion.min.js
    Tabs sf-tab.min.js
    Toolbar sf-toolbar.min.js
    Scheduler sf-schedule.min.js
    Barcode Generator sf-barcode.min.js
    Maps sf-maps.min.js
    Circular Gauge sf-circulargauge.min.js
    Linear Gauge sf-lineargauge.min.js
    HeatMap sf-heatmap.min.js
    Chart sf-chart.min.js
    3D Chart sf-chart3d.min.js
    Chart Wizard sf-chart-wizard.min.js
    CheckBox sf-checkbox.min.js
    Accumulation Chart sf-accumulation-chart.min.js
    Stock Chart sf-stock-chart.min.js
    Bullet Chart sf-bullet-chart.min.js
    Sparkline sf-sparkline.min.js
    TreeMap sf-treemap.min.js
    ProgressBar sf-progressbar.min.js
    Smith Chart sf-smith-chart.min.js
    Range Selector sf-range-navigator.min.js
    Sankey sf-sankey.min.js
    File Manager sf-filemanager.min.js
    Tooltip sf-tooltip.min.js
    ListView sf-listview.min.js
    Dashboard Layout sf-dashboard-layout.min.js
    Sidebar sf-sidebar.min.js
    TreeView sf-treeview.min.js
    Pivot Table sf-pivotview.min.js
    TreeGrid sf-treegrid.min.js
    Spinner sf-spinner.min.js
    Splitter sf-splitter.min.js
    Floating Action Button sf-floating-action-button.min.js
    Speed Dial sf-speeddial.min.js
    Toast sf-toast.min.js
    Dialog sf-dialog.min.js
    In-Place Editor sf-inplaceeditor.min.js
    Kanban sf-kanban.min.js
    Image Editor sf-image-editor.min.js
    Pager sf-pager.min.js
    Diagram sf-diagramcomponent.min.js
    Gantt Chart sf-gantt.min.js
    Ribbon sf-ribbon.min.js
    Rich Text Editor sf-richtexteditor.min.js
    Block Editor sf-blockeditor.min.js
    AI AssistView sf-ai-assistview.min.js
    Chat UI sf-chat-ui.min.js

    Custom Resource Generator

    Blazor provides an option to generate component interop scripts by using the Custom Resource Generator (CRG) tool. Learn how to generate component-wise scripts using CRG.

    See also