Runtime

Why the starter looks like this

The live file runs strict, inside a block, deferred. A preview adds the draft to <head> later, at the top level, not strict. seamble.com runs the live file in a mount with data-demo and no Squarespace page. The IIFE, "use strict", the readyState check, the :not([data-sb-state]) guard (the script can run twice on one page) and try/catch per mount make all of these behave the same. Code outside that shape can work in a preview and break live, or the reverse.

Find mounts by id

Warning no-mount: the JS never mentions data-seamble-id or the component id. The mount is the only element that is reliably yours; a class, name or position breaks when two components of one kind share a page.

One classic script

Warning module-syntax: the JS has import or export statements. They, a top-level return, TypeScript and JSX are syntax errors, which stop the whole live file, Seamble's loader included: the component vanishes, the page stops reporting to Seamble, and its preview links stop loading. A syntax error in a draft only breaks the draft.

Render into the mount

Warning document-write: the JS calls document.write. The script runs after the page is parsed, where document.write is ignored during load and replaces the whole page afterwards.

Settings

Constants in the JS are the settings: you change them, and the owner never re-pastes.

Use a data-* attribute on the mount only when two mounts of one component need different values. The owner has to type it into the Code Block, so always fall back to the constant:

const end = new Date(el.dataset.date || DATE); // <div data-seamble-id="…" data-date="…">

Read any children the owner put in the mount before replacing them.

Libraries

Write it yourself when you can. Otherwise load a UMD build, pinned to an exact version, with integrity, once per page, and show a fallback if it fails:

function loadScript(src, integrity) {
  const all = (window.__sbScripts ||= {});
  return (all[src] ||= new Promise((ok, fail) => {
    const s = Object.assign(document.createElement("script"), { src, onload: ok });
    if (integrity) Object.assign(s, { integrity, crossOrigin: "anonymous" });
    s.onerror = () => fail(new Error(`could not load ${src}`));
    document.head.append(s);
  }));
}