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
      }}
    />
  );
}

// Option 1: Using CDN (include this script tag in your HTML)
// <script src="https://cdn.jsdelivr.net/npm/@joyfill/components@latest/dist/joyfill.min.js"></script>

// Option 2: Using ES Modules
// import Joyfill from "@joyfill/components/dist/joyfill.min.js";

// Initialize JoyDoc
const container = document.getElementById('joydoc-container');
const myDocument = Joyfill.getDefaultDocument();

Joyfill.JoyDoc(
  container,
  {
    doc: myDocument,
    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
        }
      }}
    />
  );
}

// Option 1: Using CDN (include this script tag in your HTML)
// <script src="https://cdn.jsdelivr.net/npm/@joyfill/components@latest/dist/joyfill.min.js"></script>

// Option 2: Using ES Modules
// import Joyfill from "@joyfill/components/dist/joyfill.min.js";

// Initialize JoyDocExporter
const container = document.getElementById('exporter-container');
const myDocument = Joyfill.getDefaultDocument();

Joyfill.JoyDocExporter(
  container,
  {
    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