custom element markup.json demo

README.md

run with npx:

npx markup.json custom.json > output.html

or as stdin

echo '["heyy there",["h3","custom element"],["foo","whatever",{"x11":"xorg","style":{"color":"indigo","text-align":"center"}}],["bar",{"dos":"three","style":{"background":"crimson"},"ohhh":["bbbas",{"one":"uno","pi":"three.sth.sth"}],"void":{"nada":"silent"}},"some content","more and more",["hmm","heyyy",{"why":"nope"}]],["a","lets gooo",{"class":"primary","href":["https://acme.com/search?",{"user":"foo","age":99}]},["b","byyeezz"]]]' | npx markup.json

custom.json

[
	"heyy there",
	[
		"h3",
		"custom element"
	],
	[
		"foo",
		"whatever",
		{
			"x11": "xorg",
			"style": {
				"color": "indigo",
				"text-align": "center"
			}
		}
	],
	[
		"bar",
		{
			"dos": "three",
			"style": {
				"background": "crimson"
			},
			"ohhh": [
				"bbbas",
				{
					"one": "uno",
					"pi": "three.sth.sth"
				}
			],
			"void": {
				"nada": "silent"
			}
		},
		"some content",
		"more and more",
		[
			"hmm",
			"heyyy",
			{
				"why": "nope"
			}
		]
	],
	[
		"a",
		"lets gooo",
		{
			"class": "primary",
			"href": [
				"https://acme.com/search?",
				{
					"user": "foo",
					"age": 99
				}
			]
		},
		[
			"b",
			"byyeezz"
		]
	]
]

output.html

heyy there
<h3>
  custom element
</h3>
<foo
  x11="xorg"
  style="color:indigo; text-align:center;"
>
  whatever
</foo>
<bar
  dos="three"
  style="background:crimson;"
  ohhh="bbbasone=uno&pi=three.sth.sth&"
  void="nada:silent;"
>
  some content
  more and more
  <hmm
    why="nope"
  >
    heyyy
  </hmm>
</bar>
<a
  class="primary"
  href="https://acme.com/search?user=foo&age=99&"
>
  lets gooo
  <b>
    byyeezz
  </b>
</a>