Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can storybook display the sample code for the component?

See original GitHub issue

Hi storybook team,

I am wondering whether storybook support show the sample code on the storybook site for the component that display on page?

Like I write a Button component, and I want to show developers how to use the component?

import Button from '/components/Button';

<Button>This is a button.</Button>

Issue Analytics

State:
Created 6 years ago
Comments:17 (4 by maintainers)

Top GitHub Comments

17reactions

Thamizhvaanancommented, Feb 14, 2019

Can storybook display the sample html code for the component???

4reactions

igor-dvcommented, Sep 14, 2017

One of the options is to use addon-info

https://github.com/storybooks/storybook/tree/master/addons/info

Top Results From Across the Web

Build a simple component - Storybook Tutorials

Learn how to develop UIs with components and design systems. Our in-depth frontend guides are created by Storybook maintainers and peer-reviewed by the...

In Storybook how can you display the full source of a ...

In Storybook how can you display the full source of a component in the "Show code" area of a story doc · Ask...

Implementing a source code view in Storybook - krawaller

The SourcePanel component receives the addons channel , from which the sources will be emitted when rawSources.json has been fetched. Showing the source...

Storybook - Display code for render props components

If you navigate to the “story” tab of the addons, at the bottom of the screen, you can see the correct code. Also,...

Next-level component showcasing with Storybook controls

Storybook will detect the project type automatically when added to an existing project — in our case, it's a React project. As you...