Prerequisites

To get the most out of this guide, you’ll need the following:

Complete the Setup Guide
A User Access Token (see setup guide)
A Template Identifier (see setup guide)

Requirements

Review SDK README

1. Install

Using a package manager

npm install --save @joyfill/components

yarn add @joyfill/components

Using a CDN

https://cdn.jsdelivr.net/npm/@joyfill/components@latest/dist/joyfill.min.js

2. Usage

Add the Template identifier and User Access Token from the previous setup step to the index.js file.
Add the User Access Token from the preview setup step to the api.js file.
❗️Important Note: ensure you use the full import path if you're using JS modules and not the CDN. Full path import Joyfill from '@joyfill/components/dist/joyfill.min.js'

import Joyfill from "@joyfill/components/dist/joyfill.min.js";
import { retrieveTemplate } from './api.js';

const initJoyfill = async () => {

  const identifier = '<REPLACE_YOUR_TEMPLATE_IDENTIFIER>';

  const template = await retrieveTemplate(identifier);

  Joyfill.JoyDoc(
    document.getElementById('joyfill'),
    {
      doc: template,
      mode: 'edit',
      onChange: (changelogs, doc) => {

        /**
         * Changelogs represent the individual change that was made
         * Data represents the entire data structure with all new changes applied.
         */
        console.log('onChange: ', changelogs, doc);
      }
    }
  );

}

initJoyfill();

<!DOCTYPE html>
<html>
  <head>
    <title>Joyfill for Javascript Example</title>
    <base href=".">
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="joyfill"></div>
    <script type="module" src="./index.js"></script>
  </body>
</html>

const userAccessToken = "<REPLACE_USER_ACCESS_TOKEN>";
const apiBaseUrl = "https://api-joy.joyfill.io";

export const retrieveTemplate = async (identifier) => {

  //See API Doc Here: https://docs.joyfill.io/reference/retrieve-a-template
  const response = await fetch(`${apiBaseUrl}/v1/templates/${identifier}`, {
    method: 'GET',
    mode: 'cors',
    headers: {
      Authorization: `Bearer $USERACCESSTOKEN`,
      'Content-Type': 'application/json'
    },
  });

  const data = await response.json();
  return data;
}

3. Try it yourself

If you’re looking for a full react example project that shows many more of the Joyfill SDK capabilities and workflows then head over to our full example project and try it for yourself.