One Parameter

This example demonstrates registering a canvas with a single list parameter. The platform captures canvas frames for preview purposes.

The implementation registers a canvas element, defines a list parameter with three options, and responds to parameter changes via an event listener.

<canvas></canvas>
<script src="https://script.layerstatic.com/layer/sdk-latest.js"></script>
<script src="./app.js"></script>
<script>
  const canvas = document.querySelector('canvas');
  const app = new App(canvas);

  globalThis.addEventListener('layer:paramchange', (event) => {
    const { id, value } = event.detail;
    if (id === 'choice') app.choice = value;
  });

  $layer
    .registerCanvas(canvas)
    .params({
      customization_level: 'VIEWER',
      kind: 'LIST',
      id: 'choice',
      name: 'List',
      default: 'option2',
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' }
      ]
    }).then(({ choice }) => {
      app.choice = choice;
      app.start();
    });
</script>