Skip to content
bahtuiv0.6.0
bank20baht-ui 0.6.0

JSON in, form out.

A form and workflow engine shipped as Web Components. Describe the form as JSON, render it from React, Vue, Angular or plain HTML.

Browse componentsOpen the builder
Live<baht-form>
The JSON behind it
{
  "form_id": "quote",
  "form_name": "Request a quote",
  "fields": [
    {
      "order": 1,
      "type": "text",
      "key": "company",
      "label": "Company",
      "width": "1/2",
      "required": true,
      "value": "Siam Paper Co."
    },
    {
      "order": 2,
      "type": "email",
      "key": "email",
      "label": "Email",
      "width": "1/2",
      "value": "malee@siampaper.co"
    },
    {
      "order": 3,
      "type": "dropdown",
      "key": "plan",
      "label": "Plan",
      "width": "1/2",
      "options": [
        {
          "key": "free",
          "label": "Free"
        },
        {
          "key": "team",
          "label": "Team"
        },
        {
          "key": "enterprise",
          "label": "Enterprise"
        }
      ],
      "value": "team"
    },
    {
      "order": 4,
      "type": "number",
      "key": "seats",
      "label": "Seats",
      "width": "1/2",
      "min": 1,
      "max": 500,
      "value": 12
    },
    {
      "order": 5,
      "type": "toggle",
      "key": "invoice",
      "label": "Invoice monthly",
      "width": "1/1",
      "value": true
    }
  ]
}

One import registers every element

The bundle defines the custom elements, the stylesheet ships the tokens, and the engine is a pure TypeScript module you can run on the server too.

setup.ts
npm i bank20baht-ui


import 'bank20baht-ui';               // registers every <baht-*> element
import 'bank20baht-ui/tokens.css';    // design tokens: override any --baht-* to theme
import { evaluate } from 'bank20baht-ui/engine';  // headless rules engine, no DOM

Two levels of use

One controlled form

You own all state. The element renders the fields, emits changes and validity, and nothing else.

<baht-form></baht-form>
<script>
  document.querySelector('baht-form').form = {
    form_id: 'f1', form_name: 'Person',
    fields: [
      { order: 1, type: 'text', key: 'first_name',
        label: 'First name', width: '1/2', required: true }
    ]
  };
</script>

A rules-driven wizard

Several forms as steps, plus rules that show, hide, skip and compute across them.

<baht-workflow></baht-workflow>
<script>
  document.querySelector('baht-workflow').workflow = {
    workflow_id: 'onboarding',
    forms: [ /* one form per step */ ],
    rules: [ { when: 'plan == "team"', show: ['seats'] } ]
  };
</script>

Where to next