The playground is still experimental.
Please report any issues or feedback on github.com/lowlighter/mizu/issues/41.

Playground

Elements

Errors

<main *set="{ coins: 0, income: 5, built: ['🏛️ Town hall'], build: { selected: 0, progress: 0, time: 0 } }" *mustache>
  <div class="flash accent">
    You have {{ coins }} 🪙<br />
    Last refresh: <time class="muted" *refresh="1" *text="new Date().toISOString().slice(11, 19)" *eval="$refresh && (coins += income)"></time>
  </div>
  <form *set="{ buildings: ['Choose a building', '🏪 Store', '🏬 Mall', '🏟️ Stadium', '🏯 Castle'] }">
    <label>
      ⛏️ Mine
      <small>Click on the button to get coins.</small>
      <button @click.prevent="coins++">Become rich!</button>
    </label>
    <label>
      🛠️ Build
      <small>Create buildings to generate passive income.</small>
      <select ::.number="build.selected" :disabled="build.progress" @::="build.time = 1 + (build.selected ** 2)">
        <option *for="buildings" :value="$i">{{ $value }}</option>
      </select>
    </label>
    <section *if="build.selected">
      <table class="width">
        <tr>
          <th>🪙/s</th>
          <td>+{{ build.selected }}</td>
        </tr>
        <tr>
          <th>🕐</th>
          <td>{{ build.time }}s</td>
        </tr>
      </table>
      <button *if="!build.progress" @click.prevent="build.progress = 1">Build it!</button>
      <progress *else *refresh="1" :value="build.progress" :max="build.time" *eval="$refresh && (build.progress++ >= build.time && (income += build.selected, built.push(buildings[build.selected]), build.selected = build.progress = 0))"></progress>
    </section>
  </form>
  <div class="flash success">
    <b>You have {{ built.length }} building(s) in your city!</b>
    <br>
    <sub>+ {{ income }} 🪙/s</sub>
    <br>
    {{ built.map(building => [...building][0]).join(' ') }}
  </div>
  <hr>
  <div class="flash muted">
    <b>🧑‍🔬 DEBUG</b>
    <br>
    <small>The table below let you know about the current values used in this example.</small>
    <table *mustache>
      <tr>
        <td><code>coins</code></td>
        <td>{{ coins }}</td>
      </tr>
      <tr>
        <td><code>income</code></td>
        <td>{{ income }}</td>
      </tr>
      <tr>
        <td><code>built</code></td>
        <td>{{ built }}</td>
      </tr>
      <tr>
        <td><code>build.selected</code></td>
        <td>{{ build.selected }}</td>
      </tr>
      <tr>
        <td><code>build.progress</code></td>
        <td>{{ build.progress }}</td>
      </tr>
      <tr>
        <td><code>build.time</code></td>
        <td>{{ build.time }}</td>
      </tr>
    </table>
  </div>
</main>

<main *set="{ coins: 0, income: 5, built: ['🏛️ Town hall'], build: { selected: 0, progress: 0, time: 0 } }" *mustache>
  <div class="flash accent">
    You have {{ coins }} 🪙<br />
    Last refresh: <time class="muted" *refresh="1" *text="new Date().toISOString().slice(11, 19)" *eval="$refresh && (coins += income)"></time>
  </div>
  <form *set="{ buildings: ['Choose a building', '🏪 Store', '🏬 Mall', '🏟️ Stadium', '🏯 Castle'] }">
    <label>
      ⛏️ Mine
      <small>Click on the button to get coins.</small>
      <button @click.prevent="coins++">Become rich!</button>
    </label>
    <label>
      🛠️ Build
      <small>Create buildings to generate passive income.</small>
      <select ::.number="build.selected" :disabled="build.progress" @::="build.time = 1 + (build.selected ** 2)">
        <option *for="buildings" :value="$i">{{ $value }}</option>
      </select>
    </label>
    <section *if="build.selected">
      <table class="width">
        <tr>
          <th>🪙/s</th>
          <td>+{{ build.selected }}</td>
        </tr>
        <tr>
          <th>🕐</th>
          <td>{{ build.time }}s</td>
        </tr>
      </table>
      <button *if="!build.progress" @click.prevent="build.progress = 1">Build it!</button>
      <progress *else *refresh="1" :value="build.progress" :max="build.time" *eval="$refresh && (build.progress++ >= build.time && (income += build.selected, built.push(buildings[build.selected]), build.selected = build.progress = 0))"></progress>
    </section>
  </form>
  <div class="flash success">
    <b>You have {{ built.length }} building(s) in your city!</b>
    <br>
    <sub>+ {{ income }} 🪙/s</sub>
    <br>
    {{ built.map(building => [...building][0]).join(' ') }}
  </div>
  <hr>
  <div class="flash muted">
    <b>🧑‍🔬 DEBUG</b>
    <br>
    <small>The table below let you know about the current values used in this example.</small>
    <table *mustache>
      <tr>
        <td><code>coins</code></td>
        <td>{{ coins }}</td>
      </tr>
      <tr>
        <td><code>income</code></td>
        <td>{{ income }}</td>
      </tr>
      <tr>
        <td><code>built</code></td>
        <td>{{ built }}</td>
      </tr>
      <tr>
        <td><code>build.selected</code></td>
        <td>{{ build.selected }}</td>
      </tr>
      <tr>
        <td><code>build.progress</code></td>
        <td>{{ build.progress }}</td>
      </tr>
      <tr>
        <td><code>build.time</code></td>
        <td>{{ build.time }}</td>
      </tr>
    </table>
  </div>
</main>

Instructions

Elements editor

Edit the content and experiment with mizu.js!

Your content is automatically embedded in a <body *mizu> tag, and mizu.js is loaded for you.

Reload the view

Click this button to manually reset and reload the view.

A refresh is automatically triggered after a short delay when you stop typing in the editor.

Rendering errors

Any rendering errors from mizu.js will be displayed here.

HTML parsing errors or runtime exceptions are not captured.