WildflowerJS Demos
Third-Party Integration Showcase
Leaflet + FullCalendar + SortableJS. No wrappers needed.
🗺️

Trip Destinations

Leaflet

Click the map to add destinations

Marker popups are built imperatively — no wrapper component needed. The watch on destinations keeps markers and calendar events in sync automatically.

📅

Trip Schedule

FullCalendar
Destinations:
✅

Packing List

SortableJS
Tasks:
Completed:
📄

Integration Patterns

Zero Wrappers

Leaflet

// Instance property, not state
this._map = L.map(
  this.$el('#trip-map').el
);

// State drives markers
watch: {
  destinations() {
    this.syncMarkers();
  }
}

FullCalendar

// Drag updates state
eventDrop(info) {
  this.updateDestinationDate(
    info.event.id,
    info.event.startStr
  );
}

// Click flies to map
eventClick(info) {
  this.flyToDestination(
    info.event.id
  );
}

SortableJS

// Reactive data-list template
<ul data-list="tasks">
  <li data-action="toggle">

// Reorder via splice
onEnd(evt) {
  const item = this.tasks
    .splice(evt.oldIndex, 1)[0];
  this.tasks
    .splice(evt.newIndex, 0, item);
}

Why This Works

WildflowerJS has no virtual DOM. Leaflet, FullCalendar, and SortableJS all manipulate the real DOM directly. There's no conflict, no wrapper packages, no adapter layers. Use this.$el(selector).el to get DOM elements for library init, and store library instances as underscore-prefixed properties (this._map) which bypass the proxy. Reactive data is accessed directly as this.destinations, this.tasks; the unified context proxy resolves state and computed transparently.