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. This is the components, theme features, UI patterns, and guidelines of which your application UIs are composed.

Having your own documentation website makes it easier for your developers and designers to keep track of features available in your UI platform, how they look, 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 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
Using a custom theme when rendering UI examples within documentation pages, the same theme for applications you create with 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’re 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.