---
# System prepended metadata

title: Sandbox

---

# Sandbox

```typescript=
const Counter = component$(() => {
  const store = createStore({ 
    count: 0,
    dblCount: 0,
  });
  watch$((obs) => {
    const {count} = obs(store);
    store.dblCount = count * 2;
  });
  return onRender$(() => 
    <button on$:click={() => store.count++}>
      {store.count} / {store.dblCount}
    </button>
    // <button on:click={qrl('./chunk.js', 'Counter_onRender_click', [store])}>{store.count}</button>
    // export Counter_onRender_click = () => {
    //   const [store] = useLexicalScope();
    //   return store.count++;
    // }
  );
})


render(document, (
  <html>
    <body>
     <Counter/>
    </body>
  </html>
);
```

```htmlembedded=
<html>
  <body>
    <div on:q-render="./chunk.js#Counter_onRender|abc123"
         on:q-watch="./chunk.js#Counter_watch|abc123.count[abc123]"
         q:obj="abc123">
      <button on:click="./chunk.js#Counter_onRender_click[abc123]">
        0
      </button>
    </div>
    <script type="qwik/state">
    {
      abc123: {count: 0}
    }
    </script>
  </body>
</html>

```