Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Converts stencil.js JsonDoc to storybook ArgTypes
npm install @jaketracey/storybook-addon-docs-stencil
Last updated almost 3 years ago
Downloads per week
Readme View on GitHub


Converts stencil.js doc json derived from stencils output target docs-json to storybook ArgTypes.

With this addon activated

  • Storybook will render basic controls for properties Controls.
  • Storybook will auto generate documentation for Props, Events, Methods, Slots, Shadow Parts and Custom Properties.
  • Storybook doc page will contain stencils component documentation ( or inline)


npm i -D @pxtrn/storybook-addon-docs-stencil


Configure stencil to generate docs-json at build time.

// stencil.config.ts

import { Config } from '@stencil/core';

export const config: Config = {
  outputTargets: [
      type: 'docs-json',
      file: 'path/to/docs.json'

Configure Storybook


module.exports = {
  addons: [

import { setStencilDocJson } from '@pxtrn/storybook-addon-docs-stencil';
import docJson from 'path/to/docs.json';
if(docJson) setStencilDocJson(docJson);

export const parameters = {
  controls: { hideNoControlsWarning: true }

Component documentation

If not already created by stencil create src/components/my-component/ If the line <!-- Auto Generated Below --> is not present, stencil will ignore this file.

Everything above this line will be included in storybook

<!-- Auto Generated Below -->

inline documentation

// src/components/my-component/my-component.tsx`

 * Everything written here will be included, if is not present.
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,


When using @storybook/web-components

@storybook/web-components overrides the preset configuration of this module. You can fix this with this preview config.


import { extractArgTypes, extractComponentDescription, setStencilDocJson } from '@pxtrn/storybook-addon-docs-stencil';

export const parameters = {
  docs: {
Hint your component in your stories
// your-story.ts

export default {
  title: 'My Component',
  component: 'my-component',
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