@ng-nomads/storybook-addon-code

A Storybook addon that shows the HTML, TS and SCSS of the current story in a "Code" panel next to Controls, with a copy button per file. The panel follows the controls, so a Playground story always shows the code that matches what is on screen. The same tabs can be rendered on your docs pages.

Works with Storybook 9 and 10, any framework. Written for Angular libraries, where a sample is a template, a component class and a stylesheet rather than one JSX snippet.

Install

npm install --save-dev @ng-nomads/storybook-addon-code

.storybook/main.ts:

const config: StorybookConfig = {
  addons: ['@ng-nomads/storybook-addon-code'],
};

The addon's own "Code" panel replaces Storybook's code panel, so turn that one off in .storybook/preview.ts:

export default {
  parameters: {
    docs: { codePanel: false },
  },
};

Give a story its files

Set parameters.code on a story or a component. Any subset of the three files is fine; a tab appears only for the files present.

export const Default: Story = {
  parameters: {
    code: {
      html: '<my-button label="Save" (clicked)="onSave()" />',
      ts: `import { Component } from '@angular/core';
import { MyButton } from 'my-lib';

@Component({
  selector: 'app-save',
  imports: [MyButton],
  templateUrl: './save.component.html',
})
export class SaveComponent {
  onSave(): void {}
}`,
      scss: ':host { display: block; }',
    },
  },
};

For a Playground whose code depends on the controls, pass a function of the args. It is called on every render:

export const Playground: Story = {
  parameters: {
    code: (args) => ({
      html: `<my-button label="${args.label}" [disabled]="${args.disabled}" />`,
    }),
  },
};

Without parameters.code, the panel falls back to parameters.docs.source.code and shows it as HTML, so stories that already set a source snippet keep working.

Tabs on a docs page

The tabs are exported for custom docs pages built with React, for example under each embedded sample:

import React from 'react';
import { CodeTabs, type CodeFiles } from '@ng-nomads/storybook-addon-code';

const files: CodeFiles = { html: '<my-button label="Save" />' };

React.createElement(CodeTabs, { code: files, collapsible: true });

With collapsible: true the code starts hidden; a tab opens it and the open tab closes it again.

API

| Export | Where | Role | | --- | --- | --- | | parameters.code | stories | CodeFiles or (args) => CodeFiles | | CodeTabs | @ng-nomads/storybook-addon-code | React component: the tabs with a copy button each | | CodeFiles, CodeFile, CodeParameter | @ng-nomads/storybook-addon-code | Types of the contract | | withCode | @ng-nomads/storybook-addon-code/preview | The decorator, registered automatically |

License

MIT