Skip to content
Watch a live product demo 👀 See how Sanity powers richer commerce experiences
Sanity
  • Platform

    Sanity Studio

    Flexible editing environment

    APIs

    Connect to anything

    Content Lake

    Real-time database

    Watch product demo

    Features

    Real-time collaboration

    Fearlessly work with content

    Precise content querying

    Treat content as data with GROQ

    Localization

    Coherent messaging across territories

  • Use cases

    E-commerce

    Richer shopping experiences

    Marketing sites

    Control your story

    Products & services

    Innovate and automate

    Mobile apps

    Content backend for every OS

    View all

    Integrations

    Shopify
    Mux
    Vercel
    Netlify
    Algolia
    Cloudinary
    BigCommerce
    Commerce Layer
    Smartling
    Transifex
    View all
  • Learn

    Documentation
    API reference
    Guides
    GROQ cheat sheet
    Sanity UI
    Get started

    Build and share

    Templates
    Tools and plugins
    Schemas and snippets
    Project showcase
    Share your work
    Browse Exchange

    Frameworks

    React
    Vue
    Next.js
    Nuxt.js
    Svelte
    Remix
    Gatsby
    Astro
    Angular
    Eleventy
    View all
  • Discover

    Blog
    Resource library
    Agency partners
    Become a partner
    Technical support
    Talk to sales

    Case studies

    Puma

    Source of truth for all global markets

    Aether

    Unique digital shopping experience

    Morning Brew

    Omnichannel media distribution

    InVision

    Delivering exceptional customer experiences

    View all

    Popular guides

    Structured content
    Content modeling
    Headless CMS
    Headless SEO
    Static websites
    View all
  • Enterprise
  • Pricing
  • Log in
  • Contact sales
  • Get started
Contact salesGet started
Published April 30th 2020

Community Digest #17

We have found our way on to Twitch! Upcoming online events. Maps, serverless SEO, TypeScript, and a bunch of new apps and sites launched with Sanity.io.

Knut Melvær

Principal Developer Marketing Manager

Last week we got our feet wet with streaming! It‘s not like we haven't done it before: We live-streamed a global meetup back in the summer of -19, and we participated with this Simen‘s talk about “The Value of Improvisation in Software” at BackendlessConf last December. But now we have a new channel on Twitch, and we kicked it off with Espen & Knut doing some live-coding. You can watch the reruns on YouTube.

It was super fun, and we are definitively returning with more streams going forward. And speaking of streams…

Upcoming events

Middlesbroughfe Front End meetup on Twitch

On Thursday, April 30th at 6.30pm (GMT+1), Knut will be joining the folks at Middlesbroughfe Front End via Twitch to talk about Portable Text. Although the recording will be available after, we hope that you have the time to join us and hang in the chat room!

Follow Middlesbroughfe on Twitch to get a notification when the stream starts

Tweet by:Middlesbrough Front End's photo
Middlesbrough Front End
@middlesbroughfe

Join us tonight at 18:30pm (GMT+1) for this month's Twitch stream! We have an exciting lineup where we will be learning about @sveltejs @JEXIACOM and @sanity_io from our awesome speakers @kmelve and @marlosin - Stream link is https://t.co/aRtLes2cYd https://t.co/3WNvrKmGBJ https://t.co/zgKNNIBG69

Tweet published on: Apr 30, 2020, 10:22 AM
Liked by: 10
Replied by: 3

Online Meetup: Sanity User Group – San Francisco

Magnus, Even, and Espen will be hosting a Zoom meetup on Thursday 30th, 7–8.30pm (PST). Lucho will be joining to talk about the new Paint(!) plugin that he has made for Sanity, and Espen will also be sharing something cool from his big drawer of ideas.

Ping Magnus on twitter to get the Zoom-link!

