Documentation versions (currently viewingVaadin 24)

Design System Publisher

Commercial feature

A commercial Vaadin subscription is required to use Design System Publisher in your project.

Design System Publisher is a tool for creating a documentation website for your own Vaadin-based design system, meaning the components, theme features, UI patterns and guidelines that your application UIs are composed of.

Having your own documentation website makes it easier for your developers and designers to keep track of the features available in your UI platform, what they look like, and how they can be used.

The site’s content format is AsciiDoc, a lightweight markup language similar to Markdown. The system supports embedding live component samples, written in Java and/or TypeScript, directly into the pages. The system can automatically provide code snippets for the samples for copy-pasting into code.

The default documentation content provided with the tool is a copy of the official Vaadin Design System documentation. You can customize it to match your own UI features by plugging in your own Custom Theme for Rendered UI Examples, and by adding, removing, and editing the documentation and component examples.


Getting Started
Set up your own design system documentation project using Design System Publisher.
Development Server
When you edit the pages of your documentation website, you run the Design System Publisher development server locally to to see the resulting website as you edit the content.
Site Content
The page hierarchy of the documentation website is defined by the folder structure of files written using the AsciiDoc markup language. Learn how to write these documentation pages.
Site Customization
The documentation website styles can be customized to fit the brand and design guidelines of your organization. Custom headers and footers are also possible.
Custom Theme
The rendered UI examples within the documentation pages can use a custom theme, which is the same theme you would use for the applications you create using your design system.
Various aspects of the documentation website can be configured through environment variables or with a JSON configuration file.
Production Setup
Once you are happy with the content and appearance of your design system documentation site, it’s time to build for production deployment.
Keeping your documentation up to date with the official Vaadin Design System documentation.
This page describes issues you might encounter while using Design System Publisher.