Forms and app screens, written once as JSON

Describe a page — its fields, its layout, when a field shows or is required — and Fieldia draws it in plain JavaScript, React, Vue or Angular, checks what people enter, and hands the record to your backend.

Get started See the demos

Skin Language

One page, every framework

The page is plain JSON: you can store it, generate it from your backend's own field definitions, or build it in a designer. The same page renders the same way everywhere, because every framework binding is a thin shell around one plain-DOM viewer.

<!-- No build step: one script tag -->
<script src="https://cdn.jsdelivr.net/npm/@fieldia/viewer/bundle/fieldia.js"></script>
<script>
  Fieldia.mountViewer(document.getElementById('app'), {
    page, dataSource: Fieldia.createMemoryDataSource(),
  });
</script>

// React, Vue and Angular: the same page, the same look
import { FieldiaForm } from '@fieldia/react';

<FieldiaForm page={page} dataSource={api} recordId={42} />

What a page can do

Eighteen field types text, numbers, money, dates, choices, ratings, links to other records with search, tags, tables of lines, files, images, formatted text.
Rules in the page invisible, readonly and required take a condition such as role != 'other', checked as people type.
Records and surveys a record page loads, edits and saves one record; a responses page collects answers, and a wizard skips the steps that do not apply.
Business sheets a statusbar, stat buttons, a ribbon, alerts, tabs and a side panel, for the screens of an ERP.
Two skins, four languages underline and outlined; English, Arabic, German and French, with Arabic right to left.
No backend of its own records load and save through a small interface your app implements, so Fieldia fits whatever you already have.

Four rules

The core never touches the DOM. Page format, conditions, validation and record state run in a browser, in Node, or on the server that generates pages.
Fieldia knows no backend. Pages arrive as JSON; records travel through an interface your app implements.
Render once, bind thinly. Fields render in plain DOM, once. A framework binding adds nothing a framework would not need.
A page is data. No functions or components inside a page: buttons name actions, and your app decides what they do.