# \[ANN\] .mlx syntax dialect

**URL:** <https://discuss.ocaml.org/t/ann-mlx-syntax-dialect/15035>\
**Category:** Community\
**Tags:** mlx, announce\
**Created:** [July 27, 2024, 7:06am UTC](https://discuss.ocaml.org/t/ann-mlx-syntax-dialect/15035 "2024-07-27T07:06:33Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![andreypopp](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/andreypopp/32/97_2.png) [@andreypopp](https://discuss.ocaml.org/u/andreypopp)\
**Post date:** [July 27, 2024, 7:06am UTC](https://discuss.ocaml.org/t/ann-mlx-syntax-dialect/15035/1 "2024-07-27T07:06:33Z")

</div>

Dear OCaml community,

it is my pleasure to announce a release of [.mlx](https://github.com/ocaml-mlx/mlx) dialect.

The .mlx dialect extends OCaml syntax with JSX expression construct, following the example of JSX in JavaScript/ReasonML. A brief snippet:

```ocaml
let page ?(encoding="utf8") ~title ~content =
  <html>
    <head>
      <meta charset=encoding />
      <title>title</title>
    </head>
    <body>
      content
    </body>
  </html>

let _ = <page title="Hello" content="World" />

```

The main use case is to make it easier to describe user interfaces with OCaml, which can range from generating HTML ([example with Dream](https://github.com/aantron/dream/blob/dc805cb46fd99001bc828cddb9de053a3dc464eb/example/w-mlx/README.md)) to describing interactive UIs with ReasonReact ([example](https://github.com/andreypopp/melange-mlx-template/blob/main/src/ReactApp.mlx)).

### Installation and usage

Install the packages from opam:

```sh
opam install mlx ocamlmerlin-mlx

```

Then configure dune to use the `mlx` preprocessor:

```lisp
(dialect
 (name mlx)
 (implementation
  (extension mlx)
  (merlin_reader mlx)
  (preprocess
   (run mlx-pp %{input-file}))))

```

Now files with `.mlx` extension will be treated as OCaml modules.

The merlin/ocamllsp users will get roughly the same level of support for `.mlx` syntax as they get for `.ml` but some additional text editor/IDE configuration is needed to associate `.mlx` files with merlin/ocamllsp.

For neovim users there’s a plugin [ocaml-mlx/ocaml\_mlx.nvim](https://github.com/ocaml-mlx/ocaml_mlx.nvim), which does that bit of a configuration and provides highlighting for `.mlx` files based on a tree-sitter parser.

---

<div class="post-metadata">

**Author:** ![lindig](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/lindig/32/532_2.png) [@lindig](https://discuss.ocaml.org/u/lindig)\
**Post date:** [July 27, 2024, 8:48am UTC](https://discuss.ocaml.org/t/ann-mlx-syntax-dialect/15035/2 "2024-07-27T08:48:39Z")

</div>

> [@andreypopp](#):
>
> ```auto
> <body>
> content
> </body>
> 
> ```

In your example `content` is a parameter, i.e. a computed value. How would literal content look like?

---

<div class="post-metadata">

**Author:** ![andreypopp](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/andreypopp/32/97_2.png) [@andreypopp](https://discuss.ocaml.org/u/andreypopp)\
**Post date:** [July 27, 2024, 9:15am UTC](https://discuss.ocaml.org/t/ann-mlx-syntax-dialect/15035/3 "2024-07-27T09:15:40Z")

</div>

> [@lindig](#):
>
> In your example `content` is a parameter, i.e. a computed value. How would literal content look like?

The children of JSX elements are OCaml expressions, so you’d have to use a string:

```ocaml
<body>
  "content"
</body>

```

The grammar extension is intentionally pretty minimal to easy the maintenance. So it’s not trying to follow HTML very closely.

---

<div class="post-metadata">

**Author:** ![anarres](https://avatars.discourse-cdn.com/v4/letter/a/e9a140/32.png) [@anarres](https://discuss.ocaml.org/u/anarres)\
**Post date:** [July 27, 2024, 11:11am UTC](https://discuss.ocaml.org/t/ann-mlx-syntax-dialect/15035/4 "2024-07-27T11:11:25Z")

</div>

Looks great, that’s exactly what I was looking for. I’d love to use OCaml with Melange to write react apps but really don’t want to resort to Reason for this. Hopefully not too off topic: Any idea if the `reason-react-ppx` is going to work with the original OCaml-syntax so I can build the whole app in OCaml?

---

<div class="post-metadata">

**Author:** ![andreypopp](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/andreypopp/32/97_2.png) [@andreypopp](https://discuss.ocaml.org/u/andreypopp)\
**Post date:** [July 27, 2024, 11:19am UTC](https://discuss.ocaml.org/t/ann-mlx-syntax-dialect/15035/5 "2024-07-27T11:19:38Z")

</div>

> [@anarres](#):
>
> Hopefully not too off topic: Any idea if the `reason-react-ppx` is going to work with the original OCaml-syntax so I can build the whole app in OCaml?

Yes! The [link to ReasonReact example](https://github.com/andreypopp/melange-mlx-template/blob/main/src/ReactApp.mlx) in the OP is doing exactly that — mlx syntax used with `reason-react-ppx`.

---

<div class="post-metadata">

**Author:** ![anarres](https://avatars.discourse-cdn.com/v4/letter/a/e9a140/32.png) [@anarres](https://discuss.ocaml.org/u/anarres)\
**Post date:** [July 27, 2024, 11:21am UTC](https://discuss.ocaml.org/t/ann-mlx-syntax-dialect/15035/6 "2024-07-27T11:21:56Z")

</div>

This is just great. Going to use this right away!

---

<div class="post-metadata">

**Author:** ![314eter](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/314eter/32/25_2.png) [@314eter](https://discuss.ocaml.org/u/314eter)\
**Post date:** [July 28, 2024, 6:39pm UTC](https://discuss.ocaml.org/t/ann-mlx-syntax-dialect/15035/7 "2024-07-28T18:39:38Z")

</div>

> [@andreypopp](#):
>
> The children of JSX elements are OCaml expressions, so you’d have to use a string

Is there a reason for not following the JSX approach of enclosing code in HTML expressions in `{}`? Especially in OCaml, it seems confusing to me that

```auto
<body>
    f x
</body>

```

doesn’t have the result of the function application `f x` as child, but two children `f` and `x`.

---

<div class="post-metadata">

**Author:** ![andreypopp](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/andreypopp/32/97_2.png) [@andreypopp](https://discuss.ocaml.org/u/andreypopp)\
**Post date:** [July 29, 2024, 10:35am UTC](https://discuss.ocaml.org/t/ann-mlx-syntax-dialect/15035/8 "2024-07-29T10:35:23Z")

</div>

> [@314eter](#):
>
> Is there a reason for not following the JSX approach of enclosing code in HTML expressions in `{}`? Especially in OCaml, it seems confusing to me that
> 
> ```auto
> <body>
> f x
> </body>
> 
> ```
> 
> doesn’t have the result of the function application `f x` as child, but two children `f` and `x`.

Unfortunately there’s no good answer to that, the alternatives we’ve considered for JSX children syntax were:

1. Implement it as it is now — as a list of simple expressions
2. Use `{..}` brackets like you’ve suggested
3. Use `;` delimiter for a list of expressions

The 3. was ruled out as being to noisy. The 2. is also a good proposal but choice was made in favour of 1. partly because of simplicity.

I agree, it can seen confusing at first but the rule is simple — if that’a a non simple expressions (like application), then you wrap it with `(..)`, as in normal .ml syntax.

---

<div class="post-metadata">

**Author:** ![anentropic](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/anentropic/32/2509_2.png) [@anentropic](https://discuss.ocaml.org/u/anentropic)\
**Post date:** [July 29, 2024, 11:50am UTC](https://discuss.ocaml.org/t/ann-mlx-syntax-dialect/15035/9 "2024-07-29T11:50:26Z")

</div>

> [@andreypopp](#):
>
> The main use case is to make it easier to describe user interfaces with OCaml, which can range from generating HTML ([example with Dream](https://github.com/aantron/dream/blob/dc805cb46fd99001bc828cddb9de053a3dc464eb/example/w-mlx/README.md)) to describing interactive UIs with ReasonReact ([example](https://github.com/andreypopp/melange-mlx-template/blob/main/src/ReactApp.mlx)).

Why not add these examples to the project readme, I would never have found them.

---

<div class="post-metadata">

**Author:** ![andreypopp](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/andreypopp/32/97_2.png) [@andreypopp](https://discuss.ocaml.org/u/andreypopp)\
**Post date:** [July 29, 2024, 12:26pm UTC](https://discuss.ocaml.org/t/ann-mlx-syntax-dialect/15035/10 "2024-07-29T12:26:11Z")

</div>

> [@anentropic](#):
>
> Why not add these examples to the project readme, I would never have found them.

Good idea! Updated the README.

---

<div class="post-metadata">

**Author:** ![anentropic](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/anentropic/32/2509_2.png) [@anentropic](https://discuss.ocaml.org/u/anentropic)\
**Post date:** [July 31, 2024, 12:38pm UTC](https://discuss.ocaml.org/t/ann-mlx-syntax-dialect/15035/11 "2024-07-31T12:38:59Z")

</div>

Project looks great BTW, am keen to try it out!

---

<div class="post-metadata">

**Author:** ![borisd](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/borisd/32/3965_2.png) [@borisd](https://discuss.ocaml.org/u/borisd)\
**Post date:** [November 14, 2024, 5:37pm UTC](https://discuss.ocaml.org/t/ann-mlx-syntax-dialect/15035/12 "2024-11-14T17:37:43Z")

</div>

Has anyone made it work with TyXML?

---

<div class="post-metadata">

**Author:** ![andreypopp](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/andreypopp/32/97_2.png) [@andreypopp](https://discuss.ocaml.org/u/andreypopp)\
**Post date:** [November 16, 2024, 4:24am UTC](https://discuss.ocaml.org/t/ann-mlx-syntax-dialect/15035/13 "2024-11-16T04:24:49Z")

</div>

A small follow up announcement, the new package [ocamlformat-mlx](https://opam.ocaml.org/packages/ocamlformat-mlx/) has been released on opam. It’s a fork of ocamlformat with support for formatting .mlx syntax.

---

<div class="post-metadata">

**Author:** ![andreypopp](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/andreypopp/32/97_2.png) [@andreypopp](https://discuss.ocaml.org/u/andreypopp)\
**Post date:** [November 16, 2024, 8:17am UTC](https://discuss.ocaml.org/t/ann-mlx-syntax-dialect/15035/14 "2024-11-16T08:17:55Z")

</div>

> [@borisd](#):
>
> Has anyone made it work with TyXML?

I’m not aware of integration with TyXML but for generating HTML there’s [GitHub - davesnx/html\_of\_jsx: Render HTML with JSX](https://github.com/davesnx/html_of_jsx) by @davesnx

---

<div class="post-metadata">

**Author:** ![Sachindra\_Ragul](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/sachindra_ragul/32/4945_2.png) [@Sachindra\_Ragul](https://discuss.ocaml.org/u/Sachindra_Ragul)\
**Post date:** [November 17, 2024, 6:19pm UTC](https://discuss.ocaml.org/t/ann-mlx-syntax-dialect/15035/15 "2024-11-17T18:19:37Z")

</div>

Hi . Thanks for your work. I’m new to OCAML & May I know how to use this package to get the formatting for .mlx files. I use vscode & ocaml platform plugin to work on ocaml code.

---

<div class="post-metadata">

**Author:** ![andreypopp](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/andreypopp/32/97_2.png) [@andreypopp](https://discuss.ocaml.org/u/andreypopp)\
**Post date:** [November 23, 2024, 4:50am UTC](https://discuss.ocaml.org/t/ann-mlx-syntax-dialect/15035/16 "2024-11-23T04:50:51Z")

</div>

Hi, if you configure .mlx dialect in dune like this

```auto
(dialect
 (name mlx)
 (implementation
  (extension mlx)
  (merlin_reader mlx)
  (format
   (run ocamlformat-mlx %{input-file}))
  (preprocess
   (run mlx-pp %{input-file}))))

```

then `dune fmt` should work for .mlx as well. Unfortunately there’s still no extension for .mlx for vscode.

---

<div class="post-metadata">

**Author:** ![Sachindra\_Ragul](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/sachindra_ragul/32/4945_2.png) [@Sachindra\_Ragul](https://discuss.ocaml.org/u/Sachindra_Ragul)\
**Post date:** [November 23, 2024, 7:36am UTC](https://discuss.ocaml.org/t/ann-mlx-syntax-dialect/15035/18 "2024-11-23T07:36:24Z")

</div>

OK! Thanks for the clarification

---

<div class="post-metadata">

**Author:** ![beajeanm](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/beajeanm/32/189_2.png) [@beajeanm](https://discuss.ocaml.org/u/beajeanm)\
**Post date:** [November 23, 2024, 11:04pm UTC](https://discuss.ocaml.org/t/ann-mlx-syntax-dialect/15035/19 "2024-11-23T23:04:38Z")

</div>

Is there a way to configure neovim to have lsp support for mlx files?

---

<div class="post-metadata">

**Author:** ![andreypopp](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/andreypopp/32/97_2.png) [@andreypopp](https://discuss.ocaml.org/u/andreypopp)\
**Post date:** [November 24, 2024, 9:48am UTC](https://discuss.ocaml.org/t/ann-mlx-syntax-dialect/15035/20 "2024-11-24T09:48:42Z")

</div>

Yes, there’s [GitHub - ocaml-mlx/ocaml\_mlx.nvim: neovim plugin for .mlx](https://github.com/ocaml-mlx/ocaml_mlx.nvim) plugin which configures ocamllsp (through nvim-lspconfig) to support ocaml.mlx filetype.

---

<div class="post-metadata">

**Author:** ![beajeanm](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/beajeanm/32/189_2.png) [@beajeanm](https://discuss.ocaml.org/u/beajeanm)\
**Post date:** [November 24, 2024, 2:02pm UTC](https://discuss.ocaml.org/t/ann-mlx-syntax-dialect/15035/21 "2024-11-24T14:02:24Z")

</div>

Thanks, works like a charm!

[Next page](https://discuss.ocaml.org/t/ann-mlx-syntax-dialect/15035.md?page=2)