Try Install Learn Blog API Packages GitHub

Creating Packages Saturday, May 25th, 2019

Mint has built-in support for packages - code shared on any public Git repository - which allows you to share Components, Modules and even Stores with others.

Creating a package

In this post we will create a package for a textarea which has a built-in counter.

First we need to create a new Mint application (which itself is a package):

➜  Projects git:(master) ✗ mint init mint-textarea-counter
Mint - Initializing a new project
⚙ Creating directory structure...
⚙ Writing initial files...

There are no dependencies!

There is nothing to do!

Adding a component

Instead of a Main component we will create one for the textarea named Textarea.Counter ( source/ ):

component Textarea.Counter {
  property onChange : Function(String, Promise(Never, Void)) =
    (value : String) : Promise(Never, Void) { next { } }

  property value : String = ""

  style base {
    border: 1px solid #DDD;

    flex-direction: column;
    display: inline-flex;

  style textarea {
    font-family: sans-serif;
    font-size: 16px;

    padding: 10px;
    margin: 0;
    border: 0;

  style counter {
    font-family: sans-serif;
    background: #EEE;
    font-size: 14px;
    padding: 10px;

  fun handleChange (event : Html.Event) : Promise(Never, Void) {
    |> Dom.getValue()
    |> onChange()

  fun render : Html {
        "Character Count: "

          |> String.size()
          |> Number.toString()


During development I suggest creating a Main component for testing which is not added to the Git repository.

Creating the Git repository

To share this component with others we need to create a Git repository, in this case we will created one on Github and we need to push our code to it:

➜  mint-textarea-counter ✗ git init
Initialized empty Git repository in /home/.../mint-textarea-counter/.git/

➜  mint-textarea-counter git:(master) ✗ git remote add origin .../mint-textarea-counter.git

➜  mint-textarea-counter git:(master) ✗ git add .

➜  mint-textarea-counter git:(master) ✗ git commit -m "Initial commit."
[master (root-commit) 5250277] Initial commit.
 3 files changed, 60 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 mint.json
 create mode 100644 source/

➜  mint-textarea-counter git:(master) git push origin HEAD

Now we have the repository set up, the next thing is to create a tag for the first version:

➜  mint-textarea-counter git:(master) git tag 1.0.0
➜  mint-textarea-counter git:(master) git push origin HEAD --tags
Total 0 (delta 0), reused 0 (delta 0)
 * [new tag]         1.0.0 -> 1.0.0

Now the package is ready to be used.

Using the package

In an other Mint application we can use this package by defining it as a dependency in dependencies field in mint.json :


  "dependencies": {
    "mint-textarea-counter": {
      "repository": "",
      "constraint": "1.0.0 <= v < 2.0.0"

I'll explain what the code above means:

  • we have defined the dependency: mint-textarea-counter (this must match the name field in the packages mint.json )
  • we specified which Git repository it lives in using the repository field
  • we specified the version constraint in the constraint field

After that we only need to install the dependencies with the mint install command:

➜  test git:(master) ✗ mint install
Mint - Installing dependencies
⚙ Constructing dependency tree...
  ✔ Cloned mint-textarea-counter(

⚙ Resolving dependency tree...
  ◈ mint-textarea-counter ➔ 1.0.0

⚙ Copying packages...
All done in 1.231s!

And then we can use the component the same way if it was defined in the project:

component Main {
  state value : String = "Initial value..."

  fun handleChange (value : String) : Promise(Never, Void) {
    next { value = value }

  fun render : Html {

Here you can find the repository:

That's it for today, thank you for reading 🙏