Templates

Start designs quickly with built-in templates or save your own designs as reusable templates. The template system includes 8 pre-designed templates across 4 categories.

Built-in Templates

The editor ships with 8 templates organized into 4 categories:

Category	Templates	Canvas Size
Social Media	Instagram Post, Instagram Story	1080x1080, 1080x1920
Marketing	Sale Banner, Event Flyer	1200x628, 1080x1080
Business	Business Card, Presentation Slide	1050x600, 1920x1080
Minimal	Quote Card, Photo Frame	1080x1080, 1080x1080

// Get all built-in templates
const templates = engine.getTemplateManager().getTemplates();
// Returns: Array<Template>

// Filter by category
const socialTemplates = templates.filter(t => t.category === 'Social Media');
const marketingTemplates = templates.filter(t => t.category === 'Marketing');
const businessTemplates = templates.filter(t => t.category === 'Business');
const minimalTemplates = templates.filter(t => t.category === 'Minimal');

Applying Templates

Apply a template to load its content onto the canvas. This replaces all objects on the current page.

// Apply a template to the current page
// WARNING: this replaces all content on the current page
await engine.getTemplateManager().applyTemplate(templateId);

// Apply to a new page instead
const pm = engine.getPageManager();
await pm.addPage();
await engine.getTemplateManager().applyTemplate(templateId);

⚠️

Destructive operation

Applying a template replaces all content on the current page. If you want to preserve existing work, add a new page first or create a version snapshot before applying.

Saving as Template

Save any design as a reusable template. Custom templates appear alongside built-in ones in the Template Panel.

// Save the current design as a custom template
const tm = engine.getTemplateManager();

tm.saveAsTemplate({
  name: 'My Brand Template',
  category: 'Custom',
  description: 'Company branded social media post',
  tags: ['brand', 'social', 'instagram'],
});

// The current canvas state is serialized and stored as a template

TemplateManager API

const tm = engine.getTemplateManager();

// Get all templates (built-in + custom)
const all = tm.getTemplates();

// Get template categories
const categories = tm.getCategories();
// Returns: ['Social Media', 'Marketing', 'Business', 'Minimal', 'Custom']

// Search templates
const results = tm.searchTemplates('instagram');

// Remove a custom template
tm.removeTemplate(templateId);

// Import templates from JSON
tm.importTemplates(jsonData);

// Export custom templates
const exported = tm.exportTemplates();

TemplateManager Methods

Name	Type	Default	Description
`getTemplates()`	`Template[]`	—	Get all templates (built-in and custom)
`getCategories()`	`string[]`	—	Get unique category names
`searchTemplates(query)`	`Template[]`	—	Search templates by name, description, or tags
`applyTemplate(id)`	`Promise<void>`	—	Load a template onto the current canvas page
`saveAsTemplate(opts)`	`string`	—	Save current design as a template; returns template ID
`removeTemplate(id)`	`void`	—	Delete a custom template (cannot delete built-in)
`importTemplates(json)`	`void`	—	Import templates from JSON data
`exportTemplates()`	`string`	—	Export custom templates as JSON

Template Structure

// Template object structure
interface Template {
  id: string;                 // Unique identifier
  name: string;               // Display name
  category: string;           // Category for filtering
  description?: string;       // Optional description
  tags?: string[];            // Searchable tags
  thumbnail: string;          // Base64 preview image
  data: string;               // Serialized canvas JSON
  isBuiltIn: boolean;         // true for default templates
  canvasWidth: number;        // Original canvas width
  canvasHeight: number;       // Original canvas height
}

UI: Template Panel

The Template Panel is accessible from the left sidebar. It provides:

Search bar — search templates by name or tag
Category filter — tabs or dropdown to filter by category
Template grid — thumbnail cards for each template
One-click apply — click a template to apply it (with confirmation dialog)
Save current — button to save the current design as a new template

💡

Quick preview

Hover over a template thumbnail to see a larger preview with the template name and description.