Reference scripts in Blazor Application

17 Nov 202312 minutes to read

This section provides information about the script isolation process and how to reference scripts from CDN, Static Web Assets and Custom resource generator (CRG) for Syncfusion Blazor Components.


The javascript interop files needs to be added to support the features that can’t be implemented in native blazor.

CDN Reference

You can refer the Syncfusion Blazor scripts through the CDN resources.

  • For Blazor WASM App, reference scripts in ~/wwwroot/index.html file.
  • For Blazor Server App, reference scripts in ~/Pages/_Layout.cshtml file for .NET 6 project and in ~/Pages/_Host.cshtml file for .NET 7 project.

Syncfusion Blazor components are available in CDN for each version. Make sure that the version in the URLs matches the version of the Syncfusion Blazor Package you are using.

Component CDN Script Reference

All components except PDF Viewer, PDF Viewer(NextGen) & Document Editor


    PDF Viewer


    Document Editor


    PDF Viewer(NextGen)

        <script src="" type="text/javascript"></script>

    If you are using PDF Viewer,PDF Viewer(NextGen) or DocumentEditor, ensure to add additional script references as follows,

        <script src="" type="text/javascript"></script>
        <script src="" type="text/javascript"></script>
        <script src="" type="text/javascript"></script>


    To add custom PDF Viewer(NextGen) script file in your application, refer How to refer SfPdfViewer script file in application.

    Static web assets

    You can refer the Syncfusion Blazor scripts through the NuGet package’s static web assets.

    Enable static web assets usage

    To use static web assets, ensure UseStaticFiles method is called as follows,

    • For .NET 6 and .NET 7 app, open the ~/Program.cs file and call UseStaticFiles method.


    For Blazor WASM App, call UseStaticFiles method in Server project of the above mentioned file.

    Refer script from static web assets

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

            <script  src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"  type="text/javascript"></script>
    • If you’re using the PDF viewer, PDF Viewer(NextGen) or Document Editor component, use the code below to refer to script from static web assets.

           <script  src="_content/Syncfusion.Blazor.PdfViewer/scripts/syncfusion-blazor-pdfviewer.min.js"  type="text/javascript"></script>
           <script  src="_content/Syncfusion.Blazor.WordProcessor/scripts/syncfusion-blazor-documenteditor.min.js"  type="text/javascript"></script>
           <script  src="_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfpdfviewer.min.js"  type="text/javascript"></script>


      The PDF Viewer and Document Editor component scripts are available in static web assets from 19.3.* version.

    Individual control script reference

    Syncfusion Blazor components provides component-wise scripts which can be referenced externally in application. If you are using minimal components, then you can import the selected components scripts via CDN or Static web assets directly without using CRG instead of referencing single script with 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

  • <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>

    Refer scripts from CDN

  • <head>
        <!--<script src="<Version>/<Component script name>" type="text/javascript"></script>-->
        <script src="" type="text/javascript"></script>

    The following table lists components and its script reference.

    Component Script name
    TextBox sf-textbox.min.js
    NumericTextBox sf-numerictextbox.min.js
    MaskedTextBox sf-maskedtextbox.min.js
    Uploader sf-uploader.min.js
    Calendar sf-calendar.min.js
    DatePicker sf-datepicker.min.js
    DateTimePicker sf-datepicker.min.js
    DateRangePicker sf-daterangepicker.min.js
    DiagramComponent sf-diagramcomponent.min.js
    TimePicker sf-timepicker.min.js
    AutoComplete sf-dropdownlist.min.js
    ComboBox sf-dropdownlist.min.js
    DropDownList sf-dropdownlist.min.js
    MultiSelect sf-multiselect.min.js
    DropDownButton sf-drop-down-button.min.js
    SplitButton sf-drop-down-button.min.js
    ProgressButton sf-spinner.min.js
    ListBox sf-listbox.min.js
    ColorPicker sf-colorpicker.min.js
    Signature sf-signature.min.js
    ContextMenu sf-contextmenu.min.js
    Menu sf-menu.min.js
    Breadcrumb sf-breadcrumb.min.js
    QueryBuilder sf-querybuilder.min.js
    Grid sf-grid.min.js
    Accordion sf-accordion.min.js
    Tab sf-tab.min.js
    Toolbar sf-toolbar.min.js
    Schedule sf-schedule.min.js
    BarcodeGenerator sf-barcode.min.js
    Maps sf-maps.min.js
    CircularGauge sf-circulargauge.min.js
    LinearGauge sf-lineargauge.min.js
    Chart sf-chart.min.js
    AccumulationChart sf-accumulation-chart.min.js
    StockChart sf-stock-chart.min.js
    BulletChart sf-bullet-chart.min.js
    Sparkline sf-sparkline.min.js
    TreeMap sf-treemap.min.js
    ProgressBar sf-progressbar.min.js
    SmithChart sf-smith-chart.min.js
    RangeNavigator sf-range-navigator.min.js
    HeatMap sf-heatmap.min.js
    FileManager sf-filemanager.min.js
    Slider sf-slider.min.js
    Tooltip sf-tooltip.min.js
    ListView sf-listview.min.js
    DashboardLayout sf-dashboard-layout.min.js
    Sidebar sf-sidebar.min.js
    TreeView sf-treeview.min.js
    PivotView sf-pivotview.min.js
    TreeGrid sf-treegrid.min.js
    Spinner sf-spinner.min.js
    Splitter sf-splitter.min.js
    Toast sf-toast.min.js
    Dialog sf-dialog.min.js
    RichTextEditor sf-richtexteditor.min.js
    InPlaceEditor sf-inplaceeditor.min.js
    Kanban sf-kanban.min.js
    Gantt sf-gantt.min.js
    PdfViewer sf-pdfviewer.min.js
    ImageEditor sf-image-editor.min.js
    DocumentEditor sf-documenteditor.min.js
    Pager sf-pager.min.js

    Custom Resource Generator

    The Syncfusion Blazor provides an option to generate a component’s interop scripts using the Custom Resource Generator (CRG) tool for the Blazor components. Refer here to generate the component-wise scripts externally using CRG.

    See also