FormViewer

FormViewer renders a schema produced by FormBuilder. Use it for public preview, user input or reading a published form.

Basic usage

<script setup lang="ts">
import type { FormKitSchemaDefinition } from '@formkit/core'

const schema = ref<FormKitSchemaDefinition[]>([])
const values = ref<Record<string, unknown>>({})

function submit(values: Record<string, unknown>) {
  console.log('Submitted form', values)
}
</script>

<template>
  <FormViewer
    :schema="schema"
    v-model:values="values"
    locale="en"
    @submit="submit"
  />
</template>

Load a saved form

<script setup lang="ts">
import type { FormKitSchemaDefinition } from '@formkit/core'

type StoredForm = {
  schema: FormKitSchemaDefinition[]
  values?: Record<string, unknown>
}

const route = useRoute()
const schema = ref<FormKitSchemaDefinition[]>([])
const values = ref<Record<string, unknown>>({})

const { data } = await useFetch<StoredForm>(`/api/forms/${route.params.id}`)

if (data.value) {
  schema.value = data.value.schema
  values.value = data.value.values ?? {}
}
</script>

<template>
  <FormViewer
    :schema="schema"
    v-model:values="values"
    locale="en"
  />
</template>

Always validate the document server-side before sending it back to the browser.

Submit

FormViewer emits validated values. The application decides where to send them.

async function submit(values: Record<string, unknown>) {
  await $fetch('/api/form-submissions', {
    method: 'POST',
    body: {
      formId: 'contact',
      values,
    },
  })
}

For forms with files, store binaries separately and keep only validated identifiers or metadata in JSON.

Readonly and disabled

<FormViewer :schema="schema" :values="values" readonly />
<FormViewer :schema="schema" :values="values" disabled />

readonly keeps values readable. disabled blocks interaction and exposes the state to assistive technologies.

Good practices

• use a dedicated endpoint for published forms;
• do not render an unvalidated schema;
• separate preview values from submitted values;
• keep sensitive business rules server-side;
• test mobile rendering before publishing.