gistfile1.txt

Book
  author <- #authors(data.authorId).name

  <div.book>
    <img src={data.source}>
    <div.title>{data.title}</div>
    {showAuthor? <div.author>by {author}</div>}
  </div>
 
Main
  limit = 5
  showAuthors = true
  books? <- #books.sortBy(.title).take(limit)
 
  <div.main>
    <p>Limit: <input sync={limit}></p>
    <p>Show Authors: <input type="checkbox" sync={showAuthors}></p>
    
    --books? books.map:
      <Book data={book} showAuthor={showAuthors} />
    --else
      <div>loading</div>
  </div>

I almost think though its more verbose just doing <div class="main"> still would be more attractive to newcomers, because it keeps the html syntax.

I like the idea of div.main, it's clear. div class="main" can also work, but it seems objectively worse. I think both working would be good