Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Angular Storysource
Show angular template with args on story tab
npm install storybook-ng-source-addon
Last updated over 2 years ago
Downloads per week
Readme 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 :)

Join the community
6,616 developers and counting
WhyWhy StorybookComponent-driven UI
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software

Maintained by
Special thanks to Netlify and CircleCI