storybook-addon-aem

Storybook AEM Addon

Storybook Addon to load HTL Sightly templates and AEM models.

Pre-requisites

• Must be using @storybook/react
• Must be using @storybook/builder-webpack5

Configuration

Add addon to configuration

in .storybook/main.js, add the addon:

module.exports = {
  "addons": [
    "storybook-addon-aem",
  ],
}

Register AEM resources

in .storybook/preview.js, configure the addon by:

• Setting the appId
• Registering your resource paths and the HTL render function associated with that path

import renderButton from "./Button.html"

export const parameters = {
  aem: {
    config: {
      appId: "app",
      resources: [
        {
          path: "app/components/button",
          render: renderButton
        }
      ]
    }
  }
}

Generate HTML output of your AEM models in Storybook

You can now use AEM models generated by the JSON exporter as a way of creating your stories.

Example of importing a model into a story:

import React from 'react'
import { Story, Meta } from "@storybook/react";
import { App } from "storybook-aem-addon"
import Model from "./Button.model.json"

export default {
  title: "Button",
} as Meta;

export const Default: Story<{}> = () => {
  return (
    <App model={Model} />
  )
}