https://github.com/dyingangel666/ng-prism
Lightweight Angular-native component showcase — no story files needed.
https://github.com/dyingangel666/ng-prism
angular angular-library angular-storybook angular-styleguide component-explorer component-showcase design-system living-styleguide showcase-decorator signal-inputs standalone-components storybook storybook-alternative
Last synced: 30 days ago
JSON representation
Lightweight Angular-native component showcase — no story files needed.
- Host: GitHub
- URL: https://github.com/dyingangel666/ng-prism
- Owner: dyingangel666
- License: mit
- Created: 2026-04-17T09:34:49.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2026-05-11T20:11:15.000Z (about 1 month ago)
- Last Synced: 2026-05-11T20:30:52.448Z (about 1 month ago)
- Topics: angular, angular-library, angular-storybook, angular-styleguide, component-explorer, component-showcase, design-system, living-styleguide, showcase-decorator, signal-inputs, standalone-components, storybook, storybook-alternative
- Language: TypeScript
- Homepage: https://dyingangel666.github.io/ng-prism/
- Size: 2.72 MB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Agents: AGENTS.md
Awesome Lists containing this project
README
# ng-prism
Lightweight, Angular-native component showcase tool. Annotate components with `@Showcase` — no separate story files needed.
[](https://angular.dev)
[](https://www.typescriptlang.org)
[](./LICENSE)
**[Live Demo](https://dyingangel666.github.io/ng-prism/demo/)** · **[Documentation](https://dyingangel666.github.io/ng-prism/)**
## Features
- **Zero-config discovery** — TypeScript Compiler API scans your library at build time
- **Signal-native** — works with `input()` / `output()` signals
- **Directive support** — showcase directives with configurable host elements
- **Plugin architecture** — JSDoc, A11y, Figma, Performance, Box Model, Coverage
- **Live Controls** — auto-generated input controls with type-aware editors
- **Code Snippets** — live-updating Angular template snippets per variant
- **Component Pages** — free-form demo pages for complex components
- **Deep-linking** — URL state sync for sharing specific component/variant/view
- **Themeable** — full CSS custom property system, replaceable UI sections
## Quick Start
### 1. Install
```bash
npm install @ng-prism/core
```
### 2. Add `@Showcase` to a component
```typescript
import { Component, input, output } from '@angular/core';
import { Showcase } from '@ng-prism/core';
@Showcase({
title: 'Button',
category: 'Atoms',
description: 'Primary action button',
variants: [
{ name: 'Primary', inputs: { variant: 'primary', label: 'Click me' } },
{ name: 'Danger', inputs: { variant: 'danger', disabled: true } },
],
})
@Component({
selector: 'my-button',
standalone: true,
template: `{{ label() }}`,
})
export class ButtonComponent {
variant = input<'primary' | 'secondary' | 'danger'>('primary');
label = input('Button');
disabled = input(false);
clicked = output();
}
```
### 3. Run the schematic
```bash
ng add @ng-prism/core
```
This creates the prism app project, configures Angular builders, and generates `ng-prism.config.ts`.
### 4. Start the dev server
```bash
ng run my-lib:prism
```
Open `http://localhost:4400` — your component appears in the sidebar with live controls, code snippets, and variant tabs.
## Configuration
```typescript
// ng-prism.config.ts
import { defineConfig } from '@ng-prism/core/config';
import { jsDocPlugin } from '@ng-prism/plugin-jsdoc';
export default defineConfig({
plugins: [jsDocPlugin()],
theme: {
'--prism-primary': '#00a67e',
'--prism-font-sans': "'Inter', sans-serif",
},
appProviders: [provideAnimationsAsync(), provideHttpClient()],
});
```
## Directives
Directives need a host element. Use `host` to wrap them:
```typescript
@Showcase({
title: 'Tooltip',
host: {
selector: 'my-button',
import: { name: 'ButtonComponent', from: 'my-lib' },
inputs: { label: 'Hover me' },
},
variants: [
{ name: 'Top', inputs: { position: 'top', text: 'Tooltip!' } },
],
})
@Directive({ selector: '[myTooltip]' })
export class TooltipDirective { ... }
```
## Component Pages
For complex components that need template projections or mock data:
```typescript
providePrism(PRISM_RUNTIME_MANIFEST, config, {
componentPages: [
{ title: 'Table Demo', category: 'Data', component: TableDemoPage },
],
});
```
Link to a `@Showcase`-decorated component for combined API docs + custom rendering:
```typescript
@Showcase({
title: 'Table',
renderPage: 'Table Demo',
variants: [{ name: 'Default', inputs: { height: '400px' } }],
})
```
## Official Plugins
| Plugin | Package | Description |
| --------- | ---------------------------- | -------------------------------------------- |
| JSDoc | `@ng-prism/plugin-jsdoc` | API documentation from JSDoc comments |
| Figma | `@ng-prism/plugin-figma` | Figma design embed + visual diff |
| Box Model | `@ng-prism/plugin-box-model` | CSS box model inspector |
| Perf | `@ng-prism/plugin-perf` | Render performance profiling |
| Coverage | `@ng-prism/plugin-coverage` | Per-component test coverage from Istanbul/v8 |
> **Note:** Accessibility auditing (axe-core) is built into ng-prism core — no plugin needed.
## Requirements
- Angular >= 21
- TypeScript >= 5.5
- Components must use `input()` / `output()` signals
## Contributing
See [CONTRIBUTING.md](./CONTRIBUTING.md) for development setup, the test workspace workflow, and PR guidelines.
## License
[MIT](./LICENSE)