Bookmarklet for creating a basic Calcite Components codepen

create-calcite-components-codepen.js

javascript:(function () {
  const versionInput = prompt("Calcite version (leave blank for latest):", "");
  const calciteVersion = versionInput && versionInput.trim() ? versionInput.trim() : "latest";

  const scriptTag = `<script type="module" src="https://cdn.jsdelivr.net/npm/@esri/calcite-components@${calciteVersion}/dist/cdn/index.js"></script>`;

  const data = {
    title: `Calcite ${calciteVersion} starter`,
    html: scriptTag,
    css: "",
    js: "",
    js_external: ""
  };

  const form = document.createElement("form");
  form.method = "POST";
  form.action = "https://codepen.io/pen/define";
  form.target = "_blank";

  const input = document.createElement("input");
  input.type = "hidden";
  input.name = "data";
  input.value = JSON.stringify(data);

  form.appendChild(input);
  document.body.appendChild(form);
  form.submit();
})();