MDS Assistant is an experiment.
Hi, I'm the MDS Assistant and can help you with information from our guidelines and components.

I do not provide code and development guidance. For coding assistance, please check out our experimental MCP server.

VS Code extension for MDS

Limit the context switching between code and docs.
Marcin Sieradzki
Software Engineer
27 January 2025

Introducing the MDS VS Code extension

We’re excited to announce the release of our Visual Studio Code extension for the Maersk Design System!

This extension is designed to enhance the developer experience when working with MDS components and utilities.

Why we built it

As the Maersk Design System has grown, we’ve noticed developers spending time looking up class names, design tokens, and icon names in our documentation. We wanted to bring this information directly into your development environment, making it faster and easier to work with MDS.

Features

(as of 27 January 2025)

1. CSS classes autocompletion

Never memorize class names again! The extension provides suggestions for all MDS foundation classes, including:

  • Grid layouts
  • Typography styles
  • Color utilities
  • Spacing and gap utilities
  • Link styles
  • Table styles
  • Breadcrumb components

You can trigger them manually with Ctrl+Space (Windows) or Option+ESC (Mac).

2. Design tokens integration

Working with design tokens is now seamless:

  • Get autocompletion for all MDS design tokens when typing var(
  • See the actual values in the suggestions
  • Hover over any token to see its current value
  • Works in CSS, SCSS, and even inline styles in framework files

3. Icon completion

Finding the right icon is just a keystroke away:

  • Automatic suggestions in <mc-icon> components
  • Support for both leading and trailing icons in all MDS components that use icons
  • Quick access to our full icon library

Getting started

  1. Open VSCode
  2. Click the Extensions icon in the sidebar
  3. Search for “MDS” or “Maersk Design System”
  4. Click Install on the “MDS” extension by Maersk Design System

You can also install it from the VS Code Marketplace.

That’s it! The extension will automatically activate when you open files in supported languages.

We want to hear from you!

Have suggestions for new features? Found a bug? Or just want to share how you’re using the extension? We’d love to hear from you! You can:

Your input helps us make the developer experience even better.

Looking ahead

This is just the beginning! We’re continuously working on improving the extension and adding new features. Stay tuned for updates, and don’t forget to enable automatic updates in VS Code to get the latest improvements as they’re released.

Happy coding with MDS! 🚢