• Slack chat
• Slack chat invite link

(Digitaal Stelsel Omgevingswet, translated, stands for Digital System for the Environment and Planning Act of the Netherlands)

The DSO Toolkit consists of documentation and a style guide. In addition, two implementations are provided: CSS and Web Components. The Web Components for Angular and React get wrappers, see issue #915.

Zie https://www.dso-toolkit.nl voor actuele documentatie.

npm install dso-toolkit --save-dev

Import or bundle dso-toolkit/dist/dso.css.

The toolkit and component library are distributed to dso-toolkit.nl. Use the table below to resolve the branch/channel to the base url:

The same goes for the component library:

<link rel="stylesheet" href="https://cdn.dso-toolkit.nl/dso-toolkit/[master|VERSION]/dist/dso.css" />

or minified:

<link rel="stylesheet" href="https://cdn.dso-toolkit.nl/dso-toolkit/[master|VERSION]/dist/dso.min.css" />

For Web Components:

<script type="module" src="https://cdn.dso-toolkit.nl/[master|VERSION]/core/dso-toolkit.esm.js"></script>
<script nomodule src="https://cdn.dso-toolkit.nl/[master|VERSION]/core/dso-toolkit.js"></script>

The referenced scripts are very small: Only the actually used Web Components are lazy loaded. For more information: https://stenciljs.com/docs/distribution

To work on the DSO Toolkit using components and variants or create mockups of pages, forms or components you need Node 24 and pnpm. See CONTRIBUTING.md on how to contribute.

Enable pnpm via corepack (ships with Node):

corepack enable

git clone git@github.com:dso-toolkit/dso-toolkit.git
cd dso-toolkit
pnpm install

Depending on the work being done, development can be done in several environments:

This environment is used to develop new components in Storybook.

The easiest way to start the development environment is with:

pnpm start

This will start the following processes:

• CSS in watch mode
• Stencil in watch mode
• Storybook
• Cypress

This will start Stencil on http://localhost:45333, Storybook on http://localhost:45000 and the Cypress GUI. Since Stencil and Storybook are running it's possible to develop the components, but keep in mind the tests run in a production environment: This means no Stencil development tools like HMR.

Node 24. For development on the DSO Toolkit you also need pnpm (enabled via corepack enable).

Ports used during development:

• 43300 - Docusaurus
• 45333 - Stencil
• 45000 - Storybook for HTML/CSS + Web Components