A design system is a standardized set of UI features and design patterns, such as components, layouts and visual styles, that form the foundation for an application’s UI.
Design systems help teams deliver a consistent, high-quality user experience with increased code reuse, shorter time-to-market and lower total of of ownership.
Documentation is an essential part of a design system, as it helps team members keep track of the available UI features and use them as a basis for all their design and implementation work. Design System Publisher is the quick and easy way to create a documentation website for your own, Vaadin-based design system.
Design System Publisher is available for Prime and Enterprise subscribers. If you are already subscribed and need help with getting started, contact our experts through Expert Chat. No subscription? Start free trial.
Use the Vaadin Design System documentation as a starting point
The installer provides you with a copy of the Vaadin Design System documentation as a starting point, so you don’t have to write all documentation from scratch. Simply customize and extend with your own theme, components and documentation.
Updates to the Vaadin Design System can be merged into your own documentation using Git.
Add your theme and components as dependencies
Packaging your theme and components into dependencies allows them to be used in the documentation website and multiple Vaadin applications without duplication.
Write documentation in the AsciiDoc markdown format
AsciiDoc is a human-readable mark-up format with a simple syntax for formatting text and embedding content and code snippets, which Design System Publisher compiles into web pages.
A composite date input field with separate sub-fields for day, month and year.
Use read-only when content needs to be accessible but not editable. Read-only elements cannot be edited, but they do participate in the tabbing order and can thus receive focus. The contents of a read-only input can be selected and copied.
Live, interactive Java and Web Component samples
Live components and code samples can be easily embedded into the documentation. Both Java (Flow) and TypeScript based components are supported.
Create your own UI documentation website in 8 easy steps
2. Package and Deploy Your Theme and Components
Export the theme and your custom components either as separate packages or into a single JAR file, and deploy them into your local Maven repository.
> mvn install -DartifactId=my-design-system
3. Initialize a New Documentation Website Project
Install the vaadin-cli command-line tool, run the command to initialize a new documentation website project, bundled with the Vaadin Design System documentation as a starting point.
> npm i -g @vaadin/cli
> vaadin-dsp init
4. Add Theme and Component Dependencies
Add your theme and component dependencies to the documentation website project’s
= Date Field
A composite date input field with separate sub-fi month and year.
6. Brand the Website
Adjust the styling of the website itself to match your own brand by tweaking a few CSS variables.
7. Start It Up!
Make a development build and run the website locally.
> npm run dspublisher:start
8. Deploy to Production
Finally, when you’re happy with the initial content, you can make a production build and deploy the website to your organization’s server and let your team start designing and developing
> npm run dspublisher:build
No active Prime or Enterprise subscription? Start free trial.