Two packages, one idea: describe it, don’t draw it

Forms and CRUD views that come out of a description, not a template

react-data-form turns an object into a form that holds its own state, validates, and reports what your API sends back. react-resource-view takes one resource declaration and renders its list, detail, create, edit and delete screens — wired to your API and to the URL.

$ pnpm add react-data-form react-resource-view
2
packages
40+
field controllers
7
layouts
0
column definitions

Written once

One description, every screen

A list has no separate column definition. The fields you describe are the form the reader edits, the columns the table shows and the payload your API receives — so take the description below apart and watch both halves follow.

Live — edit the description

Fields · 4 columns

  • Titletext
  • Authortext
  • Categoryone of five
  • Statusdraft · review · published
  • Minutesnumber
  • Published ondate

The table has no column list of its own. Every switch above moves the form and the list at the same time — because they read the same object.

Read many ways

Seven layouts, one resource

A layout is a line in viewVariants, not a screen you build. Declare several and the reader picks — the filters, the permissions and the forms carry over untouched.

One column per field, editable in place.

Create your own view variantAn eighth layout is one file — three components and a factory. One command writes it where you want it.

Opinionated about description, agnostic about everything else

The URL is the state

Filters, pagination, the chosen layout and the open item all live in the address bar. A shared link reopens exactly what the sender was looking at.

Ports, not assumptions

Neither package knows your router, your API client or your brand. Each touch point is a port with a default, injected once at startup.

API Platform, Strapi, Supabase

A dialect holds what each backend spells differently — pages, filters, envelopes, errors — so one declared resource renders against any of the three, or a fourth you write.

Validation on both sides

A validator per field for the browser, and a mapper that puts a 422 from the server back on the fields that caused it.

One dictionary

Labels go through react-mini-i18n, so your application and the libraries translate from the same place.

Seven layouts, and yours

Table, cards, item list, columns, split, calendar and timeline — declared side by side, switched by the reader. An eighth of your own is one command and one file.

Start with the forms, then declare a resource

The view package builds on the form package, so the documentation reads in that order — but each half stands on its own.

Both are written and maintained by Salvador Cardona — the rest of his work is on the author’s portfolio.