DEV Community

Cover image for Mint 🌿 The programming language for writing single page applications (SPA)
Vic Shóstak
Vic Shóstak

Posted on • Updated on

Mint 🌿 The programming language for writing single page applications (SPA)


Hello! 👋 Today, I will tell you story about Mint lang, very young (but interesting) programming language focused on building SPA (single page applications). It has all tools you need to write error free, easily readable and maintainable applications in record time.

Impressed? Me too! Let's deal with this together... 😉

📝 Table of contents

Mint lang logo

What's Mint lang actually?

First of all, Mint written on Crystal:

[...] a general-purpose, object-oriented programming language [...] with syntax inspired by the language Ruby [...] it is a compiled language with static type-checking, but specifying the types of variables or method arguments is generally unneeded.

— Wiki

Next, follow official Mint guide:

Mint is a language specifically created for writing single-page applications. It is a compiler and a framework combined to provide great developer experience while allowing to write safe, readable and maintainable code.

Yes, it's true! Looks to this code (sorry for the code highlighting):

// src/

component Counter {
  state counter : Number = 0

  fun increment : Promise(Never, Void) {
    next { counter = counter + 1 }

  fun decrement : Promise(Never, Void) {
    next { counter = counter - 1 }

  fun render : Html {
      <button onClick={decrement}>

        <{ Number.toString(counter) }>

      <button onClick={increment}>
Enter fullscreen mode Exit fullscreen mode

Very similar to a strictly typified language, but with included JSX-style, right?

[...] It was born out of the frustration of the JavaScript language and ecosystem (NPM) and the Elm language and it's not so open development practices.

OK! 👌 Let's decide right away: why not JavaScript and what's wrong with Elm.

Why not JavaScript?

JavaScript is not a strongly typed language which makes it difficult to write error-free code and leads to not so great developer experience.

Also, it does not have the tools to create web applications out of the box, you need frameworks and compilers and build tools that increase complexity.

Why not Elm?

Elm has great developer experience, but it being a purely functional language leads to some boilerplate code and makes it harder to learn.

Also, it's not possible to contribute or influence the language in any meaningful way.

Why Mint lang? 🤔

Mint aims to combine the developer experience of Elm and the expressiveness of React to create the perfect language for building single-page applications.

After one year of development, Mint has the following features:

  1. A good type system
  2. Nice error messages
  3. Formatter
  4. Components for composition
  5. Stores for data storage
  6. Built-in styling
  7. Built-in routing
  8. Great JavaScript interoperability
  9. Immutable data structures

Mint tools & ecosystem

Mint tools & ecosystem

I would not talk about this programming language if it did not have an ecosystem for starting and developing. So! 😎

Editor extensions

  • VS Code — adds syntax highlighting and autocomplete support
  • Emacs — adds syntax highlighting and auto-formatting using mint format
  • IntelliJ IDEA — adds syntax highlighting
  • Atom — adds syntax highlighting
  • Vim — very minimal (but working) syntax/ftdetect combo


Installing Mint CLI via command:

# For macOS:
$ brew tap homebrew-community/alpha
$ brew install mint-lang

# For Linux:
$ wget --no-verbose -O mint
$ chmod +x ./mint
$ sudo mv ./mint /usr/local/bin/mint
Enter fullscreen mode Exit fullscreen mode

And now, see all commands by call Mint with --help flag:

$ mint --help

Mint - Help
  mint [flags...] [arg...]


  --env, -e (default: "")  # Loads the given .env file
  --help                   # Displays help for the current command.

  build                    # Builds the project for production
  docs                     # Starts the documentation server
  format                   # Formats source files
  init                     # Initializes a new project
  install                  # Installs dependencies
  loc                      # Counts Lines of Code
  start                    # Starts the development server
  test                     # Runs the tests
  version                  # Shows version
Enter fullscreen mode Exit fullscreen mode

Decentralized package management

This page contains the packages that you can use in your projects:


Routes of an application are defined at the top level with the routes block. Keep in mind the following things:

  • Routes are matched in the order they are defined from top to bottom
  • Routes can only have one routes block per application
  • Routes are used to set the state, not to render things

Example code:

routes {
  / {

  /users/:id (id: Number) {
    sequence {

  /blog {

  /blog/:slug (slug: String) {
    sequence {
Enter fullscreen mode Exit fullscreen mode

CSS Styling

In Mint components, styles can be defined with an identifier, then applied to HTML using the identifier as a CSS class.

A style can contain any number of CSS definitions, sub rules, media queries, if and case statements.

Example code:

component Main {
  style button {
    background: red;
    color: white;
    border: 0;

  fun render : Html {
      "Click ME!"
Enter fullscreen mode Exit fullscreen mode

Final result

After mint build, you have production ready Preact SPA. That's it! 🎉

Photo by

[Title] Ben Kolde
[1] Mint authors
[2] Anthony Fomin


If you want more articles (like this) on this blog, then post a comment below and subscribe to me. Thanks! 😻

And of course, you can help me make developers' lives even better! Just connect to one of my projects as a contributor. It's easy!

My projects that need your help (and stars) 👇

  • 🔥 gowebly: A next-generation CLI tool for easily build amazing web applications with Go on the backend, using htmx & hyperscript and the most popular atomic/utility-first CSS frameworks on the frontend.
  • create-go-app: Create a new production-ready project with Go backend, frontend and deploy automation by running one CLI command.
  • 🏃 yatr: Yet Another Task Runner allows you to organize and automate your routine operations that you normally do in Makefile (or else) for each project.
  • 📚 gosl: The Go Snippet Library provides snippets collection for working with routine operations in your Go programs with a super user-friendly API and the most efficient performance.
  • 🏄‍♂️ csv2api: The parser reads the CSV file with the raw data, filters the records, identifies fields to be changed, and sends a request to update the data to the specified endpoint of your REST API.
  • 🚴 json2csv: The parser can read given folder with JSON files, filtering and qualifying input data with intent & stop words dictionaries and save results to CSV files by given chunk size.

Top comments (14)

sergix profile image
Peyton McGinnis

It's kind of crazy to think we've come so far as to need entire languages specifically intended for building SPAs, but I think this seems to be quite useful and I was impressed by some of its features.

akoppela profile image
Andrey Koppel

The author does not like Elm so much that he even put "Why not Elm" in the official guide for the Mint language. No thanks. That's too much.

BTW what Mint makes different from TypeScript + React and friends?

koddr profile image
Vic Shóstak

BTW what Mint makes different from TypeScript + React and friends?

Hmm.. I'm not author of Mint lang and don't know that 🤷‍♂️

But I think, it's different way to write code (and build SPA/Frontend). Because in my opinion, Mint is something like template engine (Pug, for example) with some logic, who's compiling to browser's standard format (html, js, css).

So, it's wrong to compare TypeScript and Mint lang directly like this.

nahueltori profile image
Nahuel Tori

Very good news, I was waiting for a language for the web different than JavaScript.

Not so mature yet, but impressive list of features for a recently born language.
Definitely going to give it a try.

koddr profile image
Vic Shóstak

Wow! How to call him? Interesting 😉

adnanbabakan profile image
Adnan Babakan (he/him) • Edited

I'm honestly surprised about the fact that there is a language specifically used to design SPAs!
But to be honest I don't think it is going to be used as much as JavaScript is used.

abdurrkhalid333 profile image
Abdur Rehman Khalid

Syntax and Readability are very easy to understand. I will surely make some time to give it a try.

kioviensis profile image
Max Tarsis

looks like a gamer changer
thx for sharing such a great thing

karthiksciera profile image

some time to give it a try

dylanmichaelryan profile image
Dylan R

Looks very simple and interesting, but I'm not sure if I like the syntax 🤔

consciousness_dev profile image
Ario Setiawan

Wait for state management built in feature :D

aniganesh profile image

What about browser support?

koddr profile image
Vic Shóstak

It compiles to Preact SPA template.

tudorhulban profile image
Tudor Hulban • Edited

Very nice!
Communication with server:
What about Web Sockets?