Match made on the server: JSON Schema Forms

Sreetam Das

Senior Frontend Engineer II
Web Experience at Remote

Remote

Help companies hire, manage and pay people

Full time Employment, Contractors, Payroll
No offices!
Yes, I work remotely for Remote
Yes, we have received questions about TV remote issues

Engineering at Remote

Since 2020: Growth Engineering for 4 years, now WebXP
~300 across the entire engineering org, ~50 teams across 40+ countries
Elixir backend: 5 million+ lines of code
One of the largest Elixir codebases - working directly with the lang creator
Next.js SPA, TanStack goodies

Forms 🖐️

Sign-up, sign-in
Customer onboarding, defining discounts
Employment contracts, time-off policies
Any kind of structured input from the user really
...and they get expensive when the rules change

Forms at Remote

Country-specific, with over 100 countries
Product-specific and rule-heavy
Bugs are costly!

The Drift Problem 🖐️

Frontend validates with Yup — you might use Zod, Valibot, etc.
Backend must validate as well
Coordinate development, sync deployments

Rules drift. Bugs happen.

Our fix: Single Source of Truth

Backend defines:

Expected shape
Constraints
Conditional logic
even the error copy

JSON Schema

Standard way to describe data shape
type, properties, required
Conditional logic with allOf, if, then

HackerNews agrees!

HackerNews comment: I strongly recommend to automate form generation based on JSON schema what will enable zero coding for maintenance tasks like e.g. synchronization with model changes.
As form code is the most important entry point for security flaws in web applications it is also the most expensive and it is not a good idea having to touch production code for every little backend change. This looks like PHP coding 15 years ago. Do not do that.

JSON Schema Form

Headless
Schema in
Fields out
Validation out

Core API

tsx

const { fields, handleValidation } = createHeadlessForm(schema, {  initialValues,});

No components
No CSS
No design system
Bring your own form library

Architecture Overview

Backend defines the schemas
JSON Schema Form transforms schema → fields
FE handles rendering

JSON Schema Form Kit

Remote-specific wrapper
Handles things that we need internally, not suited for OSS
custom JSON Logic operators - more on that soon
error reporting and version routing

`x-jsf-*`

JSON Schema Form allows custom keywords
x-jsf-presentation
x-jsf-order
x-jsf-errorMessage
x-jsf-logic

Presentation `x-jsf-presentation`

Input type
Description
Options
File constraints, dates, helper metadata

Conditional fields

if
then
else
allOf

JSON Logic

Cross-field rules
Computed values
Date math
Custom operators

Logical operations

json

{ "==": [1, 1] }// → true

json

{  "or": [    { "==": [{ "var": "country" }, "Vietnam"] },    {      ">=": [        {          "date_difference_in_months": [            { "var": "today" },            { "var": "start_date" }          ]        },        6      ]    }  ]}// true if either: selected country is Vietnam, or: Start date is 6 months away from variable "today"

JSON Logic: Validations

Rule returns true/false
False => field-level error
Error message comes from schema

json

{  "x-jsf-logic": {    "validations": {      "valid_temperature_recording": {        "rule": {          ">": [            { "var": "highest_temperature" },            { "var": "lowest_temperature" }          ]        },        "errorMessage": "Highest must exceed lowest"      }    }  },  "properties": {    "highest_temperature": {      "type": "number",      "x-jsf-logic-validations": ["valid_temperature_recording"]    }  }}

JSON Logic: Computed Values

Derive values from inputs
Recompute on field changes
Drive UX without hardcoded UI logic

json

{  "x-jsf-logic": {    "computedValues": {      "average_temp": {        "rule": {          "/": [            {              "+": [                { "var": "lowest_temperature" },                { "var": "highest_temperature" }              ]            },            2          ]        }      }    }  }}

Match made on the server: JSON Schema Forms

Sreetam Das

Remote

Engineering at Remote

Forms 🖐️

Forms at Remote

The Drift Problem 🖐️

Rules drift. Bugs happen.

Our fix: Single Source of Truth

JSON Schema

HackerNews agrees!

JSON Schema Form

Core API

Architecture Overview

JSON Schema Form Kit

`x-jsf-*`

Presentation `x-jsf-presentation`

Conditional fields

JSON Logic

Logical operations

JSON Logic: Validations

JSON Logic: Computed Values

Live demo

So, why JSF?

Check it out!

What's next?

Thanks!

srtm.fyi/jsf