Mate: a language for building visual components

Walter Zalazar — Wed, 16 Jul 2025 14:00:00 +0000

A few months ago, while working on my Master's thesis in Software Engineering, I asked myself a simple question:

Why don’t we use Web Components to build modern web applications?

After all, they’re a standard. They’re supported by every major browser. They don’t rely on external libraries. And they work well in any environment.

But when I tried using them, I quickly understood why almost no one does.

Building a Web Component from scratch is uncomfortable. You have to extend classes, register them manually with customElements.define, and handle the Shadow DOM by hand. There’s no clear way to manage state—let alone reactivity.

Everything that takes you 10 lines in React or Vue turns into repetitive, hard-to-maintain boilerplate when using raw Web Components.

That’s when the idea came up:

What if there were a language that let you write Web Components like you would in React or Svelte, but without relying on frameworks?

A declarative language with a clean, simple syntax. Where state is reactive. And that compiles directly to native components. No unnecessary runtime. No hidden dependencies.

That’s how Mate was born.

A language designed for the browser. Compiled with Rust. With its own grammar built using Tree-sitter. And with a clear mission: to bring simplicity back.

When I started building the compiler, I chose Lit as the initial compilation target.

Why? Because Lit is lightweight, modern, and well-aligned with web standards. It allowed me to focus on what really mattered: designing the language itself.

But Mate is not Lit. You don’t need to learn its API. No decorators.
No classes to extend.

You just write HTML and declarative logic. The compiler takes care of the rest.

Lit is just a compilation backend for now. In the future, Mate will be able to generate native Web Components without relying on any framework at all.

An example

Here’s a counter written in Mate:

Mate is still under development, but you can already try out some examples.
I'm building an online playground and documenting the whole process to share it with the community.

This project is part of my thesis, but it also answers a deeper need:
The need to build tools that last, that respect standards, and that don’t force developers to relearn everything every couple of years.

Mate isn’t just another language. It’s a way to fall back in love with frontend development. With a mate in hand. And a browser opens.

Interested in trying Mate? Want to join as a tester, collaborator, or just follow the progress?
I’m happy to chat and share updates. Feel free to message me or leave a comment below 🧉

DEV Community: Walter Zalazar

Mate: a language for building visual components

An example