Arrow icon
See all demos

Searchable Sitemap

Thanks to SVG you can find the text in the JointJS+ diagram elements and navigate to them using the browser search. However, there are cases where you want to use a custom search, for example if you only want to search by data stored in models or if the text you are looking for is part of a collapsed branch. In this case, custom search is useful. See below for an example of how to implement such a search, which we demonstrate on our own sitemap generated from an XML file. Enjoy!
Demo instructions
Enter any text in the search bar and check if you can find it in our sitemap. Study the source code of this demo to see how the sitemap is generated using XML and how the custom search is implemented.

Made with JointJS+

The source code of this demo is available as part of the JointJS+ commercial license. Don't have a license yet? Start a trial and use the source code of this and many other demos for free, with no obligations, for 30 days.

Compatible with:

ReactAngularVueSvelteHTML5Salesforce Lightning

Made with JointJS+

All features required to build this demo are included in the commercial JointJS+ package. Don't have a license yet? Start a trial and build professional applications with ease.

Compatible with:

ReactAngularVueSvelteHTML5Salesforce Lightning

Made with JointJS

The source code of this demo is available in the JointJS open-source library which helps developers create simple visual applications in less time.

Compatible with:

ReactAngularVueSvelteHTML5Salesforce Lightning

Made with JointJS

All features required to build this demo application are included in our open-source library, JointJS. Download the package and create basic visual applications in no time.

Compatible with:

ReactAngularVueSvelteHTML5Salesforce Lightning

Speed up your development with a powerful library