What an Angular-native Storybook alternative actually looks like

Описание и применение

ng-prism заменяет Storybook, позволяя аннотировать компоненты напрямую, генерируя стильгайд без iframe и второго билдера, автоматически создавая документацию из JSDoc.

Задача

Angular component libraries rely on Storybook, which adds a parallel file tree, a second build toolchain, iframe isolation, and a flat args abstraction that clashes with Angular signals.

Результат

ng-prism replaces Storybook with a single‑file annotation approach, eliminating iframe isolation, reducing build complexity, and auto‑generating documentation from source JSDoc.

Рабочий процесс

• 1. Annotate a component with @Showcase, optionally typing the component.
• 2. Add variants, inputs, outputs, and metadata in the decorator.
• 3. Run ng add @ng-prism/core to install and wire builders into angular.json.
• 4. Start the dev server with ng run my-lib:prism (port 4400).
• 5. Build a static styleguide with ng run my-lib:prism-build for CI or Pages.
• 6. Use the generated UI: controls auto‑populate from signal inputs, events log in the Events tab, and API docs derive from JSDoc comments.

Доказательства

ng-prism puts the showcase config on the component, extracts the rest with the TypeScript compiler, and renders into your document instead of an iframe.

Источник

Setup is one command, and it wires ng-prism's builders into your existing angular.json

Источник