Skip to main content

Getting started

Main files​

raffaello/
    ├── raffaello.min.js
    └── raffaello.min.css

RAFFAELLO has 2 main files, raffaello.min.js and raffaello.min.css.

How to use RAFFAELLO​

Reference the main files in the <head> section of you HTML page:

<script src="https://cdn.jsdelivr.net/npm/raffaello@1.4.0/dist/raffaello.min.js" data-license="abc123"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/raffaello@1.4.0/dist/raffaello.min.css">
✅ Current version

Current running version is 1.4.0. We recommend using the latest for up to date performances.

Dependencies​

RAFFAELLO.js has a two depedencies:

  • cropper.js, a custom library by Fengyuan Chen. This library builds the UI to allow the user to crop the input images.
  • mediabunny, a library by Vanilagy. This library is used to read / encode mp4 videos, to allow using video as inputs in RAFFAELLO.

The dependencies are already bundled within the .min.js and .min.css files.

Basic usage​

The typical worklfow to use RAFFAELLO is:

  1. Load RAFFAELLO in your HTML.
  2. Add all the necessary Inputs in your HTML page.
  3. Add a JS <script> or load it. In this script you need to
    • Setup an instance of RAFFAELLO, which is equivalent to declaring the final Canvas.
    • Link all the HTML Inputs to the JS variables to make the images.
    • Draw on the canvas, with successives Layers.
    • Link the Inputs changes to specific Layers to be redrawn.

Next we will look at the basic sctructure you should follow to create your RAFFAELLO templates 🚀