Introduction

A comprehensive guide to the Mantlz form solution platform

Introduction to Mantlz SDK

Mantlz is a powerful form management SDK for React applications that provides a complete solution for building and managing forms. It offers a structured form building system with predefined field types, extensive customization options, and a seamless developer experience.

Key Features

Form Management

  • Predefined Field Types: Build forms using our set of validated field types
  • Form Validation: Built-in validation support using Zod
  • Error Handling: Comprehensive error handling with toast notifications
  • Theme System: Multiple built-in themes with customization options
  • TypeScript Support: Full TypeScript support with type definitions

Getting Started

To start using Mantlz in your project:

npm install @mantlz/sdk
# or
yarn add @mantlz/sdk
# or
pnpm add @mantlz/sdk

Basic Usage

import { MantlzProvider, Mantlz } from '@mantlz/sdk';

function App() {
  return (
    <MantlzProvider apiKey="your_api_key">
      <Mantlz 
        formId="your_form_id"
        theme="modern"
      />
    </MantlzProvider>
  );
}

Form Validation

Mantlz uses Zod for form validation with predefined validation rules for each field type:

const validation = {
  name: z.string().min(1, 'Name is required'),
  email: z.string().email('Invalid email address'),
  message: z.string().min(10, 'Message must be at least 10 characters')
};

Error Handling

The SDK provides comprehensive error handling:

<Mantlz 
  formId="your_form_id"
/>

Theme Customization

Choose from built-in themes or customize the appearance:

<Mantlz 
  formId="your_form_id"
  theme="modern"
/>

Next Steps