# Include visual component from npm that needs to be created with "new" **URL:** \ **Category:** How do I?\ **Created:** [October 27, 2023, 6:29am UTC](https://community.weweb.io/t/include-visual-component-from-npm-that-needs-to-be-created-with-new/5084 "2023-10-27T06:29:56Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![PRS-WeWeb](https://avatars.discourse-cdn.com/v4/letter/p/77aa72/32.png) [@PRS-WeWeb](https://community.weweb.io/u/PRS-WeWeb)\ **Post date:** [October 27, 2023, 6:29am UTC](https://community.weweb.io/t/include-visual-component-from-npm-that-needs-to-be-created-with-new/5084/1 "2023-10-27T06:29:56Z")
Hi @all. I’d like to include a visual component from npm in our project (d3kit-timeline, can be found on github and UNPKG). The YouTube tutorial on the npm-Plugin only focuses on packages that have some in- and output, rather than displaying it as part of the GUI. I’ve looked around a bit and found some similar requests already: - the YouTube Video on “How to use npm packages in WeWeb (beta plugin)” - some community questions: [Is it possible to use external libraries/packages/plugins while creating custom components](https://community.weweb.io/t/is-it-possible-to-use-external-libraries-packages-plugins-while-creating-custom-components/2897) [Add visual elements using NPM](https://community.weweb.io/t/add-visual-elements-using-npm/4785) Most proper solutions revolve around the solution of creating a custom component that utilizes this package and is then loading into the project. For simple prototyping I’d rather prefer to make use of the NPM-Plugin in WeWeb. My current assumption is, that is has to do with the instantiation. The above example with wavesurfer.js can be used without the “new” keyword (indicating that there is an instance already somewhere), whereas with d3kit-timeline needs to be created with “new”. I’ve not been able to create an instance (e.g. on a button click) and bind it to a selected div, similar to the example in wavesurfer.js. Alternatively it maybe really is a question of the “instance keyword” for the npm-Plugin, but I’ve not been able to successfully identify it. Looking forward to any ideas/suggestions, thanks, Eric ---
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [November 9, 2023, 11:37am UTC](https://community.weweb.io/t/include-visual-component-from-npm-that-needs-to-be-created-with-new/5084/2 "2023-11-09T11:37:39Z")
Hi @PRS-WeWeb 👋 Sorry I missed your question before. Do you still need help with this? ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [November 10, 2023, 8:42pm UTC](https://community.weweb.io/t/include-visual-component-from-npm-that-needs-to-be-created-with-new/5084/3 "2023-11-10T20:42:40Z")
I just imported [LeaderLine](https://anseki.github.io/leader-line/) and it seems to work. You just need to check out for how you declare the new, so in my case it’s `new LeaderLine(...)` so in NPM, i just imported it like this, and it seems to work. I’ll have to try. ![Screenshot 2023-11-10 at 21.42.32](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/5/56c14414365da17f574f3bd20dcf4413d58f9899.png) Edit: Yup, works ![Screenshot 2023-11-10 at 21.44.36](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/c31abcf45701368930bef10aa37367f5aadee695.png) @aurelie, forgive me not using wwLib.getFrontDocument() :d ---
**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\ **Post date:** [November 10, 2023, 9:41pm UTC](https://community.weweb.io/t/include-visual-component-from-npm-that-needs-to-be-created-with-new/5084/4 "2023-11-10T21:41:25Z")
I don’t know if i will ever be able to forgive you 🙃