This sample and article shows how to integrate the DS Server DocumentEditor using JavaScript into an ASP.NET Blazor application. Blazor allows you create interactive web applications using C#. DS Server provides the backend engine to integrate document processing into web applications.

Trial Token

For this tutorial, a trial token is required and can be easily created on the dedicated DS Server website:

Get Token

Adding JavaScript

After you created a new Blazor application in Visual Studio, open the _Host.cshtml page in the Pages folder. In the <head> tag, add the following script tag:

<script src=""></script>
view raw test.cshtml hosted with ❤ by GitHub

In the same page, add the following script tag into the <body> element and add your private clientId and clientSecret:

function addEditorToElement(element) {
serviceURL: "",
authSettings: {
clientId: "",
clientSecret: ""
view raw test.cshtml hosted with ❤ by GitHub

In the folder Pages, create a new Razor page named Editor.razor and add the following content:

@page "/editor"
@implements IAsyncDisposable
@inject IJSRuntime JS
#txDocumentEditorContainer {
width: 1100px;
height: 600px;
display: inline-block;
position: relative;
<div id="txDocumentEditorContainer" @ref="txDocumentEditorContainer"></div>
@code {
private ElementReference txDocumentEditorContainer;
protected override async Task OnAfterRenderAsync(bool firstRender) {
if (firstRender) {
await JS.InvokeVoidAsync("addEditorToElement", txDocumentEditorContainer);
public async ValueTask DisposeAsync() {
view raw test.razor hosted with ❤ by GitHub

This code calls the addEditorToElement method that has been added to the _Host.cshtml page.

Finally, the new page is added to the navigation:

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
<li class="nav-item px-3">
<NavLink class="nav-link" href="editor">
<span class="oi oi-plus" aria-hidden="true"></span> Editor
view raw navigation.razor hosted with ❤ by GitHub

On starting the application, the document editor is shown when navigating to the new page editor:

TX Text Control in Razor

Sample Application

You can test this on your own by downloading the sample from our GitHub repository.