Storybook render stories source code to prettier formatted html. supports js, jsx, ts, tsx, and mdx formats. tested with "@storybook/html": "^6.2.5"

main.js

// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials'
  ],
};

preview.js

// .storybook/preview.js
import renderToHTML from './render.html'

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  docs: {
    transformSource: (src, storyContext) => renderToHTML(storyContext.storyFn),
  },
}

render.html.js

// .storybook/render.html.js
/**
 * Render stories to html formatted source code inside previews
 * for the @storybook/addon-docs package which is included in 
 * the @storybook/addon-essentials package
 */

import { renderToStaticMarkup } from 'react-dom/server';
import { AllHtmlEntities } from 'html-entities';
import prettier from 'prettier';
import HTMLParser from 'prettier/parser-html';
const entities = new AllHtmlEntities();

export default (story) =>
  prettier.format(entities.decode(renderToStaticMarkup(story())), {
    parser: 'html',
    plugins: [HTMLParser],
  });

If anyone else needs this for Storybook 7, these changes work for me:

preview.js

docs: {
  transformSource: (src, storyContext) => renderToHTML(src),
},

render.html.js

import { renderToStaticMarkup } from 'react-dom/server';
import { decode } from 'html-entities';
import prettier from 'prettier';
import HTMLParser from 'prettier/parser-html';

export const renderToHTML = (src) => {
  const options = {
    parser: 'html',
    plugins: [HTMLParser],
    htmlWhitespaceSensitivity: 'ignore',
    tabWidth: 4,
  };
  return prettier.format(decode(renderToStaticMarkup(src)), options);
};