MDL Syntax

MDL Syntax adds Visual Studio Code support for .mdl files. It highlights the MDL authoring language, applies MDL-friendly indentation defaults, and includes snippets for common page, form, button, input, card, and script patterns.

MDL itself is built with the separate mdl CLI. The normal workflow is:

mdl init / mdl new  -> create project files
VS Code extension   -> edit .mdl files comfortably
mdl check/build     -> validate and compile
mdl serve           -> run the local dev server

Features

• Syntax highlighting for .mdl files
• Highlighting for comments, section headers, attributes, dot inline elements, Markdown content, and script js: blocks
• Language registration for the .mdl file extension
• Two-space indentation defaults for MDL documents
• Smart indentation after block-style headers such as page:, section:, and script js:
• Snippets for common MDL page, card, form, button, input, and script patterns

Create A Project

Install MDL inside a new project folder:

mkdir my-mdl-site
cd my-mdl-site
npm install @tosiiko/mdl
source bin/activate
mdl serve

A local install creates starter files when they are missing, so the folder is ready to open in VS Code immediately:

code .

You can also initialize an existing folder explicitly:

npm install @tosiiko/mdl
source bin/activate
mdl init
mdl serve

Install globally when you want the mdl command available in any terminal:

npm install -g @tosiiko/mdl
mdl new my-mdl-site
cd my-mdl-site
mdl serve

Created Folder Structure

mdl init creates a working project:

my-mdl-site/
  mdl.json
  README.md
  .gitignore
  bin/
    activate
  pages/
    index.mdl
  css/
    main.css
    layout.css
    components.css
  scripts/
    app.js
  assets/
    mdl-logo-tagline-light.png

The generated mdl.json includes active defaults plus commented optional areas for root folders, extra stylesheets, head scripts, JavaScript modules, copied assets, and the dev-server port.

Starter Page

The default pages/index.mdl is intentionally small and ready to edit:

page:
  hero:
    .img@src(assets/mdl-logo-tagline-light.png)@alt(MDL logo)
    # my-mdl-site
    Built with MDL.

  nav:
    .link(home)

  section:
    ## Get started

    Edit `pages/index.mdl` to build your page.
    Style it in `css/components.css`.

Common Commands

Run these from the project terminal in VS Code:

source bin/activate
mdl check
mdl format
mdl format --check
mdl build
mdl serve

Use mdl check before committing, mdl format to normalize .mdl files, mdl build to write static output to dist/, and mdl serve to run the live development server at http://127.0.0.1:3999.

Without mdl.json, pass a file directly:

mdl check pages/index.mdl
mdl build pages/index.mdl --style css/main.css
mdl serve pages/index.mdl

Snippets

Start typing these prefixes in a .mdl file:

page    Page scaffold
card    Card section
form    Form with label, input, and submit button
script  Inline script js block
btn     Primary button
input   Input element

What This Extension Does

This extension improves editing for .mdl files inside VS Code. It does not bundle the MDL CLI, create projects by itself, run the dev server, or publish your site. Use the @tosiiko/mdl npm package for those commands.

Planned extension improvements include:

• VS Code commands for mdl check, mdl format, mdl build, and mdl serve
• Local preview support
• Diagnostics from the MDL compiler
• Autocomplete for MDL primitives and attributes

Requirements

• Visual Studio Code 1.85.0 or newer
• Node.js 18 or newer when installing the MDL CLI from npm
• The MDL CLI, if you want to run mdl commands from the terminal

License

This extension uses the MIT OR Apache-2.0 license expression.