Suspense's problematic prop
Use suspense boundaries to wrap data—not layouts—to avoid its biggest problem.
I'm Simeon, Principal Educator @ Sanity.io, running content ops for Sanity Learn. I made a Tailwind CSS Palette Generator that people like. I give talks. I use stuff. 🇦🇺 in 🇬🇧
Use suspense boundaries to wrap data—not layouts—to avoid its biggest problem.
Components hidden by Activity will maintain their state while also unmounting their effects and continue to preload suspenseful data—here's what makes that useful.
Sanity Functions can be configured to format code blocks in your content whether they're authored from inside Sanity Studio or an API request. It's the safe and consistent way to ensure code consistency in all your documents. Get this recipe: https://www.sanity.io/recipes/format-code-blocks-with-prettier-867f76f3 See this and more Sanity Functions Recipes at https://www.sanity.io/recipes
@mattpocockuk joins @simeonGriggs to talk about cutting review cycles and embracing improvisation to create more effective developer content. We explore cohort-based learning, AI tooling, and how to stay trusted in a fast-moving industry. Matt Pocock on X https://x.com/mattpocockuk AI Hero https://x.com/mattpocockuk Simeon Griggs on X https://x.com/simeonGriggs 00:00 Introduction 01:08 Building a custom CMS 04:10 Collaboration on course content 06:12 Reducing review cycles 08:48 Gauging content performance 11:17 Choosing what to teach 13:00 Trust in the AI space 15:21 Cohort-based AI course 17:52 Value of feedback 20:13 Writing for LLMs 23:00 Structuring content as graphs 25:00 Personal brand and identity 29:06 Vocal training for creators 31:43 Where to find Matt
Building fast, real-time content authoring applications has never been simpler. Create a feedback processing application with user assignment, AI analysis and more.
The Sanity App SDK is a headless library of hooks for real-time, live-by-default content fetching and mutations. Here's a first look! Welcome to an ambitious future that is less about prying apart Sanity Studio code and instead about building entirely new content experiences, faster than ever. Find out more at - https://www.sanity.io/blog/build-your-own-cms-with-sanity-app-sdk - https://www.sanity.io/app-sdk 0:00 Feedback app 0:54 App.tsx 1:51 useDocuments 3:04 Document Handles 3:41 useDocumentProjection 4:34 useDocument 5:00 useEditDocument 5:51 useApplyDocumentActions 6:31 Studio & App SDK
Getting the results you want from an LLM is more about collaborating than commanding.
The best conference talks are written (without sounding scripted) and performed (while staying authentic).
Learn how anyone can use an AI-powered code editor to build a Sanity Studio with best-practice code and the front end of your choice. Complete this course on Sanity Learn for a shareable certificate https://www.sanity.io/learn/course/code-with-ai Download Cursor https://www.cursor.com/ Download Superwhisper https://superwhisper.com/ 00:00 Introduction 01:09 What makes a good prompt? 03:47 Cursor and other code editors 06:06 Prompting with Ask and Agent 10:44 Speaking prompts 11:45 Rules for enforcing best practices 16:05 Creating placeholder content 18:03 Prompting any front end 24:51 Closing thoughts
With its all-code configuration, AI tools make Sanity a perfect choice as a content backend, and developers of varying levels of experience—including those with none at all—greatly benefit from AI tooling. Do it the right way for the best results, take on more ambitious projects, lower the barrier to entry and create happier content authors.
The simplified example for useOptimistic in the React documentation is problematic in three ways. To better understand how the hook works, here’s how I'd move the demo into a Next.js 15 app, convert it to TypeScript, style it with Tailwind CSS, fix the UX problems, and store the submitted content in the Sanity Content Lake. 00:00 React docs example walkthrough 01:39 Create Next.js app 02:26 Convert example to TypeScript 06:55 Style with Tailwind CSS 08:42 Fix 1: Input maintains value 10:38 Fix 2: Filter out duplicate keys 16:01 Fix 3: Write messages to Sanity 16:37 Create Sanity Studio app 17:26 Create schema types 19:37 TypeGen, next-sanity, GROQ and Sanity Client 23:53 Dynamic routes for fetching Sanity content 27:21 Swap local state for Sanity Content 28:50 Write to Sanity from Next.js 34:10 Watching real-time mutations
Write "comments" as Sanity documents from a Next.js 15 application into the Content Lake. Using the Tailwind UI Radiant Blog template and writing "optimistic" updates with React 19. This video shows writing text comments first and then configuring the Portable Text Editor on the front end to write rich text and block content to the Content Lake in Sanity. - Portable Text Editor: https://www.portabletext.org/ - Tailwind UI Radiant Blog: https://tailwindui.com/templates/radiant - useOptimistic: https://react.dev/reference/react/useOptimistic#optimistically-updating-with-forms 00:00 What we'll build 00:29 Introducing the Portable Text Editor 02:22 The stack we're using 03:15 Creating plain-text comments 11:17 Setup the Portable Text Editor 17:37 Updating the Form Action 20:26 Rendering Portable Text 22:05 The final product
I played the role of advisor on behalf of Sanity as the sponsor for this episode of Jason Lengstorf's Web Dev Challenge series.
A quick demo of a component I created called FixedWidthConditional to make an element hold the width of its longest child, while switching the visibility. Similar to @WesBos's method shown here, but in React and Tailwind CSS https://www.youtube.com/watch?v=8327_1PINWI Blog post explaining this method of styling with Tailwind CSS https://www.simeongriggs.dev/tailwindcss-conditional-class-names-the-right-way
If you've got the best intentions to make running part of your life, here's everything I absorbed to go from 0-100 (miles)
Letting people know what you have done for them is so much more impressive than how you did it.
A lightning version covering the history of rich text editing all the way through to structuring content in modern applications.
I wrote, produced and appeared in this talk about building applications that don't need the refresh button to render real-time updates at a massive scale.
Style elements based on the state of their DOM attributes—instead of template logic—for more easily debuggable styles.
Why it's best to use arrays over single references in your Sanity Studio schema types. Your content model might not need it now, but you're going to need an array eventually. Trust me, and your future self will thank you! Read the Opinionated Guide to Sanity Studio: https://www.sanity.io/guides/an-opinionated-guide-to-sanity-studio 00:00 Introduction 00:45 Reference Use Case 01:28 Schema Configuration 02:19 Validation Rules 03:21 GROQ Tips 05:06 Conclusion
A string field with predefined values can often be a far better choice for the future of your Sanity project than a single true/false switch. Learn from my real-life examples and see if you agree or have thoughts to share! 00:00 Introduction 00:44 Avoiding Booleans 01:38 Live Example 05:04 Boolean Issues 07:03 String Solution 10:14 Final Thoughts 13:24 Conclusion Read my opinionated guide to Sanity Studio: https://www.sanity.io/guides/an-opinionated-guide-to-sanity-studio
The job of a framework is to render HTML so it makes sense to optionally bundle a way to style it with CSS
Creating a high performance web application for fast loading depends on caching. Learn how to implement a caching strategy you can understand, debug and depend on.
The ultimate upgrade for content authors is to have absolute confidence in the impact of their work before they press publish – as well as the tools to rapidly find and update even the most minor pieces of content.
Combine Sanity and Next.js and deploy to Vercel via GitHub to get the fundamentals right. Powering a fast and collaborative development and content editing experience.
No matter where your content is, Sanity provides options to ensure its smooth transfer to the Content Lake. These are general strategies for developers migrating content.
Learn how to assemble the right team, preempt pitfalls, and move your legacy content to a modern, fast, and structured content platform to take the stress and risk out of even the most ambitious re-platforming project.
In any sufficiently crowded market, there is always the opportunity to be the absolute best at your thing.
Sanity Studio is an incredibly flexible tool with near limitless customisation. Here's how I use it.
A catalogue of products is only a small part of the story. Empower content creators to embellish product data with rich product display pages and dynamic collection filters that tell a complete picture of your offering.
A glimpse into the context through which I create educational content and tutorials.
Lay the perfect foundation for your team's first dip in the Content Lake. Assemble your team of subject matter experts and draw up plans to uncover your project's content model.
Components-first thinking can trap content — but it doesn't have to be that way. Structured content can be composable and reusable, delivering more personalised experiences. In his speaker session at Future Commerce Finland, Simeon details how to embrace content-first flexibility and shift your thinking from components to content in the composable era.
Compose a powerful, reusable migration script to convert live data into Studio-ready structured content with references and assets. This module focuses on WordPress' REST API but could be adapted to any data source.
You might not need a library to query GraphQL in Remix
It can be useful for testing plugins, front ends, or other integrations to have a Sanity Studio populated with fake content.
Setup "Live by Default" fetches and interactive live preview with Presentation in Sanity Studio
Make repetitive content creation tasks a breeze by supplying content creators with buttons to populate complex fields.
Summarise form progression by decorating the entire editing form for a document with a component loaded at the root level.
Object types use a preview property to display contextual information about an item when they are inside of an array; customizing the preview component can make them even more useful for content creators.
Save time going in-and-out of modals by moving some light interactivity to array items.
Delight your content creators with intelligent inputs for more complex data structures
Give content creators quick access to valid values by replacing the default number field input with a list of options.
Go beyond a plain radio list of inputs by giving authors more contextually useful buttons to select values from.
Take the guesswork out of creating fields with correct values and automate content creation for authors.
Go beyond the default configuration. Learn what separates an average Sanity Studio from a fully-configured, content creation powerhouse that authors will love.
In this guide, you’ll see how Sanity separates organizations, projects, datasets, and members by working through a hypothetical example of a growing company that can expand its content model as they grow – without needing a complete overhaul.
Creating individual meta images can be time-consuming work. Fortunately, creating on-brand and dynamic images for link previews has never been easier.
Vercel offers simple, privacy-focused analytics and web vitals data. These can be instantly set up on Next.js and other frameworks. It's a little extra work for your Remix app, but worth it.
In a content-editable website project, the people involved are two separate and yet equally important groups. The developers who build websites, and the authors that populate them with content. These are their stories.
I've rebuilt this blog with the same design almost half a dozen times. Here's what I learned doing it again.
Go beyond writing data queries – filter, add functions, reshape and transform the responses. Get familiar with GROQ, the query language for Sanity data, webhooks and roles.
Get a top-level understanding of the entire Sanity Content Operating System while building out a multi-application monorepo. With callouts to take other course material to go deeper.
Visually, components are unique, flexible units to compose complete layouts. For content, they can trap reusable data into single-use decorations.
We don’t have to sacrifice the awesomeness of GROQ for the safety of TypeScript. With Zod, we can have both.
i18n isn't easy, but with careful planning of your content model I'll show you how to structure the setup, authoring, and querying of localized content. Covering whole-or-part translated documents, the difference between market and language-specific content, ways to author that in a CMS like Sanity, and ways to query for it on frontends like Next.js and Remix.
i18n isn't easy, but with careful planning of your content model I'll show you how to structure the setup, authoring, and querying of localized content. Covering whole-or-part translated documents, the difference between market and language-specific content, ways to author that in a CMS like Sanity, and ways to query for it on frontends like Next.js and Remix.
It can be tough to identify use cases for something like reduce() until you’re already comfortable using it. Consider this a gentle entry point on your path to advanced use of the Swiss Army Knife of Array Methods.
Create common taxonomy schemas like Categories and Tags with parent/child relationships
Almost all forms of communication are an "ask" of some kind. Even if you’re not asking for some "thing". At a minimum you're asking the other party for their time.
Years ago you could hit "publish" on your blog post and it would be instantly available online. For a while the developer community took a detour to SSG requiring a whole rebuild of the site to fix a typo. Remix is bringing the fast iteration back.
Try it out! https://tailwind.simeongriggs.dev Read the blog: https://www.simeongriggs.dev/using-the-tailwind-css-palette-generator-and-api A walkthrough of why I created this Palette Generator and a basic guide on how to use it.
Creating hand-tooled 10-color Palettes can be tough. Get a head start by rapidly generating a full suite of Swatches from a single base value.
We're closing in on the end of 2021 and I'm as excited now about building websites as I've been in ~25 years.
Combine Sanity's blazing-fast CDN with Remix's cached at the edge pages.
Sometimes the content you need to reference lives outside of Sanity
How to use incoming country headers on an incoming request to personalise a GROQ query and display localised content to visitors.
Setup interactive live preview with Presentation in a Next.js pages router application
Get the best of both worlds. Tailwind-styled typography and Portable Text's markup-and-components structure.
Hard coding document slugs in Sanity.io with validation rules can save you a lot of double-handling on both front and back end.
To a developer, recipes represent such a complex and delicious content model. So why do so many recipe websites leave a bad taste? Let's explore cooking up a more ideal version.
Headless CMS's are refreshingly "set and forget". But if the Risk Management Department needs to be satiated by having your own backup solution, it's easy to do.
If you're relatively new to React, Hooks aren't new, they simply exist. And to understand the useEffect() hook is to almost entirely understand React Components.
Publishing extensions is so much easier than copy/pasting project-to-project.
For the first time ever, WordPress has strong opinions about how your website is designed – making it a bad choice as a generic content management system.
Setting up the most popular content editing pattern for the component-based nature of front end frameworks and modern website design.
Gatsby Cloud-like live previewing for your Sanity website, but low cost with unlimited edits.