Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@storybook/html

Package Overview
Dependencies
Maintainers
12
Versions
1946
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@storybook/html

Storybook HTML renderer

  • 8.4.7
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
12
Created

What is @storybook/html?

@storybook/html is a tool for developing UI components in isolation for HTML-based projects. It allows developers to build, test, and showcase their components in a structured and interactive environment.

What are @storybook/html's main functionalities?

Component Development

This feature allows developers to create and display different states of a component. The code sample demonstrates how to create stories for a Button component with different content.

import { storiesOf } from '@storybook/html';

storiesOf('Button', module)
  .add('with text', () => '<button>Hello Button</button>')
  .add('with emoji', () => '<button>😀 😎 👍 💯</button>');

Interactive Addons

This feature allows the use of addons to make stories interactive. The code sample shows how to use the Knobs addon to dynamically change the text of a Button component.

import { storiesOf } from '@storybook/html';
import { withKnobs, text } from '@storybook/addon-knobs';

storiesOf('Button', module)
  .addDecorator(withKnobs)
  .add('with dynamic text', () => {
    const label = text('Label', 'Hello Button');
    return `<button>${label}</button>`;
  });

Documentation

This feature allows developers to add documentation to their stories. The code sample demonstrates how to use the storybook-readme addon to include markdown documentation for a Button component.

import { storiesOf } from '@storybook/html';
import { withDocs } from 'storybook-readme';
import ButtonReadme from './Button.md';

storiesOf('Button', module)
  .addDecorator(withDocs(ButtonReadme))
  .add('default', () => '<button>Hello Button</button>');

Other packages similar to @storybook/html

Keywords

FAQs

Package last updated on 05 Dec 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc