Render Shorthand

This page covers the shorthand string format returned by the render option, and which directives it can and cannot express.

Format

tag#id.class1.class2(key: "value", key2: "value")[ children ]

<div id="app"></div>

<script>
  const app = new QUI({
    id: "app",
    data: { title: "QuickUI", link: "https://quickui.pardn.io" },
    event: { open: () => {} },
    render: () => `
      section.hero[
        h1[ "{{title}}" ]
        a(q-href: "link", qe-click: "open")[ "Docs" ]
      ]
    `,
  });
</script>

Whitespace

All whitespace inside double quotes is removed, attribute values included. Use an HTML entity when you need a space:

p[ "Hello World" ]
p[ "Hello World" ]

The first line renders HelloWorld and the second renders Hello World.

Available Directives

Attribute names only accept letters, digits, - and _, so directives starting with : or @ cannot be written.

For loops or conditions, use id with an HTML template instead.