aem
npm install storybook-addon-aemStorybook Addon to load HTL Sightly templates and AEM models.
- Must be using @storybook/react
- Must be using @storybook/builder-webpack5
in .storybook/main.js, add the addon:
```
module.exports = {
"addons": [
"storybook-addon-aem",
],
}
in .storybook/preview.js, configure the addon by:appId
- Setting the
- 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
}
]
}
}
}
`
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 (
)
}
``