Skip to content
See Sanity in action 👀 Join us for a live product demo + Q&A →
Sanity
Get started
  • Sanity Studio - Flexible editing environment
  • Content Lake - Real-time database
  • Developer experience - Tooling you love
  • Structured content - The philosophy behind Sanity
  • Review changes - View edits & rollback instantly
  • Image pipeline - On-demand transformations
  • E-commerce - Better shopping experiences
  • Marketing sites - Control your story
  • Products & services - Innovate and automate
  • Mobile apps - Content backend for every OS
  • Aether - Unique digital shopping experience
  • Morning Brew - Omnichannel media distribution
  • InVision - Delivering exceptional customer experiences
  • DataStax - Personalization for global audience
  • React
  • Gatsby
  • Next
  • Nuxt
  • Eleventy
  • Netlify
  • Vercel
  • Algolia
  • Documentation
  • Reference
  • Guides
  • Resource library
  • Headless CMS
  • Tools & plugins
  • Project showcase
  • Schemas & snippets
  • Agency partners
  • Technology partners
  • Get support
  • Share your work
  • 5 Disadvantages Of Wordpress That Are Holding You Back
EnterprisePricing
Contact salesLog inGet started
Published November 17th 2020

Visualize your content graph

This plugin from our recent hackathon lets you see datasets as connected clouds of information

Kapehe

Developer Relations Specialist at Sanity

Alexander Staubo

Alex is a senior backend developer at Sanity.io.

What is Graph View and where did it come from?

Recently Sanity had a distributed, virtual all-hands. As part of this, we held an internal hackathon where everyone came up with ideas for short projects that could be completed in a week. Graph View is the first of these projects we are releasing. The team behind it is Alexander Staubo, Marius Lundgård, Christian Flaaten, Bryan Robinson, Ørjan Ommundsen, and Will Luna.

When using Sanity, the collection of documents can grow quickly. Good modeling and organization requires that we understand how our data is connected. Without a holistic way to visualize how our dataset is shaped, there may be a lot of connections that go unnoticed, resulting in structures and decisions made with less intentionality than we like.

Graph View provides that perspective. It shows all documents in a dataset as nodes and the references running between them as vertices. For a larger dataset, like the sanity.io dataset, we could see a graph like this:

Protip

Each dot shown here represents a bit of data from the Studio. Each line represents how those dots are connected.

The graph is implemented using the browser's 2D canvas, with the help of a JavaScript library called react-force-graph.

When you open the view for the first time, it grabs a snapshot of the entire document set (this takes time with huge datasets, since everything has to be downloaded first), and then listens to changes. Whenever someone edits documents or adds references between them, the graph updates with new vertices and edges.

A hovering marker, or avatar, appears next to a document when it's edited, indicating who on your team is editing it right now. This avatar isn't yet displayed for logged-in users who are viewing the document, but this is something we want to add in the future.

The GitHub repo for this plugin can be found here.

If you want to watch a video of Bryan and Kap running through this new feature, you can check that out here:

How to add it to the Studio

The plugin can be added to your current Sanity Studio by running the following command:

sanity install graph-view

Once added, you will see {} Graph added to the top bar of the Studio. The full npm package can be found here.

Benefits of Graph View

This graph is real-time. When documents are added or updated, the connection will grow or change accordingly.

While using this graph, you will notice patterns emerging which can tell you a lot about your data:

  1. Islands of information - An island of dots may mean that data isn’t being used to its full potential and adding a connection could help.
  2. Connections between data - You could discover structures in the data that were never realized initially. This could open up ideas for other connections.
  3. Important points in the data - There may be one dot that a lot of other documents rely on heavily. You can use this information to prioritize updating and maintaining these documents.

Real-time

When someone is adding or editing data in the Studio, their avatar will show up and you will see exactly where they are in the Studio. The avatar moves as they move around the Studio. This is our collaborative Presence feature, shown in the graph view.

Available now

We are thrilled about this new plugin and are excited to see how beautiful your dataset graphs turn out. If you would like to share yours, post in the #i-made-this channel in the community where you can share your own instances of Graph View.

Run the command sanity install graph-view to get it up and running and check out just how interconnected your dataset is.

Page content

  • What is Graph View and where did it come from?
  • How to add it to the Studio
  • Benefits of Graph View
    • Real-time
  • Available now

Platform

Structured ContentDeveloper experienceContent LakeSanity StudioSecurity & Compliance
  • Sanity vs Contentful
  • Sanity vs Strapi
  • Sanity vs Wordpress
  • Sanity vs Adobe Experience Manager
  • Sanity vs Hygraph
  • Sanity vs Sitecore
  • Sanity vs Storyblok
  • Sanity vs Contentstack
  • Sanity vs Prismic
  • Sanity vs Drupal
  • Sanity vs ButterCMS

Resources

Documentation
  • React Blog
  • Gatsby Blog
  • Next.js Landing Pages
  • Progressive Web Application
  • Single Page Application
  • Svelte & Typescript App
  • Vue & Tailwind Blog
  • Developer Portfolio Templates
  • Form validation with Yup
  • Live Preview with Next.js and Sanity.io
Resource library
  • Agency partners
  • Technology partners
  • Blog Template
  • Personal Website Template
  • Developer Portfolio Templates
  • All Templates
Case Studies
  • Headless CMS
  • What is an API CMS
  • Static Sites 101
  • Headless SEO
  • Localization
  • GraphQL vs REST
  • What is a DXP?
  • Typescript 101
  • Content as a Service
  • Ecommerce SEO
  • React CMS
  • Next.JS CMS
  • CMS for Shopify
  • Content platform
  • Multilingual CMS
  • Static Site CMS
  • Gatsby CMS
  • Node CMS
  • E-commerce CMS
  • Vue CMS
  • Angular CMS
  • GraphQL CMS
  • Newspaper CMS
  • Magazine CMS
  • CMS for apps
  • Remix CMS

Company

Contact SalesEnterpriseCareersTerms of ServiceAccessibility Statement

Stay connected

  • GitHub
  • Slack
  • Twitter
  • YouTube
  • Stack Overflow
  • Blog RSS
  • Newsletter
©Sanity 2023