DEV Community

Cover image for Mint πŸƒ: Creating Packages
Szikszai GusztΓ‘v
Szikszai GusztΓ‘v

Posted on • Updated on

Mint πŸƒ: Creating Packages

This is the sixth post in a series that showcases the features of Mint, you can find the previous posts here:

In this post I will show you how to create a package to share with others.

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!
Enter fullscreen mode Exit fullscreen mode

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, a) = (value : String) : Void { void }
  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) : a {
    |> Dom.getValue()
    |> onChange()

  fun render : Html {
        "Character Count: "

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


Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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!

Enter fullscreen mode Exit fullscreen mode

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 {

Enter fullscreen mode Exit fullscreen mode

Here you can find the repository:

GitHub logo mint-lang / mint-textarea-counter

Example package to share a component.


This repository is an example of a Mint package.

That's it for today, thank you for reading πŸ™

If you like to learn more about Mint check out the guide πŸ“–

In the next part I'm going to show how you how you can use the built in routing system πŸ˜‰ see you there πŸ‘‹

Top comments (4)

watzon profile image
Chris Watson

Mint is written in Crystal is it not?

gdotdesign profile image
Szikszai GusztΓ‘v

Yes it is written in Crystal :)

devhammed profile image
Hammed Oyedele

Going through the source, I noticed that Mint is using React.JS under the hood.

itachiuchiha profile image
Itachi Uchiha

I really loved the Mint :)

Thanks :)