Can you use decorators with storybook for html in CSF format?

Question

I'm trying to use decorators in CSF format. I tried this example in the documentation, but since it's written for React, it didn't work for me.

export default {
  title: 'My Component',
  decorators: [(Story) => <div style={{ margin: '3em' }}><Story/></div>]
}

Is it currently possible to use decorators on a component or story level for html?

Answer 1

In CSF, a story is a function which return a "story object". this object is rendered by a renderer dependant of the framework used.

A decorator is just another function which take a story, and generate the object to render. This notion is global, and works with all supported framework.

With the html framework, the "story object" is just a String to be rendered with innerHtml. So a valid decorator for the html framework is a function, which take as the first argument a story function, and return a string.

decorators = [(story) => `<div style="margin: 3em">${story()}</div>`]