Skip to content

Bookmarks

This example adds a bookmark system directly in the node template and keeps state in localStorage.

What is specific here

  • A custom star field (nodeBinding.star = 'id') renders a clickable SVG icon per node.
  • Clicking the star toggles bookmark state for that node (data-bookmark + bookmarked-node class).
  • Bookmarks are persisted in localStorage under the bookmarked key.
  • On add, a floating item is created and animated to the bookmarks row with OrgChart.animate.
  • On remove, the corresponding bookmark item is deleted from the row.
  • On init, saved bookmarks are restored and rendered in a top bookmarks row.
  • Clicking a bookmark item calls center(id) to focus the chart on that node.