# Incorporate a javascript library into a Genie.jl app

**URL:** <https://discourse.julialang.org/t/incorporate-a-javascript-library-into-a-genie-jl-app/104957>\
**Category:** Web Stack\
**Tags:** genie, stipple\
**Created:** [October 14, 2023, 5:20pm UTC](https://discourse.julialang.org/t/incorporate-a-javascript-library-into-a-genie-jl-app/104957 "2023-10-14T17:20:37Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![ohmsweetohm1](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ohmsweetohm1/32/49126_2.png) [@ohmsweetohm1](https://discourse.julialang.org/u/ohmsweetohm1)\
**Post date:** [October 14, 2023, 5:20pm UTC](https://discourse.julialang.org/t/incorporate-a-javascript-library-into-a-genie-jl-app/104957/1 "2023-10-14T17:20:37Z")

</div>

How would I add the JavaScript library [X6](https://github.com/antvis/X6/blob/master/README.en-us.md) into a Stipple app? There are no vue components for this library, just pure JavaScript.

Do I have to put that into the js-methods macros e.g. [`@methods`](https://learn.genieframework.com/reference/reactive-ui/low-code-api#javascript-code)?

Is there a way to include a js-file, so that I at least have propper syntax highlighting?  
Or is the correct way to make a module that extends `Stipple.jl`?

---

<div class="post-metadata">

**Author:** ![ohmsweetohm1](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ohmsweetohm1/32/49126_2.png) [@ohmsweetohm1](https://discourse.julialang.org/u/ohmsweetohm1)\
**Post date:** [October 14, 2023, 10:05pm UTC](https://discourse.julialang.org/t/incorporate-a-javascript-library-into-a-genie-jl-app/104957/2 "2023-10-14T22:05:10Z")

</div>

What I have so far:  
`app.jl`

```julia
module App
using GenieFramework
@genietools

# asset from: https://unpkg.com/@antv/x6/dist/index.js
const assets_config = Genie.Assets.AssetsConfig(package="App.jl")
Genie.Router.route(Genie.Assets.asset_route(assets_config, :js, file="x6.min")) do
    Genie.Renderer.WebRenderable(
        Genie.Assets.embedded(Genie.Assets.asset_file(cwd=normpath(joinpath(@ __DIR__ , ".")), type="js", file="x6.min")),
        :javascript) |> Genie.Renderer.respond
end
x6_deps() = [
    Genie.Renderer.Html.script(src="$(Genie.Assets.asset_path(assets_config, :js, file="x6.min"))")
]
Stipple.deps!(@ __MODULE__ , x6_deps)

@created(read("main.js", String)) 

@page("/", "app.jl.html")

```

`main.js`

```javascript
// Create an instance of Graph.
const graph = new X6.Graph({
    container: document.getElementById('graph_container'),
    grid: true
})

// Render source node.
const source = graph.addNode({
    x: 300,
    y: 40,
    width: 80,
    height: 40,
    label: 'Hello',
})

// Render target node.
const target = graph.addNode({
    x: 420,
    y: 180,
    width: 80,
    height: 40,
    label: 'World',
})

// Render edge from source to target.
graph.addEdge({
    source,
    target,
})

```

`app.jl.html`

```html
<div>
    <div class="graph" id="graph_container" style="width: 600px; height: 400px;"></div>
</div>

```

However it does not work.  
Somehow the `graph_container` div has zero width and zero height and only the placeholder is in it:  
 ![image](https://global.discourse-cdn.com/julialang/original/3X/0/6/068168c575cadf479d3c79a92ecc1b0254d82c0e.png)

Running the contents of `main.js` in the console and setting the width and height of the div correctly results in a working example, though.

![image](https://global.discourse-cdn.com/julialang/original/3X/d/7/d7bb2fe574494804173bd370552c7fad47d7c3e3.png)