Overview

Joyfill's UI Components library allows developers to leverage isolated functions or build connected flows in their web applications, which expedites the integration process. Each component within Joyfill's UI Components library includes HTML, CSS and JavaScript that developers can drop in and customize to fit the look and feel of their application.

The library comes with a collection of low-code components that solve for a variety of functions and flows including form builder/filler/viewer, template library list, template list, as well as a connected flow for non-self-hosted data implementations.

Each UI Component contains built-in features such as responsive design, custom styling, error handling, and more. These components allow developers to ship more with fewer lines of code— while improving the readability and maintainability of their application’s code.

As the library continues to grow, Joyfill will evaluate adding support for other frameworks and languages based on feedback from the community

Implementation

Please see our JS/React for more detailed instructions per SDK and library usage

1. Include @joyfill/components
2. Export the JoyDoc React component or create a new JS instance of it for plain JS
3. Transpile your data to fit the JoyDoc Spec (optional, only needed if you are hosting your current existing data and do not plan to leverage the Joyfill Storage service)
4. Hook up listeners to events such as on-field changes and on submit from the JoyDoc in order to either store the JoyDoc JSON data while your users fill out the form
5. Respond to the events of on save by generating a downloadable pdf link for your users to download their saved form or fire off a certain forms workflow

// 1. import the JoyDoc
import { JoyDoc } from '@joyfill/components';

// 2. add the component and respond to change handlers
<JoyDoc
  mode="edit"
  doc={data}
  onChange={(params, changes, doc) => {
  	console.log('handle saving or generating a downloadable link');
  }}
  onUploadAsync={({ documentId, target }, fileUploads) => {
	 console.log('upload to your db');
  }
/>

📘

The JoyDoc will vary based on the "mode". This single component can be the drag-n-drag form builder on one page, be the responseive form filler for your users on another, and the readonly/filler in a mobile implementation webview