Create a new snippet from a blank template.

Blank snippet.EXCEL.yaml

name: Blank snippet
description: Create a new snippet from a blank template.
host: EXCEL
api_set: {}
script:
  content: "const html = htm.bind(preact.h);\r\n\r\npreact.render(html`<${Fabric.ColorPicker}>Hi<//>`, document.body);\r\n"
  language: typescript
template:
  content: ''
  language: html
style:
  content: ''
  language: css
libraries: "https://unpkg.com/preact@10.5.3/dist/preact.umd.js\r\nhttps://unpkg.com/preact@10.5.3/hooks/dist/hooks.umd.js\r\nhttps://unpkg.com/preact@10.5.3/compat/dist/compat.umd.js\r\n\r\nhttps://unpkg.com/htm@3.0.4/dist/htm.js\r\n\r\nhttps://unpkg.com/react-preact@1.0.0/index.js\r\n\r\nhttps://unpkg.com/office-ui-fabric-react@7/dist/office-ui-fabric-react.js"

Fabric with Preact.EXCEL.yaml

name: Fabric with Preact
description: Create a new snippet from a blank template.
host: EXCEL
api_set: {}
script:
  content: "const html = htm.bind(preact.h);\r\n\r\nconst { Stack, DefaultButton, PrimaryButton } = Fabric;\r\n\r\nconst stackTokens = { childrenGap: 40 };\r\n\r\nfunction _logClicked(): void {\r\n  console.log(\"Clicked\");\r\n}\r\n\r\nconst ButtonDefaultExample = (props) => {\r\n  const { disabled, checked } = props;\r\n\r\n  return html`\r\n    <${Stack} horizontal tokens=${stackTokens} >\r\n      <${DefaultButton} text=\"Standard\" onClick=${_logClicked} disabled=${disabled} />\r\n      <${PrimaryButton} text=\"Primary\" checked=${checked} />\r\n    <//${Stack}>\r\n  `;\r\n};\r\n\r\npreact.render(html`<${ButtonDefaultExample}/>`, document.body);\r\n"
  language: typescript
template:
  content: ''
  language: html
style:
  content: ''
  language: css
libraries: "https://unpkg.com/preact/dist/preact.umd.js\r\nhttps://unpkg.com/preact/hooks/dist/hooks.umd.js\r\nhttps://unpkg.com/preact/compat/dist/compat.umd.js\r\n\r\nhttps://unpkg.com/htm/dist/htm.js\r\n\r\nhttps://unpkg.com/react-preact/index.js\r\n\r\nhttps://unpkg.com/office-ui-fabric-react/dist/office-ui-fabric-react.js"