Standalone Builder

FormForgeBuilder can run as a standalone editor when you want to keep the visual builder but move orchestration outside the component.

If you do not want to use a component ref, use useFormForgeBuilder() directly. It exposes the same draft state plus save(), publish(), unpublish(), and togglePublishState().

Core props

• standalone
• hideSettings
• autoPublishOnSave
• defaultPublished

Deprecated compatibility prop

• disableSettingsTab

Use hideSettings instead. The deprecated prop still works as an alias, but new integrations should not rely on it.

Example

<script setup lang="ts">
const builder = ref<InstanceType<typeof FormForgeBuilder> | null>(null)

async function saveForm(): Promise<void> {
  await builder.value?.save()
}

async function publishForm(): Promise<void> {
  await builder.value?.publish()
}
</script>

<template>
  <FormForgeBuilder
    ref="builder"
    v-model="model"
    standalone
    hide-settings
    auto-publish-on-save
  />

  <div class="mt-4 flex gap-2">
    <UButton @click="saveForm">
      Save
    </UButton>

    <UButton color="neutral" variant="outline" @click="publishForm">
      Publish
    </UButton>
  </div>
</template>

Exposed methods

The component ref exposes:

• save()
• publish()
• unpublish()
• togglePublishState()

Behavior notes

• autoPublishOnSave publishes every successful save, including autosave-driven saves
• defaultPublished affects the current publication state, but it does not persist a backend setting
• hideSettings keeps the settings tab out of the UI without storing that choice in the form schema
• public_url is read-only and comes from the backend resolver when one is configured