What an Angular-native Storybook alternative actually looks like

Description and use

ng-prism replaces Storybook by annotating components directly, generating a styleguide without iframes or a second build system, and auto‑creating documentation from JSDoc.

Problem

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.

Outcome

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

Workflow

• 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.

Evidence

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.

Source

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

Source