Manage cute animals with Web Components and Virtual DOM very wow
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Panel Farm!

very panel!much virtual!so components!

This is a little demo app for playing around with Web Components and the Panel library in a live environment with browser dev tools.

Visit the live demo at You can get a reference to the running application with:

app = document.querySelector(`panel-farm`);

Look at app.state to get an idea of what's controllable dynamically. For instance, to change the header text of the welcome screen, try:

app.update({welcomeText: `Hello there!`});

The Farm screen starts out with one cute capybara and some buttons to add different animals to keep it company. Can you add another capybara?

Local development

  • Fork or clone git repo: git clone && cd panel-farm
  • Install dependencies: npm install
  • Start local server: npm start
  • Visit page at http://localhost:8080/
  • Changes to app code within src/ dir will update live in browser