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 https://mixpanel.github.io/panel-farm/. 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?
- Fork or clone git repo:
git clone git@github.com:mixpanel/panel-farm.git && 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