storybook-amp

storybook-amp is a Storybook addon that renders React-based AMP HTML components inside stories and validates the resulting markup against the official AMP Validator. Built by onWidget and released under the MIT license, it targets developers who build Accelerated Mobile Pages components and want to see them work inside Storybook's component development environment.

What is storybook-amp?

storybook-amp is a Storybook addon that takes React components written with AMP custom elements, such as amp-youtube, server-side renders them into AMP-ready HTML, and displays that output in each story. The addon also validates the rendered code in realtime using the online AMP Validator, so a story passes only if the AMP markup is correct. It works for all three AMP formats: AMP websites, AMP email, and AMP ads. The project was initially created by onWidget and is maintained by an open-source community under the MIT license.

Key Features

storybook-amp packs seven distinct capabilities directly into the Storybook UI, from code output to validation.

• SSR code output — Each story delivers the final AMP-ready HTML code resulting from server-side rendering of the React component.
• Three AMP formats — Supports AMP websites, AMP email, and AMP ads, each with its own validation rules.
• Realtime AMP validation — Integration with the online AMP Validator checks stories automatically as they render.
• Addon panel — Adds a Storybook panel where you can validate the current story and inspect the generated output code.
• Styled Components support — Includes a custom render function so components using styled-components render correctly in stories.
• Per-story configuration — The amp parameter can be overridden per story, letting you inject the AMP scripts and custom CSS a specific component needs, such as the script for amp-youtube.
• Global settings — In .storybook/preview.js you can enable the addon globally and define shared scripts and styles.

Who is it for?

storybook-amp serves three main audiences, all of whom work in Storybook's React environment.

• AMP component developers — Write React components using AMP custom elements and verify that the rendered AMP HTML is valid before shipping.
• Front-end teams using Storybook — Add AMP validation and code preview to an existing Storybook setup with one npm install.
• Teams building AMP email or AMP ads — Test and validate markup in those specific formats, which have stricter validation rules than regular web AMP.

What can you do with storybook-amp?

The addon's features translate into practical workflows for validating and sharing AMP markup.

• Validate AMP output continuously: Render an amp-youtube story, and the addon reports whether the SSR markup passes the official validator.
• Share per-story AMP scripts: Add the custom-element script your component needs in a story's parameters, and the addon includes it in the rendered output.
• Inspect SSR output: Open the addon panel to see the exact AMP HTML code produced for each story, useful for debugging and for pasting into AMP caches.

How does storybook-amp work?

Install the package with npm install -D storybook-amp, then register 'storybook-amp' in the addons array of .storybook/main.js. In .storybook/preview.js, set the amp parameter with isEnabled: true and optional global scripts and styles. For individual stories, override the same parameter with a script tag needed by that component. The addon then renders the story, server-side renders the React component to AMP HTML, and validates the result in the addon panel.

FAQ

Is storybook-amp free?

Yes, storybook-amp is open-source software released under the MIT license. You can install it from npm as a dev dependency and use it in commercial projects without a paid license.

How do I enable storybook-amp?

After adding the addon to .storybook/main.js, set amp.isEnabled to true in the parameters exported from .storybook/preview.js. This globally activates the addon for all stories.

Does storybook-amp work with AMP email and ads?

Yes. The addon explicitly supports AMP websites, AMP email, and AMP ads. Each format has different validation rules, and the validator integration can check all three.

Which component libraries are supported?

The addon is designed for React components and includes a custom render function so styled-components work inside stories. There is no mention of support for Vue, Svelte, or other frameworks on the page.

Is storybook-amp compatible with other Storybook addons?

The project's roadmap notes that it is not yet compatible with the Chromatic addon or the Accessibility addon, and that UI details still need adjusting for the Docs addon. These integrations are planned but not finished.