DIL language

DIL stands for Dynamic Interface Language. It combines Markdown with component tags, JavaScript expressions, document state, and conditional or repeated content.

Tags and attributes

DIL

## Production

<box border padding={4} radius="xl" gap={3}>
  <title>Service health</title>
  <badge color="success">Healthy</badge>
</box>

Tags are case-sensitive. Use paired tags for children and /> for an empty component. Bare attributes are booleans, quoted attributes are strings, and braces contain expressions. Numeric padding and gap use a 4 px scale.

State and derived values

DIL

{@body const [count,setCount]=DIL.useState(0)}
{@body const doubled=count\*2}

<button onClick={() => setCount((value) => value + 1)}>Increment</button>
<text>
  {count} items; doubled: {doubled}
</text>

Use one const declaration per {@body ...} directive. State initializes once per binding name in the mounted document. Setters accept a replacement value or a function of the previous value. Ordinary declarations evaluate on demand.

Expressions run in the document’s QuickJS worker. DOM objects and browser services are not available there. Input callbacks receive values, not DOM events: input.onChange receives a string, sliders receive numbers, and checkboxes receive booleans.

Conditions and repeats

DIL

{#if count > 0}

  <badge>{count} selected</badge>
{:else}
  <caption>Nothing selected</caption>
{/if}

{#each items as item,index}

  <text>{index+1}. {item.name}</text>
{/each}

Use {:else if expression} for additional branches. Repeated entries should have a stable id; otherwise identity falls back to position. Repeat templates expand after closing.

Literal code

Use fenced code or CodeBlock for literal source containing tags and braces. OpenDIL does not compile arbitrary JSX or TypeScript into application code.

The full language and runtime reference documents parsing contracts and limits. The Agent Spec provides copyable generation instructions.