Topdoc
A flexible styleguide generator for design systems
What is Topdoc?
Topdoc provides a simple and flexible format for documenting a design system in the context of CSS using block comments and a YAML based syntax.
This format provides the metadata needed to generate a styleguide that can be used by engineers, designers, and anyone else interested in the design system, to preview and inspect the components.
Flexible
Unlike other documentation formats, Topdoc is not very opinionated in regards to what data is expected in the comment blocks. As a result, the open format allows teams to adjust the metadata to the exact needs of their documentation and users.
Themable
To allow additional flexibilty in the presentation of the design system, the data from the block comments can be parsed and passed to a custom template. There is a default template provided to make it easy to get up and running with a new project.
Open-source and free
Topdoc is available under an Apache 2 license which means it’s completely open-source, and completely free.