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

$3

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

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

$3

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
}
]
}
}
}
`

$3

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 (

)
}
``