Studio Pod Email Flow
15 built  ·  10 need action

Create

New campaign

Build a new broadcast email. Fill in the fields below and we'll generate the registry entry and starter HTML for you. Paste them into the right files, run sync, and you're live in Klaviyo.

Identity

Inbox

Audience & Goal

Notes

Generated code

Copy each block into the matching file. The script writes for you — your job is paste + save + sync.

1. Registry entry → site/src/pages/emails-internal/_emails.ts 
 
 2. HTML starter → site/public/emails/{slug}.html  
 
 
 
Next steps
 
     
  1. Paste the registry entry into _emails.ts inside the EMAILS array.
    2.  
  2. Save the HTML starter at site/public/emails/{slug}.html, then refine the copy.
    3.  
  3. Run KLAVIYO_API_KEY=… node scripts/klaviyo-sync-templates.mjs to push.
    4.  
  4. Run KLAVIYO_API_KEY=… node scripts/klaviyo-sync-campaigns.mjs to create the draft campaign in Klaviyo.
    5.  
  5. Open the Klaviyo campaign URL, swap the placeholder list for your real segment, schedule send.
    6.  
 
 
 
 ',
          '',
        ].filter(Boolean).join('\n');
      }

      function render() {
        var d = values();
        if (!d.slug || !d.name || !d.subject) {
          tsOut.textContent = '// Fill in name, slug, and subject to generate code.';
          htmlOut.textContent = '';
          return;
        }
        tsOut.textContent = tsEntry(d);
        htmlOut.textContent = htmlStarter(d);
      }

      function copyHandler(e) {
        var btn = e.currentTarget;
        var kind = btn.getAttribute('data-copy');
        var src = document.getElementById('output-' + kind);
        if (!src) return;
        navigator.clipboard.writeText(src.textContent).then(function () {
          var original = btn.textContent;
          btn.textContent = 'Copied';
          btn.classList.add('is-copied');
          setTimeout(function () { btn.textContent = original; btn.classList.remove('is-copied'); }, 1400);
        });
      }

      form.addEventListener('input', function (e) {
        if (e.target.name === 'name') autoSlug();
        if (e.target.name === 'slug') e.target.dataset.auto = '0';
        render();
      });
      Array.prototype.forEach.call(document.querySelectorAll('.copy-btn'), function (b) {
        b.addEventListener('click', copyHandler);
      });

      render();
    })();