View in API Explorer

• Call API
• View API Details
• Browse API source code in different langauges

Using JsonServiceClient in Web Pages

Easiest way to call APIs is to use @servicestack/client with the built-in /types/mjs which returns your APIs in annotated typed ES6 class DTOs where it can be referenced directly from a JavaScript Module.

We recommend using an importmap to specify where to load @servicestack/client from, e.g:

<script type="importmap">
{
  "imports": {
    "@servicestack/client":"https://unpkg.com/@servicestack/client@2/dist/servicestack-client.mjs"
  }
}
</script>

This lets us reference the @servicestack/client package name in our source code instead of its physical location:

<input type="text" id="txtName">
<div id="result"></div>

<script type="module">
import { JsonApiClient, $1, on } from '@servicestack/client'
import { Hello } from '/types/mjs'

const client = JsonApiClient.create()
on('#txtName', {
    async keyup(el) {
        const api = await client.api(new Hello({ name:el.target.value }))
        $1('#result').innerHTML = api.response.result
    }
})
</script>

Enable static analysis and intelli-sense

For better IDE intelli-sense during development, save the annotated Typed DTOs to disk with the x dotnet tool:

$ x mjs

Then reference it instead to enable IDE static analysis when calling Typed APIs from JavaScript:

import { Hello } from '/js/dtos.mjs'
client.api(new Hello({ name }))

To also enable static analysis for @servicestack/client, install the dependency-free library as a dev dependency:

$ npm install -D @servicestack/client

Where only its TypeScript definitions are used by the IDE during development to enable its type-checking and intelli-sense.