[ANN] OCamlFormat Web Configurator

It is my pleasure to share with you the ocamlformat configurator as a web page.

Ocamlformat is a great tool that really makes editing code a more pleasant experience. It has a bunch of different built in profiles and many additional options to fine tune how the code should look like. While I would encourage most people and new projects to use one of the default profiles, the many options are helpful when transitioning an existing codebase. Unfortunately it is not super easy to figure out which options to use and how to combine them. There are 58 parameters! I’ve spent a long time trying different combinations by changing an option in my .ocamlformat, running dune build @fmt, checking the code, going back to the first step… It is a tedious work. So I decided to make a simple web interface with all of the options available and a faster feedback loop.

Thanks to js_of_ocaml the task was not too complicated. Ocamlformat can be compiled to javascript, there is nothing special to do. Which means everything can be done in the browser, the code won’t leak to anyone, there is no need to maintain a server, and the result will be guaranteed to be identical as a formatting with the cli tool.

The configuration can be set through text (just put the content of your .ocamlformat in the text box) and through a bunch of dropdown. They will be combined together. The dropdown takes precedence over the textual configuration if an option is set in both.

The project has been started as part of the “open source day” at Ahrefs (we try to dedicate some time to open source projects that we use internally). It is still in its infancy. Please pardon the terrible style, I am not a web developer and didn’t have time to make it look nicer yet. There are some annoying things to fix (no feedback when the code is invalid and can’t be formatted), and many improvements to come (a way to download the configuration for example). But I think that it is already working well enough to be used by others.

You can find the configurator at OCamlFormat configurator
The source code is on github at ocamlformat/bin/web-ui at ahrefs/web-ui · ahrefs/ocamlformat · GitHub

If you like ocaml and want to look for a job, we have some positions available

28 Likes

Could be interesting to have something like that in ocaml vscode extension to support configuring ocamformat files.

1 Like

This is fun. Thanks!

nit: on Safari, the code is in a proportionally-spaced font, unlike in your screenshot.

2 Likes

Thanks. I have activated the issues on the repo and opened one for this problem on safari. Will give it a try when I have some free time.

As a suggestion to an otherwise great project (congrats!), I think it would be nice to also have a dropdown for the built-in profiles (so we can compare them) :slight_smile:

2 Likes

Thanks to Pomba Magar we now have a code editor with highlighting. It hopefully should also solve the lack of monospace font on safari.

2 Likes