Launch Modes

Launch modes determine how the embedded editor initializes when your users first access it. Choose the mode that best fits your use case and user workflow.

1. Account Templates

Launch with your account templates, giving users access to your professionally designed templates.
When using account templates, choose how users interact with your templates:

→ Create Copy (Default)

Creates a new template from the selected one. Changes are saved as a new template in your account.

→ Create Clone

Creates a clone that doesn’t appear in your dashboard. Perfect for temporary edits or user-specific variations.

→ Edit Original

Directly edit the selected template. Changes are saved to the original template. This is the default mode.

2. Template Gallery

Launch with Templated’s public template gallery, giving users access to hundreds of professionally designed templates.

3. Blank Template

Start with a completely blank canvas for custom designs.

Other ways to launch the editor

Launch directly into editing a specific template or render, bypassing the selection modal entirely.

Edit Specific Template

Launch directly into editing a specific template, bypassing the selection modal entirely.

// Pass the template ID as a parameter to the editor
<embed
  src="https://app.templated.io/editor/${TEMPLATE_ID}?embed=${YOUR_CONFIG_ID}"
  width="100%"
  height="100%"
/>

Clone Specific Template

Create a clone of a specific template:

// Pass the template ID as a parameter to the editor and add the clone parameter as true
<embed
  src="https://app.templated.io/editor/${TEMPLATE_ID}?embed=${YOUR_CONFIG_ID}&clone=true"
  width="100%"
  height="100%"
/>

Edit Specific Render

Allow users to edit an existing render, automatically creating a clone template:

// Pass the render ID as a parameter to the editor
<embed
  src="https://app.templated.io/editor?embed=${YOUR_CONFIG_ID}&render=${RENDER_ID}"
  width="100%"
  height="100%"
/>

Dynamic Launch Modes

Choose launch modes dynamically based on user context:

function generateEmbedUrl(embedId, templateId) {
  const baseUrl = `https://app.templated.io/editor?embed=${embedId}`;

  // Specific use cases
  if (templateId) {
    return `https://app.templated.io/editor/${templateId}?embed=${embedId}`;
  }

  return baseUrl;
}

// Update embed src dynamically
const embedElement = document.querySelector('#template-editor');
embedElement.src = generateEmbedUrl(currentEmbedId, currentTemplateId);

import React, { useMemo } from 'react';

function TemplateEditor({ embedId, templateId }) {
  const embedUrl = useMemo(() => {
    const baseUrl = `https://app.templated.io/editor?embed=${embedId}`;

    if (templateId) {
      return `https://app.templated.io/editor/${templateId}?embed=${embedId}`;
    }

    return baseUrl;
  }, [templateId, embedId]);

  return (
    <embed
      src={embedUrl}
      width="100%"
      height="100%"
      title="Template Editor"
    />
  );
}