Drag-and-drop visual builder covering the full feature surface: 24+ component types, multi-rule conditions, validation, calculations, and reference markup.
Power users and dedicated form designers.
@sonata-innovations/fiber-fbt ↗Open to conversations
Fiber
A schema-driven form builder & render engine built at Sonata Innovations.
What it is
Fiber is a system for building and rendering data-collection forms. It splits authoring from rendering: two builder libraries produce a plain JSON document — a Flow — and a separate render engine consumes it. All three are standard React components, not iframes or external services, and embed directly into a parent application with full control over styling, data flow, and lifecycle.
The two builders — FBT and FBTL — produce the same Flow schema, so any flow is portable between them, and the render engine — FBRE — renders either identically.
The problem it solves
Forms are everywhere, and building them by hand is repetitive work that rarely pays off for the engineers doing it. Fiber separates the concern: non-technical authors build flows visually, developers wire the render engine into their app, and the JSON in between is the only contract that matters. A clinician or teacher can update a form and see it live, without a deploy.
On the engineering side: the Flow JSON is the single source of truth. It can be stored in any database, versioned like source, sent over the wire, diffed, and hand-edited when needed. Validation, conditional visibility, and cross-field references are all declarative inside it.
Three libraries, one schema
A stripped-down, end-user-friendly builder designed to be embedded in parent apps so non-technical users can author their own flows. Preserves advanced properties on load without editing them.
Non-technical end users of the parent app.
@sonata-innovations/fiber-fbtl ↗Consumes Flow JSON, renders the interactive form screen-by-screen, and emits collected FlowData back to the parent application. Supports local, remote, and fully server-driven rendering modes.
Anywhere a flow needs to be rendered.
@sonata-innovations/fiber-fbre ↗Live demos
All three libraries run in sandboxes on the Sonata Innovations demo site. Open any one directly:
npm packages
All @sonata-innovations/* packages are published to the public npm registry. No private registry configuration required.
- Render engine — consumes Flow JSON, renders forms, emits FlowData.
@sonata-innovations/fiber-fbre↗ - Full-featured drag-and-drop builder.
@sonata-innovations/fiber-fbt↗ - Lite builder for non-technical end users.
@sonata-innovations/fiber-fbtl↗ - Shared TypeScript types for the Flow schema.
@sonata-innovations/fiber-types↗ - Shared runtime utilities used across the engine and builders.
@sonata-innovations/fiber-shared↗
Browse them all at npmjs.com/~brandonavery-sonata.
Install
# Render a form
npm install @sonata-innovations/fiber-fbre
# Author + render (power users)
npm install @sonata-innovations/fiber-fbt @sonata-innovations/fiber-fbre
# Author + render (end users)
npm install @sonata-innovations/fiber-fbtl @sonata-innovations/fiber-fbre
Styles ship separately:
import "@sonata-innovations/fiber-fbre/styles".
Peer deps: React 18 or 19.