Angular Storysource

Show angular template with args on story tab

View on Github

npm version GitHub version

Storybook ng-source Addon

Show your args evaluated on template or splitted into code/HTML.

Ideal for fast prototyping components and copy-paste based development.

(If you like it, please consider giving it a star so I can keep it updated :D)

Splitted Args (.HTML/.TS) Evaluated Args (.HTML)

Getting Started

Install into your project with npm i storybook-ng-source-addon --save

Add to your main.js, inside addons:

module.exports = {
  "addons": [

How to write stories for it to work

Stories should be written in the following format:

export const Template: Story<ButtonComponent> = (args) => ({
  props: args,
  template: `
        Button Content

export const defaultArgs = {
  label: '',
  type: 'default',
  busy: false,
  busyText: '',
  iconClass: '',
  iconPosition: 'start',
  outline: false,
  disabled: false,

export const DefaultButton = Template.bind({});
DefaultButton.args = {
  • should have only the variable template as multiline string using crasis (REQUIRED);
  • should have variables inside double quotes (REQUIRED)

Then the plugin will do all the work :)