New
Storybook for SvelteKitAutomate with Chromatic
Storybook Day 2023
Star77,604
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
@jigsaw/storybook-amp
Storybook addon that allows you to display AMP HTML components generated with react in your stories
npm install @jigsaw/storybook-amp
Last updated almost 3 years ago
2
Downloads per week
Readme View on GitHub

Storybook AMP · npm package

Storybook addon that allows you to display AMP HTML components generated with react in your stories

Installation

npm install -D storybook-amp

Configuration

Then create a file called addons.js in your storybook config.

Add following content to it:

import 'storybook-amp/register';

Demo

https://storybook-amp.netlify.com

Usage

To SSR the code at runtime time use the withAmpDecorator decorator inside config.js or specific story. To set custom settings, use the amp parameter.

// config.js
import { configure, addDecorator, addParameters } from '@storybook/react';
import { withAmpDecorator } from 'storybook-amp';

const customStyles = ''; // some styles

// global
addDecorator(withAmpDecorator)
addParameters({
  amp: {
    isEnabled: true,
    styles: customStyles, // Custom styles from some string
  },
});

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

// per story
storiesOf('AMP', module)
  .add('Default', () => <Button>Send</Button>, {
    amp: {
      isEnabled: false,
    }
  });
Join the community
6,056 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI