Getting started

@tsed/react-formio is a React library for rendering out forms based on the Form.io platform.

This module is based on the original react-formio and add extra features listed below.

Features

Many components are provided to build your own backoffice based on Formio.js API. Each link opens the component in Storybook:

• ActionsTable,
• FormAccess,
• FormAction,
• Form,
• FormBuilder,
• FormEdit,
• FormsTable,
• InputTags,
• InputText,
• Pagination,
• Select: Choicejs, HTML5 or ReactSelect,
• SubmissionsTable.
• Table,
• Predefined Reducers for Actions, Action, Form, Forms, Submission, Submissions, etc...,
• TypeScript support.
• Tailwind support.

Install

@tsed/react-formio can be used on the server, or bundled for the client using an npm-compatible packaging system such as Vite, webpack or Rollup.

npm install @formio/js --save // Install formiojs since it is a peerDependency
npm install @tsed/react-formio react-table --save

Migrate to v2

If you use redux actions with v2, you have to install @tsed/redux-formio-stores and replace your imports:

- import { defaultFormioReducer, formsReducer } from "@tsed/react-formio";
+ import { defaultFormioReducer, formsReducer } from "@tsed/react-formio-stores";

Migrate to v3

See the v2 to v3 migration guide for the full upgrade path. Highlights:

• ESM-only outputs – the package now ships ESM bundles exclusively. Update bundlers/tests and import components from their atomic paths (e.g. @tsed/react-formio/organisms/form/Form). Use import "@tsed/react-formio/all" only when you need legacy side-effects.
• Tailwind 3 baseline – upgrade to Tailwind ≥3.3 and install @tsed/tailwind-formio@^3; v2 tokens are removed.
• Store packages removed – uninstall @tsed/react-formio-stores, @tsed/redux-utils, and @tsed/react-formio-container. Replace them with the provided hooks (useForm, useFormioContext, useFormBuilder) or your own state layer.
• Tables migrated to TanStack – if you rely on the Table component or UseTableProps, read the Table & useTable specifics for column definitions, prop mapping, and TanStack-only requirements.
• New peer dependencies – install @formio/choices.js, @tanstack/react-table, react-select, react-table, and use-debounce.

Example import change:

- import { Form } from "@tsed/react-formio";
+ import { Form } from "@tsed/react-formio/organisms/form/Form";

Usage

import React from "react";
import "@tsed/react-formio/all"; // load all library components
import { FormBuilder } from "@tsed/react-formio/organisms/form/builder/FormBuilder";

function App() {
  return (
    <div className='App'>
      <FormBuilder display={"form"} components={[/**/]} />
    </div>
  );
}

export default App;

Live exampleOpen in Storybook ↗

Registering react components

See Register react component documentation.

Optimize your bundle size

See Optimize your bundle size documentation.