# Using GoJS with Svelte

If you are new to GoJS, it may be helpful to first visit the Getting Started Tutorial.

Svelte requires almost no special considerations for use with GoJS. In your project, install GoJS via npm or yarn:

`npm i gojs`

And you can use it in a Svelte app. GoJS Diagrams require a DIV, so you should initialize them within `onMount` to ensure the DOM is ready. An example:

      <!-- +page.svelte -->
      <script lang="ts">
        import * as go from 'gojs';
        import { onMount } from 'svelte';
        let myDiagram;

        onMount(() => {
          myDiagram = new go.Diagram('myDiagramID');
          // Set up the rest of the diagram:
          myDiagram.model = new go.Model([ { key: 'Alpha' } ])
        });
      </script>

      <div id="myDiagramID" style="width: 500px; height: 500px;" />

Svelte discourages referencing DOM `Id`s, so you can also reference the DIV directly with Svelte's `bind:this` attribute:

      <!-- +page.svelte -->
      <script lang="ts">
        import * as go from 'gojs';
        import { onMount } from 'svelte';
        let myDiagram;
        let diagramDiv: HTMLDivElement;

        onMount(() => {
          myDiagram = new go.Diagram(diagramDiv);
          // Set up the rest of the diagram:
          myDiagram.model = new go.Model([ { key: 'Alpha' } ])
        });
      </script>

      <div bind:this={diagramDiv}  style="width: 500px; height: 500px;" />

GoJS