@flourish/sdk/skeleton/template.yml

The Flourish SDK

# The 'id' should be a string that uniquely identifies your template
id: ''
name: Untitled template
description: A Flourish template
author: Unknown author

# This template is compatible with SDK version 2
sdk_version: 2

# Defines how the template will behave when embedded with the default settings.
# Use "auto" to have the iframe get taller and shorter to match the content of
# the DOM (ideal if the template’s height is determined by the flow of the body).
# Alternatively specify a fixed height or aspect ratio, such as "600px" or "4x3",
# if your template fills will fill the available height. You can also specify
# breakpoints (https://flourish.studio/developers/reference/template-files.html).
autoheight: auto

build:
  # Defines the build processes used to build your template from source.
  # You can have any number of build processes, and changes to the relevant
  # files will trigger the appropriate build. Here we define build scripts
  # for JavaScript and CSS.

  src:
    script: npm run build
    # You can specify a whole directory, or individual files, or both.
    # A change inside the directory or to any of the listed files will
    # trigger a rebuild and reload.
    directory: src
    files:
      - rollup.config.js

  less:
    script: npm run less
    directory: less

settings:
  # Creates a settings panel that enables the end user to set the default state for
  # individual visualisations made with this template.
  #
  # Available types:
  # • "number" >> gives a number input. Optionally add "min:", "max:", and "step:" properties.
  # • "string" >> gives an text input
  # • "text" >> gives a textarea
  # • "boolean" >> gives a checkbox
  # • "color" >> gives a color picker

  - Section title # Headings can be used to break up the settings into collapsible sections
  - property: example_state_property # Refers to a property in the template's state object
    name: Example number setting # Display name for the settings panel
    description: A setting for changing a number # Optional description for the settings panel
    type: number # See available types above

data:
  # The data section determines how data is made available to your template,
  # and the sample data that is used. See the documentation.