Templates

2 min read

Templates are pre-built scenes that users can load and customize.

Loading Templates

// Load by ID
app.loadTemplate('motivational-quote');

Template Structure

{
  id: 'motivational-quote',
  name: 'Motivational Quote',
  category: 'social-media',
  thumbnail: 'path/to/thumb.png',

  data: {
    backgroundGenerator: 'drawSunburst',
    generatorParams: {
      rayCount: 16,
      colors: ['#FF6B6B', '#4ECDC4']
    },
    backgroundColor: '#1a1a2e',
    items: [
      {
        type: 'text',
        content: 'DREAM BIG',
        position: [540, 800],
        fontSize: 72,
        fontColor: '#ffffff',
        animation: { type: 'pulse', speed: 1 }
      }
    ]
  }
}

Creating Templates

Save current work as a template:

const template = {
  id: 'my-template',
  name: 'My Custom Template',
  data: app.sceneManager.exportScene()
};

Template Categories

  • social-media - Instagram, Twitter, etc.
  • presentation - Slides and decks
  • animation - Animated graphics
  • custom - User-created

Template Versioning

Templates include version info for compatibility:

{
  version: '0.2',
  // ...template data
}

Custom Generators in Templates

Templates can reference custom generators:

{
  data: {
    backgroundGenerator: 'myCustomGenerator',
    generatorParams: { /* params */ }
  }
}

If a generator doesn’t exist, a fallback is used.

Template Validation

function validateTemplate(template) {
  const limits = {
    maxItems: 500,
    maxPathSegments: 10000
  };

  if (template.data?.items?.length > limits.maxItems) {
    throw new Error('Too many items');
  }

  return true;
}