Skip to main content

​
Overview

The Joyfill Components SDK supports three distinct modes that control how users can interact with your forms: Edit Mode, Fill Mode, and Read-Only Mode.

​
Edit Mode (Default)

Edit Mode (edit) is the default mode that allows full form design, styling, and configuration capabilities. 

 <JoyDoc 
	 doc={document} 
	 onChange={handleChange} 
	 mode="edit" 
 />
Features:
  • Full form design and layout capabilities
  • Field creation, editing, and deletion
  • Field positioning and resizing
  • Form styling and theme customization
  • Page management (create, duplicate, delete)
  • Table and collection field management
  • Formula configuration
  • Field settings and validation rules
  • All interactive design elements are functional

​
Fill Mode

Fill Mode (fill) allows users to input data into pre-configured forms without design capabilities. 
const documentEditor = (
  <JoyDoc
    doc={document}
    onChange={handleChange}
    mode="fill"  // Must be explicitly set
  />
)
Features:
  • Users can input data into all field types
  • File uploads and camera capture are enabled
  • Form validation is active
  • Page navigation is available for multi-page forms
  • Field interactions (focus, blur, change) are tracked
  • All data entry functionality is operational
  • Design elements are hidden or disabled

​
Read-Only Mode

Read-Only Mode (readonly) displays forms for viewing only, preventing any user modifications. 
const documentEditor = (
  <JoyDoc
    doc={document}
    onChange={handleChange}
    mode="readonly"  // Must be explicitly set
  />
)
Features:
  • All fields are disabled for input
  • File uploads and camera capture are disabled
  • Form data is displayed but cannot be modified
  • Page navigation remains functional for multi-page forms
  • Field interactions are limited to viewing
  • All design and editing capabilities are disabled
  • Form validation is not enforced

​
Mode Comparison

FeatureEdit ModeFill ModeRead-Only Mode
Field Creation✅❌❌
Field Editing✅❌❌
Field Positioning✅❌❌
Data Input✅✅❌
File Uploads✅✅❌
Form Validation✅✅❌
Page Management✅❌❌
Formula Configuration✅❌❌
Theme Customization✅❌❌
Field Settings✅❌❌
Page Navigation✅✅✅
Print/Export✅✅✅