@tutim/types

🍓 README

Wizard Form infrastructure for product teams

Headless forms module to create powerful wizards in your web application with ease.

Sandbox Example »

---

🍓 Open source & headless alternative to TypeForm

Building multi-step forms in apps is complicated.

At first, it seems like just throwing a few input fields, but in reality, it's just the beginning.

Tutim gives you your own in-house multi-step form builder that's fully integrated with your component library and design system. Everybody on your team can create, edit, and publish wizards and surveys in your app regardless of their technical background.

This repo is 100% free, and will always remain.

✨ Features

• 🌈 Headless: Default design system that can be replaced with yours
• 💅 Rich form: Multi-step, conditional branching, validations, and more are available out-of-the-box
• 🚀 Performant: Best practices are implemented. Never worry about delays
• 🛠️ No-Code Builder: Let PMs and designers create and change in-app wizards. Stick with React for styling and embedding
• 👨‍💻 Built-in Analytics: Opening rate, drop-offs, conversions. privacy-first (coming soon)
• 📦 Templates: Onboarding, personal details, feedback and more

---

🚀 Getting Started

Explore the docs »

Admin Portal & Builder »

Create your first wizard in 2 minutes, by following these steps:

1. Install tutim React package:

yarn add @tutim/headless @tutim/fields @tutim/types

npm install @tutim/headless @tutim/fields @tutim/types

2. Optional: Create your form schema with Tutim Form Builder

3. Render the wizard:

import { TutimWizard, defaultFields } from '@tutim/fields';
import { FormProvider } from '@tutim/headless';

const config = {
  // Use https://app.tutim.io to create and manage rich schemas with no-code
  fields: [
    { key: 'firstName', label: 'First Name', type: 'text' },
    { key: 'lastName', label: 'Last Name', type: 'text' },
  ],
};

const App = () => {
  return (
    <div className="App">
      <FormProvider fieldComponents={defaultFields}>
        <TutimWizard onSubmit={console.log} config={config} />
      </FormProvider>
    </div>
  );
};

export default App;

4. Output Example:

CustomField

BYOF - Bring Your Own Field. Use Field type to register any type of field. Can be used on FormProvider level for global inputs or withing FieldConfig for local use cases

CustomField is a component that allows you to define custom form fields that can be used in your react application. You can use it to render any type of form field that you want, based on the type specified in the field configuration.

CustomField can be used either globally, by specifying it in the fieldComponents object passed to the FormProvider component, or locally, by specifying the Field prop in the field configuration when creating a form.

import { Field, FieldConfig } from '@tutim/types';

export const CustomField: Field = ({ inputProps, fieldConfig }) => {
  const { value, onChange } = inputProps;
  const onClick = () => onChange(value + 2);
  return (
    <button type="button" onClick={onClick}>
      {fieldConfig.label}: {value}
    </button>
  );
};

export const customFieldConfig: FieldConfig = {
  key: 'clicker',
  label: 'Click Me',
  type: 'custom',
  defaultValue: 0,
  Field: CustomField,
};

FormProvider

FormProvider is a component that allows you to define the form fields that you want to use in your react application. It provides a way to specify the field components that will be used to render the form fields, and allows you to use either the default field components provided by the @tutim/fields library, or your own custom field components.

import { FormProvider } from '@tutim/headless';
import { defaultFields, TutimWizard } from '@tutim/fields';
import { Field, FieldComponents, InputType } from '@tutim/types';

export const CustomField: Field = ({ inputProps, fieldConfig }) => {
  const { value, onChange } = inputProps;
  const onClick = () => onChange(value + 2);
  return (
    <button type="button" onClick={onClick}>
      {fieldConfig.label}: {value}
    </button>
  );
};

const fieldComponents: FieldComponents = {
  ...defaultFields, // optional built in input fields based on MUI
  [InputType.Text]: ({ inputProps }) => <input {...inputProps} />,
  'custom-field': (fieldProps) => <CustomField {...fieldProps} />,
  // add any type of input and reference it by 'type'
};

const App = (): JSX.Element => {
  return (
    <div className="App">
      <FormProvider fieldComponents={fieldComponents}>
        <TutimWizard onSubmit={console.log} config={{ fields: [{ key: 'field1' }] }} />
      </FormProvider>
    </div>
  );
};

export default App;

📜 Wizards

Tutim provides all forms solutions. Through code or drag & drop interface.

💌 Inputs

• [x] All basic (Text, Select, Checkbox, Date...)
• [x] Array & Multi fields
• [x] Object and deep object support
• [ ] Rich input library (coming soon)

📞 Design & Layout

• [x] Simple form layout (one pager)
• [x] Layout and grouping control
• [x] Wizard multi steps
• [ ] DnD builder

😊 Portal

• [x] Generative builder (build wizard from text with AI)
• [x] Simple form builder
• [x] Conditional branching
• [ ] Templates library

☁️ Cloud (closed beta, request early access)

• [x] Manage and serve schemas
• [x] Hosted forms
• [x] Backend support
• [ ] 3rd Party integrations

🤵 Need Help?

We are more than happy to help you.

If you are getting any errors, facing problems, or need a new feature while working on this project -

Join our Discord server and ask for help, or Open an issue

🔗 Links

• Home page
• Admin Portal
• Discord community
• Twitter
• Contribution Guidelines
• Docs
• Support on Product Hunt (follow, we're launching soon!)

💪 By the community, for the community

Powered by tutim.io