Try Install Learn Blog API Packages GitHub

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!