Converts stencil.js JsonDoc to storybook ArgTypes

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 }

Dash cased properties


import { extractArgTypesFactory } from '@pxtrn/storybook-addon-docs-stencil';

export const parameters = {
  docs: {
    extractArgTypes: extractArgTypesFactory({ dashCase: 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',