---
title: "LemonadeJS Demo Page"
description: "Working LemonadeJS demos: a data grid, calendar-based event manager, forms, an analog clock and a game, each with its full source code."
source: https://lemonadejs.com/demo/
---

<div class="home">

<div class="center">

{data-text="Demo"}
# JavaScript Reactive Library Demo

Working examples of LemonadeJS reactive components:<br>
each demo links to its full source code.

</div><br><br>

<div class="row gap">

<div class="row gap start stretch">


<div class="column f1">
<div class="box nogap shadow demo-card demo">

## Interactive Data Grid

Interactive data grid demo using LemonadeJS. Create reactive tables with real-time updates, search, pagination, and inline editing.

[See more](/demo/data-grid/){.arrow .link}

</div>
</div>

<div class="column f1">
<div class="box nogap shadow demo-card demo">

## Interactive Form Components

Form components connected through two-way data binding: a color picker, star rating, toggle switches, and a modal dialog.

[See more](/demo/interactive-form/){.arrow .link}

</div>
</div>

<div class="column f1">
<div class="box nogap shadow demo-card demo">

## Tic Tac Toe Game

Play the classic Tic Tac Toe game built with LemonadeJS. Experience reactive JavaScript in action with this interactive demo.

[See more](/demo/tic-tac-toe/){.arrow .link}

</div>
</div>

</div>

[//]: # (----------SECOND LINE----------)

<div class="row gap start stretch">

<div class="column f1">
<div class="box nogap shadow demo-card demo">

## Analog Clock

An analog clock driven by reactive state: the hands are bindings that update every second, with no manual DOM writes.

[See more](/demo/analog-clock/){.arrow .link}

</div>
</div>


<div class="column f1">
<div class="box nogap shadow demo-card demo">

## Event Manager

Manage events with Calendar and Timeline integration. Add events, track milestones, and visualize your timeline in real-time.

[See more](/demo/event-manager/){.arrow .link}

</div>
</div>

<div class="column f1" style="visibility: hidden">
<div class="box nogap shadow demo-card demo">

## Tic Tac Toe Game

Play the classic Tic Tac Toe game built with LemonadeJS. Experience reactive JavaScript in action with this interactive demo.

[See more](/demo/tic-tac-toe/){.arrow .link}

</div>
</div>

</div>

<div class="space40"></div>

</div>

</div>