Example Front-end

Sanity comes with a Content Studio and a data backend. Front ends, however, you have to bring yourself. An ordinary website? A native mobile app? A PDF-factory? How you decide do use your data is completely up to you. But, to get you started, here's an HTML-file with some plain old javascript. Save it anywhere and you should be able to run it. You can also try the same example on JSFiddle - just modify the project ID and dataset name.

<!doctype html>
  <meta charset="utf-8">
  <title>Sanity MovieDB frontend demo</title>
  <link rel="stylesheet" href="">
  .movies {max-width: 800px; margin: 0 auto;}
  .poster {width: 80px; height: 120px;}
  .error {background: red; color: #fff; position: absolute; top: 0; bottom: 0; margin: 0; width: 100%;}

<table class="pure-table pure-table-bordered movies">

  <tbody id="movies">
      <td colspan="4">Loading...</td>

<script src=""></script>
// If you drop the UMD bundle into a page, we attach to `window` as `SanityClient`.
// In node, or when using a bundler, you'd use `require('@sanity/client')`
var client = window.SanityClient({
  // Find your project ID and dataset in `sanity.json` in your studio project
  projectId: 'zp7mbokg',
  dataset: 'production'

// Fetch 50 documents of type `movie`, and select only the fields we need
var query = `
  *[_type == "movie"]{
    "director": crewMembers[job == "Director"][0].person->name,
    "poster": poster.asset->url


// What follows isn't related to Sanity - just no-framework rendering logic
// Obviously, use whatever framework makes you happy!
var container = document.querySelector('#movies')

function renderMovies(movies) {
  while (container.firstChild) {
  } {

function createPoster(poster) {
  var img = createElement('img')
  img.className = 'poster'
  img.src = poster + '?h=240'
  return img

function createMovieRow(movie) {
  return createElement('tr', [
    createElement('td', [createPoster(movie.posterUrl)]),
    createElement('td', [text(movie.title)]),
    createElement('td', [text(movie.releaseDate.utc.substr(0, 4))]),
    createElement('td', [text(movie.director || 'Unknown')])

function createElement(tag, childNodes) {
  var el = document.createElement(tag)
  var children = childNodes || []
  children.forEach(function (child) {
  return el

function renderError(err) {
  const errorBox = createElement('pre', [text(err.message)])
  errorBox.className = 'error'


function text(str) {
  return document.createTextNode(str)


Previous: Front-EndsNext: JS Front-end