create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
1,103 lines • 58.5 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
<meta name="description" content="GoJS is a library for building powerful interactive diagrams for every industry. Build apps with
flowcharts, org charts, BPMN, UML, modeling, and other visual graph types. Interactivity, data-binding, layouts and many
node and link concepts are built-in to GoJS." />
<meta itemprop="description" content="GoJS is a library for building powerful interactive diagrams for every industry. Build apps with
flowcharts, org charts, BPMN, UML, modeling, and other visual graph types. Interactivity, data-binding, layouts and many
node and link concepts are built-in to GoJS." />
<meta property="og:description" content="GoJS is a library for building powerful interactive diagrams for every industry. Build apps with
flowcharts, org charts, BPMN, UML, modeling, and other visual graph types. Interactivity, data-binding, layouts and many
node and link concepts are built-in to GoJS." />
<meta name="twitter:description" content="GoJS is a library for building powerful interactive diagrams for every industry. Build apps with
flowcharts, org charts, BPMN, UML, modeling, and other visual graph types. Interactivity, data-binding, layouts and many
node and link concepts are built-in to GoJS." />
<meta name="keywords" content="JavaScript diagram graph chart drawing visualization modeling component library flowchart orgchart network
BPMN UML ER editor"/>
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="./assets/css/style.css">
<!-- Copyright 1998-2025 by Northwoods Software Corporation. -->
<meta itemprop="name" content="GoJS - Interactive Diagrams for the Web in JavaScript and TypeScript" />
<meta property="og:title" content="GoJS - Interactive Diagrams for the Web in JavaScript and TypeScript" />
<meta name="twitter:title" content="GoJS - Interactive Diagrams for the Web in JavaScript and TypeScript" />
<meta property="og:image" content="https://gojs.net/latest/assets/images/fp/defaultCard.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/fp/defaultCard.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/fp/defaultCard.png" />
<meta property="og:url" content="https://gojs.net/latest/" />
<meta property="twitter:url" content="https://gojs.net/latest/" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>GoJS - Interactive Diagrams for the Web in JavaScript and TypeScript </title>
</head>
<body>
<nav id="navTop" class="sticky top-0 w-full h-[var(--topnav-h)] z-30 bg-white border-b border-b-gray-200">
<div class="max-w-screen-xl mx-auto flex flex-wrap items-start justify-between px-4">
<a class="text-white bg-nwoods-primary font-bold !leading-[calc(var(--topnav-h)_-_1px)] my-0 px-2 text-4xl lg:text-5xl logo"
href="./">
GoJS
</a>
<div class="relative">
<button id="topnavButton" class="h-[calc(var(--topnav-h)_-_1px)] px-2 m-0 text-gray-900 bg-inherit shadow-none md:hidden hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation">
<svg class="h-7 w-7 block" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div id="topnavList" class="hidden md:block">
<div class="absolute right-0 z-30 flex flex-col items-end rounded border border-gray-200 p-4 pl-12 shadow bg-white text-gray-900 font-semibold
md:flex-row md:space-x-4 md:items-start md:border-0 md:p-0 md:shadow-none md:bg-inherit">
<a href="./learn/">Learn</a>
<a href="./samples/">Samples</a>
<a href="./intro/">Intro</a>
<a href="./api/">API</a>
<a href="./download.html">Download</a>
<a href="https://forum.nwoods.com/c/gojs/11" target="_blank" rel="noopener">Forum</a>
<a id="tc" href="https://nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/contact.html', 'contact');">Contact</a>
<a id="tb" href="https://nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/sales/index.html', 'buy');">Buy</a>
</div>
</div>
</div>
</div>
</nav>
<script>
window.addEventListener("DOMContentLoaded", function () {
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
if (topButton && topnavList) {
topButton.addEventListener("click", function (e) {
topnavList
.classList
.toggle("hidden");
e.stopPropagation();
});
document.addEventListener("click", function (e) {
// if the clicked element isn't the list, close the list
if (!topnavList.classList.contains("hidden") && !e.target.closest("#topnavList")) {
topButton.click();
}
});
// set active <a> element
var url = window
.location
.href
.toLowerCase();
var aTags = topnavList.getElementsByTagName('a');
for (var i = 0; i < aTags.length; i++) {
var lowerhref = aTags[i]
.href
.toLowerCase();
if (lowerhref.endsWith('.html'))
lowerhref = lowerhref.slice(0, -5);
if (url.startsWith(lowerhref)) {
aTags[i]
.classList
.add('active');
break;
}
}
}
});
</script>
<style>
.overlay {
position: absolute;
width: 100%;
height: 100%;
}
.overlay::before {
top: 0;
left: 0;
}
.overlay::after {
right: 0;
top: 0;
transform: rotateZ(180deg);
}
.overlay::before,
.overlay::after {
background: linear-gradient(to right, var(--gradient-color));
content: "";
height: 100%;
position: absolute;
width: var(--gradient-width);
z-index: 2;
}
.marquee-container {
overflow-x: hidden !important;
display: flex !important;
flex-direction: row !important;
position: relative;
width: 100%;
transform: none;
}
.initial-child-container {
flex: 0 0 auto;
display: flex;
min-width: auto;
flex-direction: row;
}
.marquee {
flex: 0 0 auto;
min-width: auto;
z-index: 1;
display: flex;
flex-direction: row;
align-items: center;
animation: marquee 35s linear infinite;
}
@keyframes marquee {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
</style>
<section class="text-white bg-nwoods-primary">
<div class="max-w-screen-xl mx-auto px-6 lg:px-0 flex flex-col lg:flex-row items-center">
<div
class="flex flex-col shrink-0 mx-auto justify-center text-center lg:mx-8 lg:max-w-xl lg:items-start lg:text-left lg:min-h-[520px] ">
<h1 class="text-4xl lg:text-6xl">
Powerful Diagrams<br class="hidden lg:block" />
For Every Industry
</h1>
<p class="mt-4 text-lg leading-8 text-white">GoJS is the modern diagramming framework
for rich and interactive data visualizations.</p>
<div class="mt-10 mb-4 flex items-center justify-center gap-x-6">
<a href="./samples"
class="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-white/95">
View samples</a>
<a href="./learn"
class="flex items-center px-3.5 py-2.5 text-sm font-semibold leading-6 text-white hover:text-nwoods-accent">
Start learning
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="3" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</div>
<div class="max-w-md flex-shrink lg:max-w-2xl mx-auto">
<img class="z-50" src="./assets/images/fp/banner.png" alt="Diagram">
</div>
</div>
</section>
<section class="mx-auto mt-10 px-6 bg-white text-gray-900 md:max-w-screen-md lg:max-w-screen-xl lg:px-8">
<div class="flex mb-10 justify-center lg:order-first">
<a href="changelog.html"
class="relative flex items-center px-3 py-1 text-lg leading-6 font-semibold text-nwoods-accent hover:text-nwoods-accentHover border-b border-b-amber-500 hover:border-b-nwoods-accent">
October 2025: GoJS 3.1 has been released! Read the Changelog Here
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="3" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
<div class="lg:text-center">
<h2 class="text-3xl sm:text-4xl">Build diagrams for the web in
JavaScript and TypeScript</h2>
<p class="mt-6 text-lg leading-8 text-gray-600">Use GoJS to create interactive diagrams to visualize, monitor,
and edit your systems.</p>
</div>
<div class="h-px max-w-xs mx-auto my-10 bg-gradient-to-r from-transparent via-gray-300 sm:max-w-none"
role="separator"></div>
<div class="grid items-stretch gap-4 lg:grid-cols-2">
<a class="group relative w-fit mx-auto hover:drop-shadow-md" href="samples/orgChartEditor.html">
<img class="h-full max-h-96 object-cover rounded-lg lg:max-h-full" src="./assets/images/fp/site3.png"
alt="Org Chart">
<div
class="absolute opacity-90 bottom-0 left-0 z-10 p-4 text-white bg-gray-900/90 transition-all group-hover:-translate-y-8 group-hover:opacity-100">
<h2 class="flex items-center">
Org charts
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="5" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</h2>
<p>
Create classic org charts.
Leverage GoJS to allow users to easily interact with their org charts,
editing relationships, collapsing levels, and more.
</p>
</div>
</a>
<div class="flex flex-col">
<div class="grow py-6 lg:p-6">
<p class="text-base font-semibold leading-7 text-nwoods-accent">Represent relationships</p>
<h2 class="text-3xl sm:text-4xl">Develop interactive org charts, trees, and hierarchy diagrams</h2>
<div class="flex flex-col space-y-4 mt-8">
<div class="flex items-center">
<svg class="h-7 w-7 mr-2 text-nwoods-primary shrink-0" aria-hidden="true" fill="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
fill-rule="evenodd"></path>
</svg>
Use automatic layouts to easily modify the way relationships are displayed.
</div>
<div class="flex items-center">
<svg class="h-7 w-7 mr-2 text-nwoods-primary shrink-0" aria-hidden="true" fill="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
fill-rule="evenodd"></path>
</svg>
Allow your users to edit diagrams on the fly, changing relationships or just updating data.
</div>
<div class="flex items-center">
<svg class="h-7 w-7 mr-2 text-nwoods-primary shrink-0" aria-hidden="true" fill="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
fill-rule="evenodd"></path>
</svg>
Collapse different levels of your trees to bring focus where it's needed.
</div>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<a class="group relative w-fit mx-auto hover:drop-shadow-md" href="samples/genogram.html">
<img class="max-h-80 border rounded-lg border-slate-200" src="assets/images/fp/site5.png" alt="Genogram" />
<div class="absolute opacity-90 bottom-0 left-0 right-0 text-center z-10 p-2
bg-gradient-to-b from-transparent via-slate-50/90 to-transparent
text-gray-900 transition-all group-hover:-translate-y-1/4 group-hover:opacity-100">
<h2 class="inline-flex items-center">
Genograms
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="5" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</h2>
</div>
</a>
<a class="group relative w-fit mx-auto hover:drop-shadow-md" href="samples/familyTree.html">
<img class="max-h-80 border rounded-lg border-slate-200" src="assets/images/fp/site9.png" alt="Family Tree" />
<div class="absolute opacity-90 bottom-0 left-0 right-0 text-center z-10 p-2
bg-gradient-to-b from-transparent via-white/90 to-transparent
text-gray-900 transition-all group-hover:-translate-y-1/4 group-hover:opacity-100">
<h2 class="inline-flex items-center">
Family trees
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="5" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</h2>
</div>
</a>
</div>
</div>
</div>
<div class="h-px max-w-xs mx-auto my-10 bg-gradient-to-r from-transparent via-gray-300 sm:max-w-none"
role="separator"></div>
<div>
<div class="lg:text-center">
<h2 class="text-4xl">GoJS powers visualizations in every sector</h2>
<p class="mt-6 text-lg leading-8 text-gray-600">
Including industrial planning, security,
organization management, consumer apps, and more.
</p>
</div>
<div class="marquee-container flex flex-row my-12">
<div class="overlay"
style="--gradient-color: rgba(255, 255, 255, 1), rgba(248, 251, 253, 0);--gradient-width: 15%;"></div>
<div class="marquee">
<div class="initial-child-container items-center">
<img class="h-16 ml-12" src="./assets/images/fp/customer/3m.png" alt="3m" />
<img class="h-10 ml-12" src="./assets/images/fp/customer/airbus.png" alt="airbus" />
<img class="h-12 ml-12" src="./assets/images/fp/customer/amazon.png" alt="amazon" />
<img class="h-20 ml-12" src="./assets/images/fp/customer/amex.png" alt="amex" />
<img class="h-12 ml-12" src="./assets/images/fp/customer/bosch.png" alt="bosch" />
<img class="h-10 ml-12" src="./assets/images/fp/customer/hitachi.png" alt="hitachi" />
<img class="h-20 ml-12" src="./assets/images/fp/customer/nasa.png" alt="nasa" />
<img class="h-16 ml-12" src="./assets/images/fp/customer/pwc.png" alt="pwc" />
</div>
</div>
<div class="marquee">
<img class="h-16 ml-12" src="./assets/images/fp/customer/3m.png" alt="3m" />
<img class="h-10 ml-12" src="./assets/images/fp/customer/airbus.png" alt="airbus" />
<img class="h-12 ml-12" src="./assets/images/fp/customer/amazon.png" alt="amazon" />
<img class="h-20 ml-12" src="./assets/images/fp/customer/amex.png" alt="amex" />
<img class="h-12 ml-12" src="./assets/images/fp/customer/bosch.png" alt="bosch" />
<img class="h-10 ml-12" src="./assets/images/fp/customer/hitachi.png" alt="hitachi" />
<img class="h-20 ml-12" src="./assets/images/fp/customer/nasa.png" alt="nasa" />
<img class="h-16 ml-12" src="./assets/images/fp/customer/pwc.png" alt="pwc" />
</div>
</div>
</div>
<div class="h-px max-w-xs mx-auto my-10 bg-gradient-to-r from-transparent via-gray-300 sm:max-w-none"
role="separator"></div>
<div class="grid items-stretch gap-4 lg:grid-cols-2">
<a class="group relative w-fit mx-auto hover:drop-shadow-md" href="samples/industrialMonitor.html">
<img class="h-full max-h-96 object-cover rounded-lg lg:max-h-full" src="./assets/images/fp/site2.png"
alt="Industrial Monitor">
<div
class="absolute opacity-90 bottom-0 left-0 z-10 p-4 text-gray-900 bg-[#e1cdab] transition-all group-hover:-translate-y-8 group-hover:opacity-100">
<h2 class="flex items-center">
Industrial Diagrams
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="5" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</h2>
<p>
GoJS is ideal for industrial monitoring and control systems. Create SCADA tools, visualize flow,
and see your processes more clearly.
</p>
</div>
</a>
<div class="flex flex-col lg:order-first">
<div class="grow py-6 lg:p-6">
<p class="text-base font-semibold leading-7 text-nwoods-accent">Process organization</p>
<h2 class="text-3xl sm:text-4xl">Visualize and monitor critical assets across domains</h2>
<div class="flex flex-col space-y-4 mt-8">
<div class="flex items-center">
From the biggest banks to NASA to every stage of consumer production,
GoJS helps enterprises build the tools they need.
</div>
<div class="flex items-center">
GoJS makes it easy to create industrial process automation, control, and monitoring tools for your
organization.
</div>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<a class="group relative w-fit mx-auto hover:drop-shadow-md" href="samples/security.html">
<img class="max-h-80 border rounded-lg border-slate-200" src="assets/images/fp/security.png" alt="Security Diagrams" />
<div class="absolute opacity-90 bottom-0 left-0 right-0 text-center z-10 p-2
bg-gradient-to-b from-transparent via-[whitesmoke]/90 to-transparent
text-gray-900 transition-all group-hover:-translate-y-1/4 group-hover:opacity-100">
<h2 class="inline-flex items-center">
Security Diagrams
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="5" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</h2>
</div>
</a>
<a class="group relative w-fit mx-auto hover:drop-shadow-md" href="samples/stateChart.html">
<img class="max-h-80 border rounded-lg border-slate-200" src="assets/images/fp/site6.png" alt="State Chart" />
<div class="absolute opacity-90 bottom-0 left-0 right-0 text-center z-10 p-2
bg-gradient-to-b from-transparent via-[whitesmoke]/90 to-transparent
text-gray-900 transition-all group-hover:-translate-y-1/4 group-hover:opacity-100">
<h2 class="inline-flex items-center">
State charts
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="5" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</h2>
</div>
</a>
</div>
</div>
<!-- 4 sample -->
<div class="w-full mx-auto lg:text-center lg:col-span-2 mt-4">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<a class="group relative w-fit mx-auto hover:drop-shadow-md" href="samples/flowchart.html">
<img class="max-h-80 border rounded-lg border-slate-200" src="assets/images/fp/site1.png" alt="Flowchart" />
<div class="absolute opacity-90 bottom-0 left-0 right-0 text-center z-10 p-2
bg-gradient-to-b from-transparent via-[#141e37]/90 to-transparent
text-white transition-all group-hover:-translate-y-1/4 group-hover:opacity-100">
<h2 class="inline-flex items-center">
Flowcharts
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="5" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</h2>
</div>
</a>
<!-- flow -->
<a class="group relative w-fit mx-auto hover:drop-shadow-md" href="samples/processFlow.html">
<img class="max-h-80 border rounded-lg border-slate-200" src="assets/images/fp/flow.png" alt="Process Visualizations" />
<div class="absolute opacity-90 bottom-0 left-0 right-0 text-center z-10 p-2
bg-gradient-to-b from-transparent via-[whitesmoke]/90 to-transparent
text-gray-900 transition-all group-hover:-translate-y-1/4 group-hover:opacity-100">
<h2 class="inline-flex items-center">
Process Visualizations
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="5" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</h2>
</div>
</a>
<!-- network -->
<a class="group relative w-fit mx-auto hover:drop-shadow-md" href="samples/networkConfig.html">
<img class="max-h-80 border rounded-lg border-slate-200" src="assets/images/fp/network.png" alt="Network Diagram" />
<div class="absolute opacity-90 bottom-0 left-0 right-0 text-center z-10 p-2
bg-gradient-to-b from-transparent via-[whitesmoke]/90 to-transparent
text-gray-900 transition-all group-hover:-translate-y-1/4 group-hover:opacity-100">
<h2 class="inline-flex items-center">
Network Design and Monitoring
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="5" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</h2>
</div>
</a>
<!-- regrouping -->
<a class="group relative w-fit mx-auto hover:drop-shadow-md" href="samples/regrouping.html">
<img class="max-h-80 border rounded-lg border-slate-200" src="assets/images/fp/grouping.png" alt="Regrouping Diagram" />
<div class="absolute opacity-90 bottom-0 left-0 right-0 text-center z-10 p-2
bg-gradient-to-b from-transparent via-[whitesmoke]/90 to-transparent
text-gray-900 transition-all group-hover:-translate-y-1/4 group-hover:opacity-100">
<h2 class="inline-flex items-center">
Dynamic Grouping
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="5" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</h2>
</div>
</a>
</div>
</div>
<div class="w-full mx-auto max-w-3xl lg:text-center lg:col-span-2 mt-4">
<a class="inline-flex items-center text-2xl -ml-3.5 px-3.5 py-2.5 font-semibold leading-6 text-nwoods-accent lg:ml-0 hover:text-nwoods-accentHover"
href="./samples/">
See hundreds of samples
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="5" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</div>
<div class="h-px max-w-xs mx-auto my-10 bg-gradient-to-r from-transparent via-gray-300 sm:max-w-none"
role="separator"></div>
<!-- support -->
<div class="mx-auto max-w-3xl lg:text-center">
<h2 class="text-3xl sm:text-4xl">Developer to developer support, starting with your evaluation</h2>
<p class="mt-6 text-lg leading-8 text-gray-600">
Northwoods prides itself on over 25 years of developer to developer support for all our diagramming libraries.
Want to get started faster? Register for support during evaluation and we'll help with a proof-of-concept and
template design.
</p>
<a class="inline-flex items-center text-2xl mt-4 -ml-3.5 px-3.5 py-2.5 font-semibold leading-6 text-nwoods-accent lg:ml-0 hover:text-nwoods-accentHover"
href="https://nwoods.com/register.html" target="_blank" rel="noopener">
Register for evaluation
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="4" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
<div class="h-px max-w-xs mx-auto my-10 bg-gradient-to-r from-transparent via-gray-300 sm:max-w-none"
role="separator"></div>
<div>
<div class="mx-auto max-w-3xl lg:text-center">
<p class="text-base font-semibold leading-7 text-nwoods-accent">Develop faster</p>
<h2 class="text-3xl sm:text-4xl">Built-in features and interactivity
to get your projects out the door</h2>
</div>
<div class="mt-12 lg:mt-20">
<div class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 md:grid-cols-2 md:max-w-none lg:grid-cols-3">
<a class="relative pl-16 flex flex-col" href="./intro/layouts.html">
<div class="text-lg font-semibold leading-7">
<div class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-nwoods-primary">
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
aria-hidden="true">
<path
d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125v-3.75ZM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-8.25ZM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-2.25Z"
stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
Automatic layouts
</div>
<div class="mt-2 text-base leading-7 text-gray-600 flex flex-col flex-auto">
<p class="flex-auto">
Built-in layouts, and many samples of custom layouts to use or adapt.
</p>
<p
class="flex items-center -ml-3.5 px-3.5 py-2.5 text-sm font-semibold leading-6 text-nwoods-accent hover:text-nwoods-accentHover">
Learn more
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="3" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</p>
</div>
</a>
<a class="relative pl-16 flex flex-col" href="./intro/nodes.html">
<div class="text-lg font-semibold leading-7">
<div class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-nwoods-primary">
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
aria-hidden="true">
<path
d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z"
stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
Node and link templates
</div>
<div class="mt-2 text-base leading-7 text-gray-600 flex flex-col flex-auto">
<p class="flex-auto">
Quickly set the look for your diagram parts while keeping
appearance separate from data.
</p>
<p
class="flex items-center -ml-3.5 px-3.5 py-2.5 text-sm font-semibold leading-6 text-nwoods-accent hover:text-nwoods-accentHover">
Learn more
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="3" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</p>
</div>
</a>
<a class="relative pl-16 flex flex-col" href="./intro/dataBinding.html">
<div class="text-lg font-semibold leading-7">
<div class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-nwoods-primary">
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
aria-hidden="true">
<path
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
Data binding
</div>
<div class="mt-2 text-base leading-7 text-gray-600 flex flex-col flex-auto">
<p class="flex-auto">
Automatically keep your data in sync with your display,
and vice versa.
</p>
<p
class="flex items-center -ml-3.5 px-3.5 py-2.5 text-sm font-semibold leading-6 text-nwoods-accent hover:text-nwoods-accentHover">
Learn more
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="3" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</p>
</div>
</a>
<a class="relative pl-16 flex flex-col" href="./intro/transactions.html">
<div class="text-lg font-semibold leading-7">
<div class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-nwoods-primary">
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
aria-hidden="true">
<path
d="M21 16.811c0 .864-.933 1.406-1.683.977l-7.108-4.061a1.125 1.125 0 0 1 0-1.954l7.108-4.061A1.125 1.125 0 0 1 21 8.689v8.122ZM11.25 16.811c0 .864-.933 1.406-1.683.977l-7.108-4.061a1.125 1.125 0 0 1 0-1.954l7.108-4.061a1.125 1.125 0 0 1 1.683.977v8.122Z"
stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
Undo & redo
</div>
<div class="mt-2 text-base leading-7 text-gray-600 flex flex-col flex-auto">
<p class="flex-auto">
Users can easily undo and redo, and cancelled tool operations are rolled back.
</p>
<p
class="flex items-center -ml-3.5 px-3.5 py-2.5 text-sm font-semibold leading-6 text-nwoods-accent hover:text-nwoods-accentHover">
Learn more
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="3" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</p>
</div>
</a>
<a class="relative pl-16 flex flex-col" href="./intro/commands.html">
<div class="text-lg font-semibold leading-7">
<div class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-nwoods-primary">
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
aria-hidden="true">
<path
d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5A3.375 3.375 0 0 0 6.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0 0 15 2.25h-1.5a2.251 2.251 0 0 0-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 0 0-9-9Z"
stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
Keyboard shortcuts
</div>
<div class="mt-2 text-base leading-7 text-gray-600 flex flex-col flex-auto">
<p class="flex-auto">
Use common keyboard commands and gestures, which
can be customized.
</p>
<p
class="flex items-center -ml-3.5 px-3.5 py-2.5 text-sm font-semibold leading-6 text-nwoods-accent hover:text-nwoods-accentHover">
Learn more
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="3" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</p>
</div>
</a>
<a class="relative pl-16 flex flex-col" href="./intro/subgraphs.html">
<div class="text-lg font-semibold leading-7">
<div class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-nwoods-primary">
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
aria-hidden="true">
<path
d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z"
stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
Subgraphs
</div>
<div class="mt-2 text-base leading-7 text-gray-600 flex flex-col flex-auto">
<p class="flex-auto">
Groups provide subgraphs to apply different rules or
layouts to their members.
</p>
<p
class="flex items-center -ml-3.5 px-3.5 py-2.5 text-sm font-semibold leading-6 text-nwoods-accent hover:text-nwoods-accentHover">
Learn more
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="3" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</p>
</div>
</a>
<a class="relative pl-16 flex flex-col" href="./intro/tools.html">
<div class="text-lg font-semibold leading-7">
<div class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-nwoods-primary">
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
aria-hidden="true">
<path
d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437 1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008Z"
stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
Extensible tools
</div>
<div class="mt-2 text-base leading-7 text-gray-600 flex flex-col flex-auto">
<p class="flex-auto">
Customize and extend Tools to give your users the interaction they need.
</p>
<p
class="flex items-center -ml-3.5 px-3.5 py-2.5 text-sm font-semibold leading-6 text-nwoods-accent hover:text-nwoods-accentHover">
Learn more
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="3" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</p>
</div>
</a>
<a class="relative pl-16 flex flex-col" href="./intro/events.html">
<div class="text-lg font-semibold leading-7">
<div class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-nwoods-primary">
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
aria-hidden="true">
<path d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg>
</svg>
</div>
Customizable events and permissions
</div>
<div class="mt-2 text-base leading-7 text-gray-600 flex flex-col flex-auto">
<p class="flex-auto">
Execute custom logic or notifications when users perform certain actions or key presses,
or disable different interactions altogether.
</p>
<p
class="flex items-center -ml-3.5 px-3.5 py-2.5 text-sm font-semibold leading-6 text-nwoods-accent hover:text-nwoods-accentHover">
Learn more
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="3" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</p>
</div>
</a>
<a class="relative pl-16 flex flex-col" href="./intro/contextMenus.html">
<div class="text-lg font-semibold leading-7">
<div class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-nwoods-primary">
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
aria-hidden="true">
<path
d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z"
stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M6 6h.008v.008H6V6Z" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
Context menus and tooltips
</div>
<div class="mt-2 text-base leading-7 text-gray-600 flex flex-col flex-auto">
<p class="flex-auto">
Context menus and tooltips are built-in, and can be extended
in-canvas or with HTML.
</p>
<p
class="flex items-center -ml-3.5 px-3.5 py-2.5 text-sm font-semibold leading-6 text-nwoods-accent hover:text-nwoods-accentHover">
Learn more
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="3" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</p>
</div>
</a>
</div>
</div>
</div>
<div class="h-px max-w-xs mx-auto my-10 bg-gradient-to-r from-transparent via-gray-300 sm:max-w-none"
role="separator"></div>
<div>
<div class="mx-auto max-w-3xl lg:text-center">
<h2 class="text-3xl sm:text-4xl">Designed to work with all modern frameworks</h2>
<p class="mt-6 text-lg leading-8 text-gray-600">With no dependencies, you can use GoJS anywhere.
Leverage it in React, Vue, Angular, or Svelte apps, or in your Node or Electron apps.
</p>
</div>
<div class="mt-12 lg:mt-20 max-w-4xl mx-auto max-w-4xl mx-auto">
<div class="grid grid-cols-1 gap-x-8 gap-y-10 md:grid-cols-2">
<a class="relative pl-16 flex flex-col" href="./intro/react.html">
<div class="text-lg font-semibold leading-7">
<div class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center">
<img class="w-full h-full" alt="react" src="assets/images/fp/react-icon.svg" />
</div>
React
</div>
<div class="mt-2 text-base leading-7 text-gray-600 flex flex-col flex-auto">
<p class="flex-auto">
Use <strong>gojs-react</strong>, our component library, to simplify your GoJS React
integration.
</p>
<p
class="flex items-center -ml-3.5 px-3.5 py-2.5 text-sm font-semibold leading-6 text-nwoods-accent hover:text-nwoods-accentHover">
Learn more
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="3" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</p>
</div>
</a>
<a class="relative pl-16 flex flex-col" href="https://github.com/NorthwoodsSoftware/gojs-vue-basic"
target="_blank" rel="noopener">
<div class="text-lg font-semibold leading-7">
<div class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center">
<img class="w-full h-full" alt="vue" src="assets/images/fp/vue-icon.svg" />
</div>
Vue
</div>
<div class="mt-2 text-base leading-7 text-gray-600 flex flex-col flex-auto">
<p class="flex-auto">
We maintain a Vue 3 integration sample to help speed up your app development.
</p>
<p
class="flex items-center -ml-3.5 px-3.5 py-2.5 text-sm font-semibold leading-6 text-nwoods-accent hover:text-nwoods-accentHover">
Learn more
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="3" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</p>
</div>
</a>
<a class="relative pl-16 flex flex-col" href="./intro/angular.html">
<div class="text-lg font-semibold leading-7">
<div class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center">
<img class="w-full h-full" alt="angular" src="assets/images/fp/angular-icon.svg" />
</div>
Angular
</div>
<div class="mt-2 text-base leading-7 text-gray-600 flex flex-col flex-auto">
<p class="flex-auto">
Check out our other component library, <strong>gojs-angular</strong>, and get your Angular diagrams
up and running.
</p>
<p
class="flex items-center -ml-3.5 px-3.5 py-2.5 text-sm font-semibold leading-6 text-nwoods-accent hover:text-nwoods-accentHover">
Learn more
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="3" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</p>
</div>
</a>
<a class="relative pl-16 flex flex-col" href="./intro/svelte.html">
<div class="text-lg font-semibold leading-7">
<div class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center">
<img class="w-full h-full" alt="svelte" src="assets/images/fp/svelte-icon.svg" />
</div>
Svelte
</div>
<div class="mt-2 text-base leading-7 text-gray-600 flex flex-col flex-auto">
<p class="flex-auto">
GoJS can integrate into your Svelte app with just an install and a div.
</p>
<p
class="flex items-center -ml-3.5 px-3.5 py-2.5 text-sm font-semibold leading-6 text-nwoods-accent hover:text-nwoods-accentHover">
Learn more
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="3" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</p>
</div>
</a>
</div>
</div>
</div>
<div class="h-px max-w-xs mx-auto my-10 bg-gradient-to-r from-transparent via-gray-300 sm:max-w-none"
role="separator"></div>
<div>
<div class="mx-auto max-w-3xl lg:text-center">
<h2 class="text-3xl sm:text-4xl">Extensive documentation</h2>
</div>
<div class="mt-12 lg:mt-20 max-w-4xl mx-auto">
<div class="grid grid-cols-1 gap-x-8 gap-y-10 md:grid-cols-2">
<a class="relative flex flex-col" href="./samples/index.html">
<div class="text-lg font-semibold leading-7">
Explore
</div>
<div class="mt-2 text-base leading-7 text-gray-600 flex flex-col flex-auto">
<p class="flex-auto">
Start from over 200 sample apps that demonstrate flowcharts, org charts, mind maps, UML diagrams, BPMN
diagrams, graph editors, data visualization, custom tools and layouts, and much more.
</p>
<p
class="flex items-center -ml-3.5 px-3.5 py-2.5 text-sm font-semibold leading-6 text-nwoods-accent hover:text-nwoods-accentHover">
View samples
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="3" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</p>
</div>
</a>
<a class="relative flex flex-col" href="./learn/index.html">
<div class="text-lg font-semibold leading-7">
Learn
</div>
<div class="mt-2 text-base leading-7 text-gray-600 flex flex-col flex-auto">
<p class="flex-auto">
Get started with a step-by-step description of how to build a JavaScript diagram in HTML using GoJS and
some model data.
</p>
<p
class="flex items-center -ml-3.5 px-3.5 py-2.5 text-sm font-semibold leading-6 text-nwoods-accent hover:text-nwoods-accentHover">
See tutorials
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="3" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</p>
</div>
</a>
<a class="relative flex flex-col" href="./intro/index.html">
<div class="text-lg font-semibold leading-7">
Technical introduction
</div>
<div class="mt-2 text-base leading-7 text-gray-600 flex flex-col flex-auto">
<p class="flex-auto">
Read our introduction for an overview of GoJS concepts and features, including hundreds of live
interactive examples embedded right in each page.
</p>
<p
class="flex items-center -ml-3.5 px-3.5 py-2.5 text-sm font-semibold leading-6 text-nwoods-accent hover:text-nwoods-accentHover">
Read intro pages
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="3" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</p>
</div>
</a>
<a class="relative flex flex-col" href="./api/index.html">
<div class="text-lg font-semibold leading-7">
API documentation
</div>
<div class="mt-2 text-base leading-7 text-gray-600 flex flex-col flex-auto">
<p class="flex-auto">
Read our comprehensive documentation for an in-depth reference of the entire library.
</p>
<p
class="flex items-center -ml-3.5 px-3.5 py-2.5 text-sm font-semibold leading-6 text-nwoods-accent hover:text-nwoods-accentHover">
View API
<svg class="w-3 h-3 ml-1.5" aria-hidden="true" fill="none" stroke-width="3" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</p>
</div>
</a>
</div>
</div>
</div>
</section>
<div class="mt-20 bg-white border-t border-t-gray-200 flex">
<div class="mx-auto py-2">
<p class="my-3 text-nwoods-primary text-2xl font-semibold logo">By Northwoods Software</p>
</div>
</div>
<footer class="bg-white text-gray-900 border-t border-t-gray-200">
<div class="w-full max-w-screen-lg mx-auto px-4 py-6">
<p id="version" class="text-xs text-gray-900 m-0"></p>
<div class="text-sm px-0 mb-4 grid grid-cols-2 sm:grid-cols-3 gap-y-10">
<div>
<h2 class="text-base font-semibold text-nwoods-primary">GoJS</h2>
<ul class="list-none space-y-4 md:space-y-1 px-0">
<li>
<a href="samples/index.html">Samples</a>
</li>
<li>
<a href="learn/index.html">Learn</a>
</li>
<li>
<a href="intro/index.html">Intro</a>
</li>
<li>
<a href="api/index.html">API</a>
</li>
<li>
<a href="changelog.html">Changelog</a>
</li>
<li>
<a href="https://github.com/NorthwoodsSoftware/GoJS" target="_blank" rel="noopener">GitHub</a>
</li>
</ul>
</div>
<div>
<h2 class="text-base font-semibold text-nwoods-primary">Support</h2>
<ul class="list-none space-y-4 md:space-y-1 px-0">
<li>
<a href="https://nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/contact.html', 'contact');">Contact</a>
</li>
<li>
<a href="https://forum.nwoods.com/c/gojs" target="_blank" rel="noopener">Forum</a>
</li>
<li>
<a href="https://nwoods.com/app/activate.aspx?sku=gojs" target="_blank" rel="noopener">Activate</a>
</li>
<li>
<a href="https://nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/sales/index.html', 'buy');">Buy</a>
</li>
<li>
<a href="https://nwoods.com/register.html" target="_blank" rel="noopener">Register</a>
</li>
</ul>
</div>
<div>
<h2 class="text-base font-semibold text-nwoods-primary">Company</h2>
<ul class="list-none space-y-4 md:space-y-1 px-0">
<li>
<a target="_blank" href="https://nwoods.com" target="_blank" rel="noopener">Northwoods</a>
</li>
<li>
<a target="_blank" href="https://nwoods.com/about.html" target="_blank" rel="noopener">About Us</a>
</li>
<li>
<a target="_blank" href="https://nwoods.com/contact.html" target="_blank" rel="noopener">Contact Us</a>
</li>
<li>
<a target="_blank" href="https://nwoods.com/consulting.html" target="_blank" rel="noopener">Consulting</a>
</li>
<li>
<a target="_blank" href="https://twitter.com/northwoodsgo" target="_blank" rel="noopener">Twitter</a>
</li>
</ul>
</div>
</div>
<p class="text-sm text-gray-900 md:mb-6">
Copyright 1998-2025 <a href="https://nwoods.com">Northwoods Software</a>
</p>
</div>
</footer>
</body>
<link rel="prefetch" as="script" href="./release/go.js">
<script async src="https://www.googletagmanager.com/gtag/js?id=G-S5QK8VSK84"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-S5QK8VSK84');
var getOutboundLink = function (url, label) {
gtag('event', 'click', {
'event_category': 'outbound',
'event_label': label,
'transport_type': 'beacon'
});
}
const params = new URL(document.location).searchParams
let a = params.get('a');
if (a) localStorage.setItem('a', a);
a = localStorage.getItem('a');
if (a) {
const links = [...document.body.getElementsByTagName("a")].filter((l) => l.href.includes('nwoods.com'));
for (const l of links) {
const url = new URL(l.href);
url.searchParams.set('a', a);
l.href = url;
}
}
</script>
</html>