Skip to main content

Introduction

Welcome to Buildocs UI Engine documentation. This guide will help you understand the platform and get started with integration.

What is Buildocs UI Engine?

Buildocs UI Engine is a form framework for modern web applications and SaaS products. It combines a visual form designer with a powerful runtime API, allowing you to build dynamic, interactive forms that respond to your business logic. You can render forms in your application using the Buildocs UI Engine SDK for full control, or embed them via iframe for quick integration with any technology stack.

More Than a Form Builder

Buildocs UI Engine is not just a drag-and-drop form builder. It's a framework that gives developers complete control over form behavior at runtime - manipulate fields, communicate with your backend, trigger file downloads, open modal forms, and more. Design forms visually, then control them programmatically. These capabilities are available when rendering forms using the Buildocs UI Engine SDK.


Architecture Overview

Buildocs UI Engine follows a design-once, render-anywhere approach:

Buildocs UI Engine Architecture

How It Works

  1. Create - Forms are created and configured in the Buildocs UI Engine SaaS
  2. Integrate - Install the npm package in your application
  3. Render - Forms are rendered natively inside your frontend (e.g. React)
  4. Process - Submission data is handled entirely by your application
Architecture Benefits

This architecture ensures that Buildocs UI Engine integrates naturally into existing systems without introducing external hosting, iframes, or vendor-controlled backends.


Key Characteristics

These features are available when using the Buildocs UI Engine SDK.

Visual form designer - Drag-and-drop form building

Runtime Form API - Programmatic control over form behavior

Backend communication - onChange handlers trigger API calls

Dynamic forms - Show/hide widgets, validate, prefill data

File operations - Upload, download, and preview files (PDF viewer)

Modal forms - Open forms in dialogs from buttons or table actions

Advanced theming - Project-level theme configuration

Full data ownership - You control all data and workflows


The Form API

What makes Buildocs UI Engine a framework is the Form API. While you design forms visually, your application controls them at runtime:

CapabilityDescription
Widget ControlShow, hide, enable, disable any form element
Data ManipulationPrefill forms, set field values, read form state
ValidationCustom validation, field highlighting, error messages
File HandlingUpload files, trigger downloads, preview PDFs
Modal FormsOpen forms in dialogs on button clicks or table actions
Backend Integrationwidget actions call your API, backend responds with form commands

Your backend can send commands that the form executes automatically - change values, show/hide sections, trigger downloads, and more. This enables server-driven form behavior without frontend deployments.


Data Flow and Control

You Control the Data (SDK Mode)

Buildocs UI Engine does not impose a predefined submission pipeline. When using the SDK, your application is responsible for all data handling.

Your Application Handles:

  • 📥 Receiving form data
  • ✅ Performing validation or transformation
  • 💾 Persisting data to databases or external services
  • ⚡ Triggering business logic or workflows

See SDK Configuration and Iframe Configuration for detailed setup instructions.


This makes Buildocs UI Engine suitable for applications with strict requirements around security, compliance, and custom backend logic.


Intended Use Cases

Buildocs UI Engine is designed for:

Use CaseDescription
🏢 SaaS PlatformsEmbedded, configurable forms for your users
👥 Multi-tenant AppsShared form definitions across tenants
🎯 Centralized ManagementManage forms centrally, execute locally
🔒 Data SovereigntyFull control over form data and workflows

Next Steps

📚 Explore Documentation Learn about all features and capabilities

💻 View Code Examples See practical implementation examples

🔧 API Reference Detailed API documentation

Need Help?

Join our community or contact support for assistance with integration.