Know HTML and CSS? The building blocks will feel familiar.
JayCode uses familiar document elements and styling concepts, expressed as JSON. A paragraph becomes a paragraph node, a table stays a table, and headings use heading with a level from 1 to 6.
| HTML | JayCode concept | JSON definition |
|---|---|---|
<p> | Paragraph | {"type": "paragraph", "value": "Hello"} |
<h1>–<h6> | Heading level | {"type": "heading", "level": 2, "value": "Invoice"} |
<span> | Styled text inside a paragraph or cell | {"type": "text", "value": "Paid", "style": {"fontWeight": "bold"}} |
<table> | Table with a body row | {"type": "table", "columnLayout": {"unit": "variable", "value": [1, 1]}, "tbody": [{"type": "row", "content": ["Item", "Amount"]}]} |
<tr> | Row inside a table | {"type": "row", "content": ["Service", "$100"]} |
<td> | Cell inside row.content | {"type": "cell", "value": "Service"} |
<ul> / <ol> | List; use ordered for <ol> | {"type": "list", "listType": "unordered", "items": ["First", "Second"]} |
<img> | Image from a named resource | {"type": "image", "resource": "company-logo", "width": 120} |
<hr> | Horizontal divider | {"type": "horizontalLine"} |
These are element definitions, used inside a blueprint. Rows belong in a table’s tbody, cells in a row’s content, and inline text in a paragraph or cell value. Images reference resources supplied to the document.
Familiar styling, with JSON property names
CSS names such as font-size, font-family, and font-weight become fontSize, fontFamily, and fontWeight. Names such as margin and padding remain familiar. Some names differ: JayCode uses hAlign for horizontal alignment. Its supported properties and values are defined by the JayCode styling model.
A complete styled blueprint
{
"lang": "JayCode",
"type": "blueprint",
"body": [
{
"type": "heading",
"level": 2,
"value": "Invoice"
},
{
"type": "paragraph",
"value": "{{ 'Thank you, ' + customerName + '!' }}",
"style": {
"fontSize": 12,
"fontWeight": "bold"
}
}
]
}The paragraph combines content, an input variable, and styling in one definition. Supply customerName in the job’s vars object. This familiar structure helps when recreating a template; it does not make a blueprint an HTML document or a full CSS implementation.