React Hook Form + Zod

Bill editor example

This single route models create and edit bill forms side by side. Each accordion renders its own UpsertBillForm, with fresh defaults or defaults mapped from an imaginary API bill.

Locale

Theme

Bill details

Bill schedule

One-off schedule

Line items

Taxable

Payment and notes

Collect payment automatically

Bill total

Complete the line items and tax rate to preview the bill total.

New bill defaults

Live JSON preview

{
  "editorMode": "new",
  "submitIntent": "create",
  "billType": "one_off",
  "customerName": "",
  "customerEmail": "",
  "status": "draft",
  "issueDate": "2026-08-11",
  "dueDate": "2026-08-25",
  "currency": "USD",
  "lineItems": [
    {
      "description": "",
      "quantity": "",
      "unitAmountCents": "",
      "taxable": false
    }
  ],
  "taxRate": "0",
  "collectPaymentAutomatically": false,
  "memo": "",
  "recurrence": {
    "interval": "1",
    "startsOn": "2026-08-11",
    "endStrategy": "never",
    "endsOn": "",
    "frequency": "monthly",
    "monthlyAnchorDate": "2026-08-11"
  }
}

Derived submission preview

Live JSON preview

Complete the required fields to inspect the API submission.

Bill details

Bill schedule

Repeating schedule

If a month does not have that day, the bill runs on the last valid day of that month.

Line items

Taxable

Payment and notes

Collect payment automatically

Bill total

$5,871.25

$5,500.00 subtotal + $371.25 tax

API bill response

Live JSON preview

{
  "id": "bill_42",
  "kind": "repeating",
  "status": "scheduled",
  "customer": {
    "name": "Acme Studios",
    "email": "billing@acme.example"
  },
  "issue_date": "2026-06-01",
  "due_date": null,
  "currency": "USD",
  "line_items": [
    {
      "id": "li_design",
      "description": "Design retainer",
      "quantity": 1,
      "unit_amount_cents": 450000,
      "taxable": true
    },
    {
      "id": "li_support",
      "description": "Priority support",
      "quantity": 4,
      "unit_amount_cents": 25000,
      "taxable": false
    }
  ],
  "tax_rate_bps": 825,
  "auto_collect": true,
  "memo": "Imported from an imaginary billing API.",
  "schedule": {
    "frequency": "monthly",
    "interval": 1,
    "starts_on": "2026-07-01",
    "anchor_date": "2026-07-31",
    "day_of_month": 31,
    "day_overflow": "last_day",
    "ends_on": null,
    "max_occurrences": null
  }
}

Derived submission preview

Live JSON preview

{
  "endpoint": "/api/bills/bill_42",
  "method": "PATCH",
  "body": {
    "id": "bill_42",
    "kind": "repeating",
    "customer": {
      "name": "Acme Studios",
      "email": "billing@acme.example"
    },
    "status": "scheduled",
    "issue_date": "2026-06-01",
    "due_date": null,
    "currency": "USD",
    "tax_rate_bps": 825,
    "auto_collect": true,
    "memo": "Imported from an imaginary billing API.",
    "schedule": {
      "ends_on": null,
      "max_occurrences": null,
      "frequency": "monthly",
      "interval": 1,
      "starts_on": "2026-07-01",
      "anchor_date": "2026-07-31",
      "day_of_month": 31,
      "day_overflow": "last_day"
    },
    "line_items": [
      {
        "id": "li_design",
        "description": "Design retainer",
        "quantity": 1,
        "unit_amount_cents": 450000,
        "taxable": true
      },
      {
        "id": "li_support",
        "description": "Priority support",
        "quantity": 4,
        "unit_amount_cents": 25000,
        "taxable": false
      }
    ]
  }
}

Bill editor example

Create a New BillStarts from local defaults and submits to the create endpoint.

Edit an Existing BillStarts from an API response and submits to the update endpoint by default.