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,requiredConditional logic with
allOf,if,then
HackerNews agrees!

JSON Schema Form
Headless
Schema in
Fields out
Validation out
Core API
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-presentationx-jsf-orderx-jsf-errorMessagex-jsf-logic
Presentation x-jsf-presentation
Input type
Description
Options
File constraints, dates, helper metadata
Conditional fields
ifthenelseallOf
JSON Logic
Cross-field rules
Computed values
Date math
Custom operators
Logical operations
{ "==": [1, 1] }// → true
{ "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
{ "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
{ "x-jsf-logic": { "computedValues": { "average_temp": { "rule": { "/": [ { "+": [ { "var": "lowest_temperature" }, { "var": "highest_temperature" } ] }, 2 ] } } } }}
Live demo
So, why JSF?
Backend as author
UI as consumer
Can be extended
What's next?
React Nexus: talking about TanStack Start!