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

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

GitHub - tutim-io/tutim: The open-source wizard form infrastructure for web applications

The open-source wizard form infrastructure for web applications - tutim-io/tutim

GitHubtutim-io