For React, there exist a couple of living styleguide generators, like styleguidist, that take components, sass and some extra editable text and automatically generate a styleguide for a particular app out of this, depending on where the styleguide task is inserted into the build process, with every repeat of that process. Does anything similar exist for Angular 2+?

Caveat: I do not mean a coding styleguide, but a living styleguide that pretty much automatically documents layout (sass/css)styles, fonts, icons, colours, font sizes, and components with their parameters, amongst others. Those things happen to be called styleguides too, sorry about that, but I did not invent the name.

For React, there exist a couple of living styleguide generators, like styleguidist, that take components, sass and some extra editable text and automatically generate a styleguide for a particular app out of this, depending on where the styleguide task is inserted into the build process, with every repeat of that process. Does anything similar exist for Angular 2+?

Caveat: I do not mean a coding styleguide, but a living styleguide that pretty much automatically documents layout (sass/css)styles, fonts, icons, colours, font sizes, and components with their parameters, amongst others. Those things happen to be called styleguides too, sorry about that, but I did not invent the name.

• javascript
• angular

• oK, whoever voted this down for lack of research should get voted down for lack of reading comprehension. I tried to keep the description text short, but I'll expand a bit... – yogibimbi Commented Apr 29, 2017 at 22:42
• This github page contains information about a variety of living styleguide generators, also in JS. As far as I can see, none address Angular 2 specifically and most are centered around CSS and preprocessors, not components: github.com/davidhund/… Tapestry has "Angular" listed as a keyword, but the demo does not even work in Chrome 57.0 on the Mac. However, styleguidist is listed... This is a very long list, however, so I will have to see if there is something useful or that can be adapted... – yogibimbi Commented Apr 30, 2017 at 8:19
• Have you found any good solutions in the time since you asked this question? – Brendan Commented Jun 30, 2017 at 13:36
• nope, unfortunately, I haven't – yogibimbi Commented Jul 3, 2017 at 10:07
• 3 It seems like Compodoc might be the ticket: github.com/compodoc/compodoc but I haven't had a chance to try it out yet – yogibimbi Commented Oct 23, 2017 at 9:16

4 Answers 4

UI-jar is a drop in module that automatically create a living style guide based on the test you write for your components in Angular (2.x and above). A beta is available at https://www.npmjs.com/package/ui-jar

With UI-jar it's also possible to develop your components isolated, without the need of the rest of your app.

You also get documentation about your components.

Storybook is also a good solution, but you also need to write code to define your different scenarios. Storybook has been originally developed for React but is now also compatible with Angular.

Another option is Angular Playground. You have to write some code to define the scenarios that you want it to provide, but I've been using it on my projects and I like it.

If you want automatic UI component documentation, I'd go with Compodoc like yogibimbi mentioned in their comment.

It seems like there is a missing tool in the ecosystem that provides something like a combination of these two utilities.

You can use KSS. It's really simple: You have to write some code to describe your CSS class, thing like that:

// Primary Button
//
// Use this class for the primary call to action button.
// Typically you'll want to use either a `<button>` or an `<a>` element.
//
// Markup:
// <button class="btn--primary">Click Me</button>
// <a href="#" class="btn btn--primary">Click Me</a>
//
// Styleguide Components.Buttons.Primary

.btn--primary {
  padding: 20px 30px;
  text-transform: uppercase;
  font-weight: bold;
  background-color: aqua;
  color: red;
}

and to make it easy to use,i define a command in package.json:

 "kss": "ng build --extract-css true && kss --source ./ --destination styleguide --css ../dist/styles.bundle.css"

and then you just run :

npm run kss

Actually this command make a new folder named "styleguide", beside src folder in your angular project and all thing is ready and you just open "/styleguide/index.html" and Enjoy. I hope it help you.