About

This tool bridges the gap between symbolic programming data structures and web markup. It compiles S-Expressions (Symbolic Expressions) into standard HTML5 syntax. By representing the Document Object Model (DOM) as nested lists, developers can generate complex layouts programmatically without the verbosity of closing tags.

The converter utilizes a custom recursive descent parser to transform the linear text stream into an Abstract Syntax Tree (AST). This AST is then traversed to emit compliant HTML. It is particularly useful for users of Lisp-family languages (Common Lisp, Scheme, Clojure) or for generating markup from tree-based data structures.

The algorithm assumes the standard CL-WHO or Hiccup style syntax: the first element of a list is the tag, followed by optional keyword attributes, and finally the content body.

Formulas

The transformation follows a recursive mapping function Map acting on the set of S-Expressions S to the set of HTML Strings H.

Map(L) = {

L if L ∈ String<tag attrs> ∑ Map(child) </tag> if L = (tag, ...rest)

Reference Data

Syntactic Element	S-Expression Syntax	HTML Equivalent
Basic Tag	(div "text")	`<div>text</div>`
Nested Tags	(ul (li "A") (li "B"))	`<ul><li>A</li><li>B</li></ul>`
Attributes (Keyword)	(span :class "bold" "Hi")	`<span class="bold">Hi</span>`
Attributes (Alist)	(a ((href "/login")) "Go")	`<a href="/login">Go</a>`
Void Elements	(img :src "pic.jpg")	`<img src="pic.jpg">`
ID Shorthand	(div#header ...)	`<div id="header">...</div>`
Class Shorthand	(div.container ...)	`<div class="container">...</div>`

Frequently Asked Questions

The parser maintains a stack counter. If the stack is not empty at the end of the stream, or if it encounters a closing parenthesis without a match, it raises a syntax error indicating the approximate location of the imbalance.

Yes. The parser recognizes simple shorthands. Writing (div#main.content ...) will automatically generate

...

Yes. The converter checks against a predefined list of HTML5 void elements (like img, br, input, meta). These tags will be rendered without a closing tag, regardless of input nesting.

While the output is standard HTML strings, the structure is very similar to `React.createElement` calls. The logic is consistent with JSX, but the output format is pure HTML markup.