Skip to main content

​
Core Components

Components

JoyDoc and JoyDocExporter components

Functions

PublicAPI utility functions

​
Quick Reference

​
JoyDoc Component

The main form builder component for creating and editing JoyDoc forms. 
import { JoyDoc, getDefaultDocument } from '@joyfill/components';

function App() {
  return (
    <JoyDoc
      doc={getDefaultDocument()}
      mode="edit"
      view="desktop"
      onChange={(changelogs, doc) => console.log('Document updated:', doc)}
      features={{
        validateSchema: true,
        readableIds: true
      }}
    />
  );
}
Key Props:
  • doc - The JoyDoc document object containing form structure and data
  • mode - Display mode: ‘edit’, ‘view’, or ‘preview’
  • onChange - Callback fired when document changes
  • features - Feature flags for enabling/disabling functionality

​
JoyDocExporter Component

PDF export component for rendering JoyDoc forms as PDF-ready layouts. 
import { JoyDocExporter, getDefaultDocument } from '@joyfill/components';

function App() {
  const myDocument = getDefaultDocument();
  return (
    <JoyDocExporter
      doc={myDocument}
      config={{
        page: {
          height: 1056,
          width: 816,
          padding: 20
        }
      }}
      theme={{
        fontFamily: 'sans-serif',
        field: {
          margin: 4
        }
      }}
    />
  );
}
Note: For JavaScript usage, you must import from dist/joyfill.min.js because it’s a UMD bundle that includes React and provides browser-friendly wrapper functions. The main package exports (@joyfill/components) are React components that require React as a peer dependency.

​
Common Patterns

​
Creating a New Document

import { getDefaultDocument } from '@joyfill/components';

const newDoc = getDefaultDocument();
console.log('Document ID:', newDoc._id);

​
Duplicating a Template

import { duplicate } from '@joyfill/components';

const copy = duplicate(template, { name: "Template Copy" });

​
Validating a Document

import { validator, validateSchema } from '@joyfill/components';

// Field validation
const result = validator(doc, { view: 'desktop' });

// Schema validation
const schemaError = validateSchema(doc);
if (schemaError) {
  console.error('Schema validation failed:', schemaError.message);
}

​
Next Steps

Components Reference

Complete component documentation

Functions Reference

Detailed function documentation