Advanced Data Oriented Markup

A Unified Theory
of Web Development.

A-DOM is a revolutionary markup language that combines the simplicity of the early web with the power of the modern web.

What is A-DOM?

A-DOM makes web development as simple as writing a single HTML file again. It's the ultimate tool for creating what some people call a Jamstack. It's a super-charged cross between JSON and HTML that includes everything you need for modern web development, including server side rendering (SSR) and reactive UI components.

A-DOM syntax is extremely terse, has NO whitespace sensitivity, and in the author's intensely biased opinion, is a joy to read and write.

// save as index.adom and run 'npx adom-js --dev -r /=index.adom'
tag Counter [
  let count = 0
  button on:click='count++' 'count: {{count}}'
]

html [
  head [
    title 'Welcome to A-DOM'
  ]
  body [
    div [
      Counter []
    ]
  ]
]

Why A-DOM?

A-DOM is a radical re-imaging of modern web development. It is a simple and noise-free markup language with extremely powerful semantics for data declaration, control flow, and reactive UI components. All server side rendering as well as client side code generation are taken care of during compilation, and therefore no additional tools are required for a production quality application.

Here is a complete Todo application with server side rendering using A-DOM and Express in just 2 tiny files.

// index.adom
tag Todo [
  let item = ''
  let items = props.items
  ---
  function addItem() {
    items.push(item);
    fetch('/add?item=${item}');
    item = ''
  }
  ---
  input bind:value={item} []
  button on:click='addItem()' 'add'
  ul [
    each (i in items) [
      li '{{i}}'
    ]
  ]
]

html [
  head []
  body [
    Todo items={data.items} []
  ]
]
// server.js
const express = require('express');
const adom = require('adom-js');

const app = express();

const items = [
  'walk dog',
  'feed dog',
  'sleep'
]

app.get('/add', (req, res) => {
  items.push(req.query.item);
});

app.get('/', async (req, res) => {
  const html = await adom.compile('./index.adom', {
    data: { items },
    minify: true,
  });
  res.end(html);
});

app.listen(5000);

It may not seem like it, but the above example has server side rendering, client side reactivity, component imports and exports, Typescript transpilation, Javascript bundling and minification. The A-DOM development experience is language first instead of bundler first.