(If you don't have twitter, you can also send Magnus an email to ask for the link)

Community Highlights

Leaflet plugin

When Espen is not working on existing new features for Sanity Studio from our roadmap, he sometimes take the time to put out other cool things. This week he published a new plugin for people who are into maps and geolocation:

I've made an input component plugin, which uses Leaflet.js for geopoints in Sanity. By default it uses OpenStreetMaps, so it doesn't require an API key like the Google Maps plugin. You can also configure it to use Mapbox (as in the screenshot) or other tile layers. I'll be creating more geo-related stuff built on this soon!
sanity install leaflet-input

Like this plugin? Give it a ⭐️ on GitHub!

Keep up the SEO hygiene with serverless prerendering!

We love the SEO-tools that Liam put together, powered by Yoast.js under the hood. It has this nifty way of parsing the HTML of a webpage to check if content and meta-information keeps those good SEO standards. However, requesting remote webpage content via the browser requires you to configure CORS for the site you want to check, which is not always easy or possible. That‘s when this handy approach by Kevin McAloon using serverless comes in handy:

I was using the awesome seo-tools plugin for my site, but it was a little frustrating using in development or with Gatsby preview because it currently requires static HTML to evaluate. This means editors can’t evaluate on the fly when editing content and have to first publish their content and rebuild the static HTML before the plugin can help them out.
Here is how I am able to work around it: I am using a netlify lambda function with puppeteer to execute and render the page. The seo plugin takes the url I want to render and appends it as a query string to my function’s endpoint. So if my function lives at domain.com/functions/prerender, in Sanity’s schema I am setting the seo plugin’s baseUrl to domain.com/functions/prerender?url={site-domain}. The plugin will then append the current document’s slug to the baseUrl, and call the endpoint which then fetches and returns the HTML of the live page for the seo plugin to evaluate.
When developing locally, I am running netlify dev so that my frontend is available at localhost:8000 and functions are available at localhost:34567. Then I run Sanity studio in development with the following set in .env.development --> http://localhost:34567/prerender?url=http://localhost:8000 . Live previews are much easier, and for those I have the following set in .env.production --> SANITY_STUDIO_STAGING_ROOT=https://mynetlifyurl/.netlify/functions/prerender?url=https://myherokuurl

The schema configuration:

fields: [
  {
    name: 'seo',
    type: 'seo-tools',
    fieldset: 'seo',
    options: {
      baseUrl( doc ) {
        const root = process.env.SANITY_STUDIO_STAGING_ROOT;
        // You might need to change based on the url structure of your frontend.
        return root;
      },
      slug( doc ) {
        // You might need to change depending where you have your slugs set up in your documents.
        if( !! doc.slug) {
          return doc.slug.current;
        }
      },
      ...

The serverless function for Netlify:

const puppeteer = require( 'puppeteer' );
exports.handler = async ( event, context ) => {
  const { queryStringParameters: qs } = event;
  const browser = await puppeteer.launch( { headless: true } );
  const page = await browser.newPage();
  await page.goto( qs.url, {
    waitUntil: 'networkidle2',
    timeout: 60000,
  } );
  const doc = await page.content();
  await browser.close();
  return {
    statusCode: 200,
    headers: {
      ['Access-Control-Allow-Origin']: '*',
    },
    body: doc
  };
}
The function fetches the URL, waits until requests are made and executed, then returns the HTML rendered by Gatsby. SEO plugin is then successfully reading through the HTML and providing live feedback. I know this was kind of randomly put together, but hopefully it was clear and helpful to somebody.

Typescript definitions for Portable Text

We are working on making the Portable Text more compliant with typed systems like GraphQL and TypeScript. Meanwhile, this library put together by Balázs Orbán might come in handy in TypeScript projects:

Give block-content-to-react-types a ⭐️ on GitHub!

Built with Sanity

Web app for homeschooling during the pandemic

With a lot of homeschooling and teaching at home these days, there are opportunities to come up with solutions that may make life a bit easier. Hallvord writes

So much teaching and learning have moved online these days, but ever so often the platforms and tools we're trying to use are complicated and confusing, especially for the younger pupils.. I wrote a small project trying to get 1st or 2nd-graders to record small spoken stories to a set of pictures chosen by me. I aimed for a very simple UI: just the slideshow of images and help, back/forward and record/stop buttons. (Swiping for navigating through images works too). The web app hosting service I use had docs on integrating with AWS, which I haven't really set up any project for, so at first I was curious and just started following the docs to put stuff in an Amazon bucket. After less than an hour looking at their SDK docs and writing code I just went why am I doing this? I already know a Sanity-based solution would be so much better...
So it's up and running and some 16 teachers signed up on Facebook to take it for a spin .. I hope I'll stay within the boundaries of the free plan although if the kids record so many snippets it goes beyond it must be considered a success, right?

Hallvord don't need to be worried by the quotas. If you've a project that‘s aimed at making a situation related to COVID-19, we will get you covered.

Join our community and enter the #dugnad channel to learn more

It takes 5 days to build an online TV-station

Andreas Straub shares the new online TV-station that he and his team build in just 5 days. He writes:

In times of Corona it is incredibly important to maintain communication and cultural exchange in the community. The whole thing is of course virtual - in this case online. Therefore I think the idea of the mayor Sebastian Schrempp - to build up an online TV station of the region - is just right. We implemented the website in 5 days! Have a look here.
The techstack is Gatsby with Sanity is hosted on vercel.com. We also implemented the automated publishing of video posts via EasyCron.
The scheduling page
The customized responsive Sanity Studio
Posts by category
Categories with color codes

Archive site for Marie Neurath

An online archive of a physical exhibition of the wonderful work of Marie Neurath, an immigrant to the UK who fled the horrors of WWII and went on to define how science and technology were taught to children through books. Simon describes the Studio as such:

My schema usage is nothing flashy – but screens attached show how I arranged the books, the sections of the main page, and allowed the user control of the complex image blocks.
The frontpage for marieneurath.org
Gallery block in the page builder
Managing the books in Sanity Studio
Ordering of the sections

Hone your dancing skills with AR

David Knape shared this super cool website for dancing:

Just launched a small project with Sanity CMS for some artists and dancers exploring AR and motion-capture technology. Fun stuff. Live AR previews on compatible iOS devices. Interactive 3D viewer for those without. Also includes daily exercise/motion prompts with kids in mind.
The youdancewedance.org frontpage
Mocap Models

Page content

  • Upcoming events
    • Middlesbroughfe Front End meetup on Twitch
    • Online Meetup: Sanity User Group – San Francisco
  • Community Highlights
    • Leaflet plugin
    • Keep up the SEO hygiene with serverless prerendering!
    • Typescript definitions for Portable Text
  • Built with Sanity
    • Web app for homeschooling during the pandemic
    • It takes 5 days to build an online TV-station
    • Archive site for Marie Neurath
    • Hone your dancing skills with AR

Product

Sanity StudioAPIsContent LakeSecurity & 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

DocumentationBlogResource libraryCase Studies
  • 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
  • Next.js blog
  • Next.js personal website
  • Clean Next.js + Sanity app
  • Clean Remix + Sanity app
  • Clean SvelteKit + Sanity app
  • All Templates
  • Agency partners
  • Technology partners
  • Headless CMS 101
  • What is an API CMS
  • Static Sites 101
  • Headless Commerce 101
  • Headless SEO
  • Localization
  • GraphQL vs REST
  • Content as a Service
  • What is a DXP?
  • Typescript 101
  • Ecommerce SEO
  • CMS for enterprise
  • 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 ServicePrivacy PolicyAccessibility Statement

Stay connected

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