Table of Contents

  1. Introduction
  2. Getting Started
  3. Yo! Commands
  4. Use Cases
  5. API & Helpers

Introduction

Per Project Scripting is a powerful feature that allows you to embed JavaScript directly into your Yo! Draw projects. This script is saved with your project, travels with it, and can be executed anytime to perform custom actions, automate tasks, or create complex interactions.

YoCommands are special functions you define in your project script that become instantly accessible through the Yo! Bar (the Ctrl+/ command palette). This turns your custom scripts into reusable, easy-to-access commands.

Together, these features transform Yo! Draw from a design tool into a creative development environment.

Getting Started

You can access the scripting panel by clicking the Project Script button in the toolbar. This opens a modal with a code editor where you can write and manage your script.

Available Variables

Your script has access to the global Yo! Draw environment, including:

  • canvas: The main Fabric.js canvas instance.
  • fabric: The Fabric.js library.
  • obj: The currently selected object (if any).
  • animState: The state of the animation system.

Yo! Commands

YoCommands are the bridge between your script and the Yo! Draw UI. By adding a special comment block above a function, you make it discoverable in the Yo! Bar.

Format

To declare a YoCommand, use this format: 

/*! @YoCommand
 * name: Your Command Name
 * description: A brief explanation of what it does.
 */
function yourFunctionName() {
 // Your code here
}

Example: Style All Buttons

This command finds all objects with the class "button" and applies a consistent style. 

/*! @YoCommand
 * name: Style All Buttons
 * description: Applies a blue, rounded style to all objects with the 'button' class.
 */
function styleButtons() {
 const buttons = getObjectsByClass('button');

 if (buttons.length === 0) {
 showDialog('Notice', 'No objects with class "button" found!');
 return;
 }

 buttons.forEach(btn => {
 btn.set({
 fill: '#0066cc',
 rx: 10, // Corner radius
 ry: 10,
 stroke: '#004080',
 strokeWidth: 2
 });
 });

 canvas.renderAll();
 saveHistory();
 showDialog('Success', `Styled ${buttons.length} buttons!`);
}

To use this, add the "button" class to your rectangle objects in the properties panel, then run "Style All Buttons" from the Yo! Bar.

Use Cases

Create Mini-Games & Interactive Content

With project scripting, you can move beyond static designs and build simple games or interactive experiences.

Example: A Simple Clicker Game

  1. Create a circle and give it the ID clickable_target.
  2. Create a text object and give it the ID score_text.
  3. Add the following project script:
let score = 0;
const target = getObjectById('clickable_target');
const scoreText = getObjectById('score_text');

if (target && scoreText) {
 // Initialize
 scoreText.set('text', 'Score: 0');

 // Add click event
 target.on('mousedown', () => {
 score++;
 scoreText.set('text', 'Score: ' + score);

 // Move target to a random position
 const newX = Math.random() * (canvas.width - target.width);
 const newY = Math.random() * (canvas.height - target.height);
 target.set({ left: newX, top: newY });

 canvas.renderAll();
 });
}

Export as a Playable Ad with Oscar HTML 5

Yo! Draw can package your interactive project into a single, self-contained HTML file. This is perfect for creating playable ads, web interactives, or simple browser games.

The Oscar HTML 5 export option bundles:

  • The Yo! Draw player runtime.
  • Your canvas objects and assets.
  • Your complete project script.

This creates a dependency-free .html file that can be run in any modern web browser, making it easy to share or embed your creation. To use it, simply go to Export -> Export as Oscar HTML 5.

API & Helpers

Your scripts can use all standard Fabric.js methods. Yo! Draw also provides these global helper functions:

  • getObjectById('id'): Get an object by its custom ID.
  • getObjectsByClass('class'): Get all objects with a specific class.
  • showDialog('Title', 'Message'): Display a simple message.
  • showPrompt('Title', 'Message', 'Default'): Get text input from the user.
  • showConfirm('Title', 'Message'): Ask for a Yes/No confirmation.
  • setTimeoutTracked() / setIntervalTracked(): Timers that are automatically cleaned up.

For a full list of available functions and examples, please see the Writing Plugins documentation.