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} />
)
}