The programming language for writing single page applications.

Mint has all the tools you need to write error free, easily readable and maintainable applications in record time.

component Counter {
  state counter = 0

  fun increment {
    next { counter: counter + 1 }
  }

  fun decrement {
    next { counter: counter - 1 }
  }

  fun render {
    <div>
      <button onClick={decrement}>
        "Decrement"
      </button>

      <span>
        <{ Number.toString(counter) }>
      </span>

      <button onClick={increment}>
        "Increment"
      </button>
    </div>
  }
}

Styling

In Mint you can style elements directly with CSS using style blocks.

Inside a style block you can nest as many sub selectors and media queries as you like.

Interpolate any Mint expressions in any value using the interpolation syntax: #{...}

You can even use if and case expressions inside any block to apply styles conditionally.

Styling Reference

component TodoItem {
  property color = "#333"
  property label = ""
  property done = false

  style base {
    align-items: center;
    display: flex;
  }

  style label {
    font-weight: bold;
    color: #{color};
    flex: 1;

    if (done) {
      text-decoration: line-through;
    }
  }

  fun render {
    <div::base>
      <span::label>
        <{ label }>
      </span>

      <Icon.Checkmark/>
      <Icon.Trash/>
    </div>
  }
}

Data Management

In Mint a store contains and manages some data.

Stores are globally accessible and can be connected to components.

When the data in a store changes the connected components are re-rendered.

Stores Reference

record Todo {
  label : String,
  done : Bool
}

store Todos {
  property items = [] of Todo

  fun add (todo : Todo) {
    next { items: Array.push(todo, items) }
  }

  fun delete (todo : Todo) {
    next { items: Array.delete(todo, items) }
  }
}

component TodoList {
  connect Todos exposing { add, delete }

  ...
}

Routing

In Mint routing is a language feature instead of a library.

Routes can be defined in a routes block, with support for typed path parameters.

The runtime handles clicks on anchor tags and navigates in a smart way so you don't have to.

Routing Reference

routes {
  / {
    Application.setPage(Page::Home)
  }

  /blog {
    Application.setPage(Page::Blog)
  }

  /blog/:slug (slug : String) {
    Posts.load(slug)
    Application.setPage(Page::Post)
  }

  * {
    Application.setPage(Page::NotFound)
  }
}

JavaScript Interoperability

You can inline any JavaScript code easily by using bacticks: `...`

There are constructs for helping converting values:

encode converts a typed value into a JavaScript object
decode converts a JavaScript object into a typed value

Interpolating Mint code in the inlined JavaScript can be done with the interpolation syntax: #{...}

Interop Reference

module MyFunctions {
  fun alert(message : String) : Promise(Never, Void) {
    `
    (new Promise((resolve) => {
      alert(#{message})
      resolve()
    })()
    `
  }

  fun decode : Maybe(TodoItem) {
    let object =
      `{ label: "Check out Mint!",
         done: false }`

    Result.toMaybe(decode object as TodoItem)
  }
}

Batteries Included

Mint has all the features you need, built in:

Development Server
Code Formatter
Test Runner
Package Manager
Documentation Generator
Build Tool

Cli Reference

$ mint init my-awesome-project

Mint - Initializing a new project
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚙ Creating directory structure...
⚙ Writing initial files...
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
All done in 2.231ms!

$ mint start --auto-format

Mint - Running the development server
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚙ Ensuring dependencies... 181μs
⚙ Parsing files... 2.608ms
⚙ Development server started on http://127.0.0.1:3000/

$ mint install

Mint - Installing dependencies
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚙ Constructing dependency tree...
  ✔ Cloned mint-codemirror (https://github.com/mint...)

⚙ Resolving dependency tree...
  ◈ mint-codemirror ➔ 6.0.0

⚙ Copying packages...
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
All done in 2.75s!

What are you waiting for?

Getting started with Mint is easy!

Try Install Learn