docu-form

A schema-driven, document-style form editor for React.

This library provides a GenericEditor component that renders a dynamic form based on a JSON schema. It aims to provide a user experience similar to a word processor, where fields can be edited in-place.

Installation

pnpm add docu-form
# or
npm install docu-form
# or
yarn add docu-form

Basic Usage

First, define a schema for your form:

// my-schema.ts
import { FormSchema } from 'docu-form';

export const mySchema: FormSchema = {
  metadataFields: [
    {
      id: 'status',
      label: 'Status',
      type: 'select',
      options: [
        { label: 'Todo', value: 'todo' },
        { label: 'In Progress', value: 'in-progress' },
        { label: 'Done', value: 'done' },
      ],
    },
  ],
  documentFields: [
    {
      id: 'title',
      level: 'h1',
      placeholder: 'My Document Title',
    },
    {
      id: 'content',
      level: 'p',
      placeholder: 'Start writing here...',
    },
  ],
};

Then, use the GenericEditor in your React application:

// App.tsx
import { useState } from 'react';
import { GenericEditor } from 'docu-form';
import { mySchema } from './my-schema';

// Import the library's CSS for base styling
import 'docu-form/index.css';

function App() {
  const [formData, setFormData] = useState({});

  return (
    <main>
      <GenericEditor 
        schema={mySchema}
        initialData={formData}
        onDataChange={setFormData}
        // Pass your own classes for styling!
        className="bg-white rounded-lg shadow p-8"
      />
    </main>
  );
}

Components & Props

This library exports several components and types for advanced usage:

• GenericEditor: The main component.
• Chip: The component for metadata fields.
• ChipBar: The container for chips.
• TiptapInput: The text editor component.
• FormSchema, DocumentField, MetadataField: The core type definitions.