JSON Schema Components

The elegance of this schema-driven approach is that you can render complete UIs directly from API schemas. There is no need to load the full ServiceStack metadata document or build a bespoke screen for every operation:

  • Fetch /schema/{Request}.json and pass it to ApiFormSchema to render a complete form for any API.
  • Fetch /auto/{DataModel}.json for an AutoQuery API and pass it to AutoQuerySchema to deliver an entire CRUD UI with querying, filtering, sorting, paging, and Create, Edit, and Delete forms.

The components below demonstrate both approaches, together with recursive JSON Schema forms, readable responses, and generated types.

AutoQuerySchema​

AutoQuerySchema turns an /auto/{Model}.json document into a filterable, sortable, and pageable data browser. Query state is synchronized with the URL so links survive navigation and reloads.

<AutoQuerySchema :schema="bookingSchema" :client="client" :take="5" />

const bookingSchema = await fetch(
  'https://blazor-gallery.servicestack.net/auto/Booking.json'
).then(r => r.json())

ApiFormSchema and JsonView​

ApiFormSchema maps an API schema to its inputs and exposes request, cURL, response, error, and loading state through its default slot. JsonView renders the response with semantic formatting for objects, collections, dates, links, and scalar values.

<ApiFormSchema :schema="helloSchema" :client="client" v-model="request">
  <template #default="{ result, requestText, curl }">
    <pre>{‎{ requestText }‎}</pre>
    <pre>{‎{ curl }‎}</pre>
    <JsonView v-if="result" :value="result.json ?? result.text" />
  </template>
</ApiFormSchema>

Recursive JsonSchemaForm​

JsonSchemaForm supports validation, nested objects, editable arrays, enums, dates, and arbitrary dictionary properties. Bind it with v-model to keep the live value synchronized.

<JsonSchemaForm
  ref="form"
  :schema="formSchema"
  v-model="data"
  validate-on="change"
/>

Generate typed models​

The same schema and live example value can generate C#, Python, TypeScript, or JavaScript models with generateTypes.

import { generateTypes } from '@servicestack/vue'

const generated = generateTypes({
  name: 'launch-plan.json',
  schema: formSchema,
  json: data,
  language: 'typescript',
})

Schema endpoints​

ServiceStack serves individual request schemas from /schema/{RequestDto}.json and complete AutoQuery model envelopes from /auto/{Model}.json. These endpoints let schema-driven pages load only the definitions they use.

Edit this page on GitHub