{"id":15110364,"url":"https://github.com/tutim-io/tutim","last_synced_at":"2025-04-05T10:09:05.674Z","repository":{"id":152884062,"uuid":"576945711","full_name":"tutim-io/tutim","owner":"tutim-io","description":"The open-source wizard form infrastructure for web applications","archived":false,"fork":false,"pushed_at":"2023-10-05T18:16:06.000Z","size":2139,"stargazers_count":255,"open_issues_count":10,"forks_count":16,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-29T20:33:02.262Z","etag":null,"topics":["builder","form","form-builder","form-validation","forms","headless","javascript","multi-step","multistep","react","react-hooks","reactjs","schema","survey","tailwind","typeform","typescript","wizard","wizard-steps"],"latest_commit_sha":null,"homepage":"https://tutim.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tutim-io.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"contributing.md","funding":null,"license":"LICENSE","code_of_conduct":"code_of_conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-11T13:58:22.000Z","updated_at":"2024-10-27T22:48:14.000Z","dependencies_parsed_at":"2024-09-20T18:11:42.101Z","dependency_job_id":"e6ec85c5-3e31-4654-bc2b-c2401abb47d1","html_url":"https://github.com/tutim-io/tutim","commit_stats":null,"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tutim-io%2Ftutim","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tutim-io%2Ftutim/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tutim-io%2Ftutim/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tutim-io%2Ftutim/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tutim-io","download_url":"https://codeload.github.com/tutim-io/tutim/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247318745,"owners_count":20919484,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["builder","form","form-builder","form-validation","forms","headless","javascript","multi-step","multistep","react","react-hooks","reactjs","schema","survey","tailwind","typeform","typescript","wizard","wizard-steps"],"created_at":"2024-09-25T23:44:32.236Z","updated_at":"2025-04-05T10:09:05.650Z","avatar_url":"https://github.com/tutim-io.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🍓 README\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://tutim.io/developers\" target=\"_blank\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://user-images.githubusercontent.com/29614540/235614391-38e44c1f-047f-4a7f-aa32-c914fbc1725b.png\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/29614540/235613969-cb3aeb2b-ba4a-4468-a2af-81c036eb66cf.png\" width=\"320\" alt=\"Logo\"/\u003e\n  \u003c/picture\u003e\n\n\n  \u003cp align=\"center\"\u003e\n    \u003ch3\u003eThe headless infrastructure for multi-step forms\u003c/h3\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://tutim.io\"\u003e\u003cstrong\u003eLearn more »\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://tutim.io\"\u003eWebsite\u003c/a\u003e\n    ·\n    \u003ca href=\"https://discord.tutim.io\"\u003eDiscord\u003c/a\u003e\n    ·\n    \u003ca href=\"https://app.tutim.io\"\u003eCloud (app)\u003c/a\u003e\n    ·\n    \u003ca href=\"https://codesandbox.io/s/tutim-example-config-custom-field-vo64ym?file=/src/App.tsx\"\u003eSandbox Example\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n\n[![MIT License](https://img.shields.io/github/license/tutim-io/tutim)](https://github.com/tutim-io/tutim/blob/main/LICENSE) [![Number of GitHub stars](https://img.shields.io/github/stars/tutim-io/tutim?logo=github)](https://github.com/tutim-io/tutim/stargazers) [![Discord is Live](https://img.shields.io/badge/Discord-Live-green?logo=discord\u0026logoColor=%23fff)](https://discord.tutim.io) [![Docs are updated](https://img.shields.io/badge/docs-updated-green?color=blue)](https://docs.tutim.io) [![Product Hunt](https://img.shields.io/badge/Product%20Hunt-Launch%20soon-orange?logo=producthunt\u0026logoColor=%23fff)](https://www.producthunt.com/@leetwito)\n \n \n[![Demo](https://res.cloudinary.com/tutim/image/upload/v1682951365/code_demo_2_s0jsjh.gif)](https://www.tutim.io/developers)\n\n  \n\u003c/div\u003e\n\n---\n\n### 🍓 Open source \u0026 headless alternative to TypeForm\n\nBuild beautiful and complex forms effortlessly.\n\nTutim 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.\n\nThis repo is 100% free, and will always remain.\n\n### ✨ Features\n\n- 🌈 **Headless:** Default design system that can be replaced with yours\n- 💌 **API first:** Build, manage and serve forms with our API\n- 💅 **Rich form:** Multi-step, conditional branching, validations, and more are available out-of-the-box\n- 🚀 **Performant:** Best practices are implemented. Never worry about delays\n- 🛠️ **No-Code Builder:** Let PMs and designers create and change in-app wizards. Stick with React for styling and embedding\n- 👨‍💻 **Built-in Analytics:** Opening rate, drop-offs, conversions. privacy-first `(coming soon)`\n- 📦 **Templates:** Onboarding, personal details, feedback and more\n\n---\n\n## 🚀 Getting Started\n\n[**Explore the docs »**](https://docs.tutim.io)\n\n[**Admin Portal \u0026 Builder »**](https://app.tutim.io/)\n\nCreate your first wizard in 2 minutes with Tutim default components\n\n\u003ca href=\"https://tutim.io/developers\" target=\"_blank\"\u003e\n\u003cimg src=\"https://res.cloudinary.com/tutim/image/upload/v1682950119/output_xmopce.png\" width=\"640\" alt=\"Output example\"/\u003e\n\u003c/a\u003e\n\n### 1\\. Install tutim React package:\n\n```bash\nyarn add @tutim/headless @tutim/fields @tutim/types\n```\n\n```bash\nnpm install @tutim/headless @tutim/fields @tutim/types\n```\n\n### 2\\. Render the wizard:\n\n```jsx\nimport { defaultFields } from '@tutim/fields';\nimport { TutimWizard, TutimProvider } from '@tutim/headless';\n\nconst config = {\n  // Use https://app.tutim.io to create and manage rich schemas with no-code\n  fields: [\n    { key: 'firstName', label: 'First Name', type: 'text' },\n    { key: 'lastName', label: 'Last Name', type: 'text' },\n  ],\n};\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cTutimProvider fieldComponents={defaultFields}\u003e\n        \u003cTutimWizard onSubmit={console.log} config={config} /\u003e\n      \u003c/TutimProvider\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n### 3\\. Output Example:\n\n\u003ca href=\"https://tutim.io/developers\" target=\"_blank\"\u003e\n\u003cimg src=\"https://res.cloudinary.com/tutim/image/upload/v1682950119/output_xmopce.png\" width=\"320\" alt=\"Output example\"/\u003e\n\u003c/a\u003e\n\n### 4\\. Customize schema\nBuild your form schema with [Tutim Form Builder](https://app.tutim.io/) or follow [Form Config Docs](https://docs.tutim.io/api-reference/form-config)\n\n### 5\\. Customize components\n#### [CustomField](https://docs.tutim.io/react-sdk/customfield)\n\nBYOF - Bring Your Own Field. Use `Field` type to register any type of field. Can be used on `TutimProvider` level for global inputs or withing `FieldConfig` for local use cases\n\n`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.\n\n`CustomField` can be used either globally, by specifying it in the `fieldComponents` object passed to the `TutimProvider` component, or locally, by specifying the `Field` prop in the field configuration when creating a form.\n\n```tsx\nimport { Field, FieldConfig } from '@tutim/types';\n\nexport const CustomField: Field = ({ inputProps, fieldConfig }) =\u003e {\n  const { value, onChange } = inputProps;\n  const onClick = () =\u003e onChange(value + 2);\n  return (\n    \u003cbutton type=\"button\" onClick={onClick}\u003e\n      {fieldConfig.label}: {value}\n    \u003c/button\u003e\n  );\n};\n\nexport const customFieldConfig: FieldConfig = {\n  key: 'clicker',\n  label: 'Click Me',\n  type: 'custom',\n  defaultValue: 0,\n  Field: CustomField,\n};\n```\n\n#### [TutimProvider](https://docs.tutim.io/react-sdk/formprovider)\n\n`TutimProvider` 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.\n\n```tsx\nimport { TutimWizard, TutimProvider } from '@tutim/headless';\nimport { defaultFields } from '@tutim/fields';\nimport { Field, FieldComponents, InputType } from '@tutim/types';\n\nexport const CustomField: Field = ({ inputProps, fieldConfig }) =\u003e {\n  const { value, onChange } = inputProps;\n  const onClick = () =\u003e onChange(value + 2);\n  return (\n    \u003cbutton type=\"button\" onClick={onClick}\u003e\n      {fieldConfig.label}: {value}\n    \u003c/button\u003e\n  );\n};\n\nconst fieldComponents: FieldComponents = {\n  ...defaultFields, // optional built in input fields based on MUI\n  [InputType.Text]: ({ inputProps }) =\u003e \u003cinput {...inputProps} /\u003e,\n  'custom-field': (fieldProps) =\u003e \u003cCustomField {...fieldProps} /\u003e,\n  // add any type of input and reference it by 'type'\n};\n\nconst App = (): JSX.Element =\u003e {\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cTutimProvider fieldComponents={fieldComponents}\u003e\n        \u003cTutimWizard onSubmit={console.log} config={{ fields: [{ key: 'field1' }] }} /\u003e\n      \u003c/TutimProvider\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n### 📜 Wizards\n\nTutim provides all forms features, through code or drag \u0026 drop interface.\n\n**💌 Inputs**\n\n- [x] All basic (Text, Select, Checkbox, Date...)\n- [x] Array \u0026 Multi fields\n- [x] Object and deep object support\n- [ ] Rich input library (coming soon)\n\n**📞 Design \u0026 Layout**\n\n- [x] Simple form layout (one pager)\n- [x] Layout and grouping control\n- [x] Wizard multi steps\n- [ ] DnD builder\n\n**😊 Portal**\n\n- [x] Generative builder (build wizard from text with AI)\n- [x] Simple form builder\n- [x] Conditional branching\n- [ ] Templates library\n\n**☁️ Cloud (**[**closed beta, request early access**](https://discord.tutim.io)**)**\n\n- [x] Manage and serve schemas\n- [x] Hosted forms\n- [x] Backend support\n- [ ] 3rd Party integrations\n\n### 🤵 Need Help?\n\nWe are more than happy to help you.\n\nIf you are getting any errors, facing problems, or need a new feature while working on this project -\n\nJoin our [Discord server](https://discord.tutim.io) and ask for help, or [Open an issue](https://github.com/tutim-io/tutim/issues/new/choose)\n\n### 🔗 Links\n\n- [Home page](https://tutim.io)\n- [Admin Portal](https://app.tutim.io)\n- [Discord community](https://discord.tutim.io)\n- [Twitter](https://twitter.com/Tutim_io)\n- [Contribution Guidelines](https://tutim.io/contribute)\n- [Docs](https://docs.tutim.io)\n- [Support on Product Hunt (follow, we're launching soon!)](https://www.producthunt.com/@leetwito)\n\n### 💪 By the community, for the community\n\n![](https://contrib.rocks/image?repo=tutim-io/tutim)\n\nPowered by [tutim.io](https://tutim.io)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftutim-io%2Ftutim","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftutim-io%2Ftutim","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftutim-io%2Ftutim/lists"}