I don't like this html-syntax, cause you use a separate syntax-methods for existing js-functions wrapped as html-tags:

  <if text.isEmpty()>
    <div class="preview-text empty">Start typing...</div>
  <else>
    <div class="preview-text">{text}</div>
  </else>
  </if>

Here something that looks little more like PHP-Style, better separation, but too much to type:

  <?coi
  if (empty($text)) {
  ?>
    <div class="preview-text empty">Start typing...</div>
  <?coi
  } else {
  ?>
    <div class="preview-text">${text}</div>
  <?coi
  }
  ?>

  if (empty($text)) {
    $(<div class="preview-text empty">Start typing...</div>)
  } else {
    $(<div class="preview-text">${text}</div>)
  }

It's perfectly fine to allow if in tags (the compiler can figure it out). In Mint you can do that no problem: https://mint-lang.com/sandbox/6lnZHiG8LVRJqA

    component Main {
      fun render : Html {
        <div>
          if true {
            <div>"Hello World!"</div>
          } else {
            <div>"False"</div>
          }
        </div>
      }
    }

Vue style attribute directives are imho a far better dx compared to all of the above.