Simplify using Storybook for HTML

[o-t-w]

Is your feature request related to a problem? Please describe.

I've previously used Storybook in a React project and thought it provided a good developer experience. Now I wanted to use Storybook to document some simple HTML + CSS components (with no JavaScript framework). The way of doing this as shown in the docs looks horrible. Is it not possible to just write the markup rather than needing to construct everything with JavaScript? Can't we use some kind of render function? I realise its a somewhat niche use case for Storybook as many people use a framework but it feels like it hasn't been thought through...

Describe the solution you'd like

In the example Button.js component I see this code:

  const btn = document.createElement('button');
  btn.type = 'button';
  btn.innerText = label;
  btn.addEventListener('click', onClick);

This is incredibly verbose. Realistically this is not something I would consider writing, and I would not use Storybook for a HTML project at this point. I think that a shame as it is clearly a use case that some people do have.
Is it not possible to use a render function so that I can just write out the markup?

In a JS framework project Button.js is a component that will be used in a production codebase while Button.stories.js is written just for Storybook. In a HTML codebase, they are both written just for the benefit of Storybook. I can't help feeling a much simpler approach must be possible? Is there even a real need for Button.stories.js and Button.js to be two different files? They're both there in an attempt to document the component...

Describe alternatives you've considered

No response

Are you able to assist to bring the feature to reality?

no

Additional context

I am working on a HTML/CSS design system because I want to keep things simple, yet in Storybook its actually more complex and has a worse DX than using a JS framework.

[kimdomenick]

Agree. When I experimented with the “HTML” implementation of Storybook, I was surprised to find the examples used Javascript to construct the HTML. If we’re still writing stories with Javascript, but without the power a framework, like React, it’s more work. And I think having an installation type named “HTML” is a bit confusing.

I also tried many different render methods, but the only way I found to output plain HTML was with template strings.

`// randomHTML.stories.js

export const randomHTML = () => {
  return `<div>I'm just some random HTML.</div>`;
};

`

However, without a plugin or package to provide formatting within template strings, long blocks of HTML become unmanageable. I installed the lit-html extension in VS Code and used this method to format template strings:

`// randomHTML.stories.js

import { html } from "lit-html";

export const randomHTML = () => {
  return html `<div>I'm just some random HTML.</div>`;
};
`

I understand that Storybook's power is in the args, and in the ability to show states and variations and provide different property values. But it would be nice to use it for static HTML components, too.