Repository files navigation

Storybook addon forAMP (Accelerated Mobile Pages). Allows to display in your storiesAMP Html components generated with React.

• Deliver in each story the output code (AMP ready) resulting from the SSR.
• Works withAMP websites,AMP email andAMP ads
• Realtime AMP validation.
• Adds addon panel to also validate the story (using onlineAMP Validator) and view the output code.
• Support Styled Components using a custom render function

• Storybook AMP Html Demo

npm install -D storybook-amp

Next, update.storybook/main.js to the following:

// .storybook/main.jsmodule.exports={stories:[// ...],addons:[// Other Storybook addons'storybook-amp',// 👈 The addon registered here],};

To set custom settings, use theamp parameter.

// .storybook/preview.jsconstscripts='';conststyles='';exportconstparameters={// Other defined parametersamp:{// 👈 The addon parameters hereisEnabled:true,// Enable the addon, false by default (boolean)    scripts,// Global scripts to add, empty by default (string)    styles,// Custom css styles, empty by default (string)},};

You can use theamp parameter to override settings on each story individually:

// Story exampleexportdefault{title:"Components/amp-youtube",parameters:{amp:{scripts:// 👈 Script needed by the story`<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>`,},},};exportconstStory=(args)=>(<amp-youtubewidth="480"height="270"layout="responsive"data-videoid='lBTCB7yLs8Y'></amp-youtube>)

• React

• Make it compatible with theChromatic addon
• Make it compatible with theAccessibility addon
• Adjust UI details when used withDocs addon
• More tools forAMP Ads andAMP Email
• Add more example tests
• Add tests
• Make CI integration possible

Storybook AMP Html addon is an open-source project. We are committed to a fully transparent development process and appreciate highly any contributions. Whether you are helping us fix bugs, proposing new features, improving our documentation or spreading the word - we would love to have you as part of the community.

Please refer to ourContribution Guidelines andCode of Conduct.

The Storybook AMP Html addon is licensed under the MIT license — see theLICENSE file for details.

Initially created byonWidget and maintained by a community ofcontributors.

• AMP Project
• Awesome Amp