Standalone Renderer

FormForgeRenderer supports standalone and preview-style workflows where the renderer stays interactive but the parent screen owns the overall flow.

Useful props

• showProgress
• showSubmit
• simulation
• previewPageKey
• validateOn
• validateOnBlur

Example

<script setup lang="ts">
const selectedPageKey = ref<string | null>(null)
</script>

<template>
  <FormForgeRenderer
    form-key="contact"
    :show-progress="true"
    :show-submit="true"
    :simulation="true"
    :preview-page-key="selectedPageKey"
  />
</template>

Behavior notes

• showProgress renders a UProgress bar when the form has more than one visible block
• navigation buttons appear when more than one block is visible
• Previous, Next, and Submit stay visible in simulation mode so a playground can mimic a real form run
• previewPageKey locks the renderer to a single block, which is useful when you preview the block currently selected in the builder
• the renderer still validates the current block before moving forward