Get started with baobab CDN

// Include Baobab library from CDN
const Baobab = require('https://cdn.cdnhub.io/baobab/2.6.1/baobab.js');

// Create a new Baobab store
const store = new Baobab('{}');

// Define a model with some initial state
store.set('counter', { count: 0 });

// Define actions to update the state
store.on('increment', () => {
  const counter = store.get('counter');
  store.set('counter.count', counter.count + 1);
});

store.on('decrement', () => {
  const counter = store.get('counter');
  store.set('counter.count', counter.count - 1);
});

// Define a view to listen for state changes and update the DOM
const view = {
  bind: function() {
    const counterEl = document.getElementById('counter');
    this.listenTo(store, 'change:counter.count', () => {
      counterEl.textContent = store.get('counter.count');
    });
  },
  unbind: function() {
    this.stopListening();
  }
};

// Initialize the view and bind it to the store
view.bind();

// Dispatch actions when buttons are clicked
document.getElementById('increment').addEventListener('click', () => {
  store.trigger('increment');
});

document.getElementById('decrement').addEventListener('click', () => {
  store.trigger('decrement');
});