N
NSG/Docs
Open Studio

Quick Start

Get started with NSG in under 5 minutes.

Option 1: Use Studio (Fastest)

  1. 1Open NSG Studio
  2. 2Connect your GitHub account or upload a ZIP file
  3. 3Select a repository and generate the graph
  4. 4Explore the visual stack, focus layers, and inspect nodes
  5. 5Save your project or create a shareable link

Option 2: Use the CLI (Local)

For local projects or private repos that should never leave your machine:

Terminal
# Install the CLI
npm install -g @nsg/cli

# Scan your project
nsg scan ./my-project --out project.nsg.json

# Start local viewer
nsg serve project.nsg.json

Option 3: Use the API

For programmatic graph creation and embedding:

api-example.ts
import { NSGClient } from "@nsg/api-client"

const client = new NSGClient({ apiKey: "your-api-key" })

// Create a graph from .nsg.json
const graph = await client.graphs.create({
  name: "My Project",
  content: nsgJsonData
})

// Get embeddable URL
const embed = await client.embeds.create({
  graphId: graph.id
})

Option 4: Embed in React

Add interactive graphs to your own applications:

Viewer.tsx
import { NSGCanvas } from "@nsg/react"

export function Viewer({ graph }) {
  return (
    <NSGCanvas
      graph={graph}
      theme="quantum"
      mode="nested"
      onNodeEnter={(node) => console.log("Entered:", node)}
      onLayerEnter={(layer) => console.log("Layer:", layer)}
    />
  )
}

Next Steps