Introducing MinTyML

A minimalist alternative syntax for HTML

MinTyML (from Minimalist HTML) is an alternative syntax for HTML designed for writing text-heavy documents.

You can play with the WASM-powered interactive demo, or check out the Github repository with a full README explaining MinTyML in further detail.

See also the MinTyML CLI, the mintyml Rust crate, the mintyml NPM package, and the MinTyML VSCode extension.

Here's a quick sample, which you can see and interact with here:

  h1> MinTyML Example Page

h2> Introduction

This is an example page written in MinTyML to demonstrate its simplicity and power.

h2> Features
ol {
  > Concise Syntax
  > Easy to Learn
  > Flexible
}

h2> Code block

```
function foo() {
  return 1 + 1
}
```

h2> Text Block

'''
This text will be treated like plaintext and not parsed as MinTyML:
> Hello

Escape sequences are not handled, so this will render as two backslashes: \\
'''

"""
This text behaves the same as above but escape sequences are still processed: \u{1F600}
"""

pre>code>'''
This is an alternative way to create a code block.
'''

h2> Inline Formatting

MinTyML supports <#strong#>, </emphasis/>, <_underline_>, <~strikethrough~>,
<"quote">, and <`code`> formatting.

h2> Inferred Element Types
section {
  This is a paragraph within a section.

  Another paragraph.
}

h2> Headings and Subheadings

h3> Why Use MinTyML?

MinTyML simplifies the process of writing and maintaining web documents.

h2> Comments

MinTyML allows you to add comments to your code that won't be displayed in the
final document.
<! This is a comment that will not be rendered !>

To put my money where my mouth is, I'm writing this blog post in MinTyML.

Background

A couple months ago, I was writing up some documents in HTML started looking around to see if there was a more concise way to write HTML that let me focus on the text rather than the tags. After looking around, I didn't find quite what I was looking for. Markdown is an option since it can contain HTML, but in practice I found it unwieldy to go back and forth between HTML and Markdown syntax, needing blank lines in between, and having limitations on indenting.

I began drafting my ideal alternative. The solution must:

1. Make HTML tags as concise as possible
2. Infer HTML tags from context if possible
3. Represent complex HTML structures

Basic Syntax

As I experimented with the syntax, I settled on a CSS selector-like approach, similar to Emmet.

Line Element

The child combinator (>) denotes a line element, meaning the remainder of the line in addition to subsequent non-empty lines that don't contain elements belong inside that element:

So this:

header>h1> Hello, world!

becomes this:

<header>
  <h1>Hello, world! </h1>
</header>

Block Element

Selectors followed by curly braces ({ ... }) form block elements, which may contain multiple child elements and wraps paragraphs in their own elements.

MinTyML:

section {
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod tempor
  incididunt ut labore et dolore magna aliqua.

  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur.

  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
  deserunt mollit anim id est laborum.
}

HTML:

<section>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod tempor
    incididunt ut labore et dolore magna aliqua.
  </p>

  <p>
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
    aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur.
  </p>
</section>

The tags surrounding a paragraph vary depending on the parent element. For example, a list's paragraphs turn into list items.

MinTyML:

ol {
  Item 1

  Item
  2

  And
  Item 3
}

HTML:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>And Item 3</li>
</ol>

Line-Block Element

When the child combinator and curly braces are used in conjunction (> { ... }) you get a line-block element. These elements may contain multiple child elements but have the semantics of a line element (for example, its contents are not broken into paragraphs).

MinTyML:

section> {
  Hello,

  world!
}

HTML

<section>Hello, world!</section>

Inline Element

Any of the above element types can be placed inside <( ... )> brackets to insert it without breaking the current paragraph or line element.

MinTyML:

footer>Click <(a[href=http://example.com/]> here)> for more info.

HTML:

<footer>
  Click <a href="http://example.com/">here</a> for more info.
</footer>

Inline Formatting

Inline formatting tags map to specific HTML tags:

MinTyML	HTML
<#strong#>	<strong>strong</strong>
</emphasis/>	<em>emphasis</em>
<_underline_>	<u>underline</u>
<~strikethrough~>	<s>strikethrough</s>
<"quote">	<q>quote</q>
<`code`>	<code>code</code>

What's next?

Next I'd like to provide MinTyML libraries for additional languages and frameworks. For example, the custom MinTyML plugin I've made for this site should be available for everyone.

This will require a formal definition of the MinTyML syntax, and a clearer explanation of how inferred element types are resolved.

Conclusion

The quickest way to get a feel for MinTyML is to try the examples in the interactive demo. If you'd like to be involved, feel free to open an issue or reach out to me at youngspe@outlook.com.