React

Tutim: Open-source Low-code Solution for Simplifying Form Management for Developers

Hazem Abbas

Jul 24, 2024 — 3 min read

Tutim is an open-source form management library that takes the hassle out of handling forms. Built with TypeScript, it offers a robust and flexible solution for managing complex forms across web applications.

Whether you’re dealing with a simple contact form or a multi-step survey, Tutim’s got you covered.

Features

1- Build with Schema

One of the standout features of Tutim is its ease of integration. It seamlessly fits into existing projects, making it a versatile choice for developers. With Tutim, you can define your form schema in a straightforward manner, ensuring consistency and reducing errors. This tool also supports dynamic form generation, meaning you can create forms on the fly based on specific user inputs or data conditions.

2- Highly Customizable

But what truly sets Tutim apart is its focus on customization. Developers can tailor forms to meet the unique needs of their projects, from adjusting the layout and styling to adding custom validation rules.

This flexibility ensures that the forms not only function well but also align with the overall design and user experience of the application.

3- Better Validation and State Management

Another notable feature is Tutim’s ability to handle form state management efficiently.

It provides built-in methods to track form state, manage validation, and handle form submissions. This means less boilerplate code and more focus on building the core functionalities of your application.

4- Open-source with a strong Community

In addition, Tutim's open-source nature means it's constantly evolving with contributions from the community.

This collaborative approach ensures that the library stays up-to-date with the latest trends and best practices in web development.

Other Awesome Features

🌈 Headless: Default design system that can be replaced with yours
💌 API first: Build, manage and serve forms with our API
💅 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
Built-in support for Custom fields

Wizards

Tutim provides all forms features, through code or drag & drop interface.

💌 Inputs

All basic (Text, Select, Checkbox, Date...)
Array & Multi fields
Object and deep object support

📞 Design & Layout

Simple form layout (one pager)
Layout and grouping control
Wizard multi steps

😊 Portal

Generative builder (build wizard from text with AI)
Simple form builder
Conditional branching

☁️ Cloud (closed beta, request early access)

Manage and serve schemas
Hosted forms
Backend support

How to use with React?

Install with NPM or YARN

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

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

Usage

import { defaultFields } from '@tutim/fields';
import { TutimWizard, TutimProvider } 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">
      <TutimProvider fieldComponents={defaultFields}>
        <TutimWizard onSubmit={console.log} config={config} />
      </TutimProvider>
    </div>
  );
};

export default App;

License

MIT License

Resources & Downloads

Source-code and download

Tutim: Open-source Low-code Solution for Simplifying Form Management for Developers

Hazem Abbas