Joyfill's Embeddable Web Component allows developers to add all the power of our Drag-and-Drop Builder, Fillable Forms and PDFs, Form Previewer, and more quickly and easily to their web application.

Step 1: Install Joyfill Components

Add Joyfill Components JS Library your preferred way.

Using a package manager

npm install @joyfill/components

yarn add @joyfill/components

Step 2: Embedding the Component

React Example

import React from 'react';
import joyDocJSON from './joyDocJSON.json';

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

// 2. Utilize the JoyDoc
const App = () => {
  return (
    <JoyDoc
      mode="edit"
      doc={joyDocJSON}
      onChange={(params, changes, doc) => console.log(doc)}
    />
  );

}

export default App;

export default {
  "name": "JoyDoc",
  "files": [
    {
      "_id": "file_1638ca7c8880dfc1bca968be0",
      "pages": [
        {
          "_id": "page_1638ca7c8880dfc1bca968be0",
          "name": "Primary Page",
          "width": 816,
          "height": 1056,
          "cols": 4,
          "rowHeight": 1,
          "layout": "grid",
          "presentation": "normal",
          "fields": [
            {
              "_id": "field_1638ca7c8880dfc1bca",
              "type": "text",
          		"displayType": "original",
              "title": "First Name",
              "value": "Joyfill",
              "x": 0,
              "y": 0,
              "width": 2,
              "height": 60,
              "fontSize": 14,
              "fontWeight": "bold",
              "fontColor": "#738FA7"
            },
            {
              "_id": "field_1638ca7c8880dfc1bca22",
              "type": "text",
              "displayType": "original",
              "title": "Last Name",
              "value": "Rocks",
              "x": 2,
              "y": 0,
              "width": 2,
              "height": 60,
              "fontSize": 14,
              "fontWeight": "bold",
              "fontColor": "#0E86D4"
            }
          ]
        }
      ]
    }
  ]
}

See Full React Example: React Guide

Vanilla JS Example

Coming soon!

Common Component Properties

Below are a couple the most popular embeddable component properties to get you started with the Web components.

Name	Type	Description
mode	String ('edit', 'fill', 'readonly')	Required. Specifies what display mode the component should be in. Learn more about modes here: https://docs.joyfill.io/docs/modes
doc	Object	The default JoyDoc JSON starting object to load into the component view. Must be in the JoyDoc JSON data structure. Learn more about JoyDoc JSON here: https://docs.joyfill.io/docs/schema-json
onChange	Function	Event listener for any style, settings, layout, or value changes across `edit` and `fill` modes.

See Full Properties List