Blog
When prompting—ask, don’t tell
Getting the results you want from an LLM is more about collaborating than commanding.
Hello, internet!
I'm Simeon, Principal Educator @ Sanity.io, running content ops for Sanity Learn.
I made a Tailwind CSS Palette Generator that people like.
🇦🇺 in 🇬🇧
Blog
Writing and performing a great talk
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
AI-powered Sanity development
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
Watch Rich text comments on your Next.js blog with Portable TextYouTube
Rich text comments on your Next.js blog with Portable Text
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.
Watch Fixed width element, variable width content with React and Tailwind CSSYouTube
Fixed width element, variable width content with React and Tailwind CSS
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
•
Blog
Running for developers
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)
Blog
Put a box around it
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.
Blog
Conditional class names using DOM attributes as state
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
Blog
Tailwind CSS is basically a standard, start acting like it
The job of a framework is to render HTML so it makes sense to optionally bundle a way to style it with CSS
Controlling cached content in Next.js
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.
Integrated Visual Editing with Next.js
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.
Content-driven web application foundations
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.
Refactoring content for migration
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.
Re-platforming to Sanity
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.
Blog
Mastery is underrated
In any sufficiently crowded market, there is always the opportunity to be the absolute best at your thing.
An opinionated guide to Sanity Studio
Sanity Studio is an incredibly flexible tool with near limitless customisation. Here's how I use it.
•
Editorialized ecommerce experiences
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.
•
Blog
Thoughts on teaching developers
A glimpse into the context through which I create educational content and tutorials.
Implementing Sanity successfully
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.
Watch How to prioritise content over components in a composable eratalk
How to prioritise content over components in a composable era
Future Commerce Finland 2023
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.
Migrating content from WordPress to Sanity
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.
Blog
Query GraphQL in Remix in less than 60 seconds
You might not need a library to query GraphQL in Remix
How to generate massive amounts of demo content for Sanity
It can be useful for testing plugins, front ends, or other integrations to have a Sanity Studio populated with fake content.
•
Watch Prioritise content over componentstalk
Prioritise content over components
Middlesborough Front End
Photo by Eddie Jaoude
Visual Editing with Next.js App Router and Sanity Studio
Setup "Live by Default" fetches and interactive live preview with Presentation in Sanity Studio
•
Create an array input field with selectable templates
Make repetitive content creation tasks a breeze by supplying content creators with buttons to populate complex fields.
•
Create a document form progress component
Summarise form progression by decorating the entire editing form for a document with a component loaded at the root level.
•
Create richer array item previews
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.
•
Create interactive array items for featured elements
Save time going in-and-out of modals by moving some light interactivity to array items.
•
Create a time duration object field
Delight your content creators with intelligent inputs for more complex data structures
•
Create a survey rating number field input
Give content creators quick access to valid values by replacing the default number field input with a list of options.
•
Create a visual string selector field input
Go beyond a plain radio list of inputs by giving authors more contextually useful buttons to select values from.
•
Create a “coupon generator” string field input
Take the guesswork out of creating fields with correct values and automate content creation for authors.
•
Studio excellence
Go beyond the default configuration. Learn what separates an average Sanity Studio from a fully-configured, content creation powerhouse that authors will love.
How to implement Multi-tenancy with Sanity
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.
•
Blog
Dynamic social sharing images from Remix with Satori
Creating individual meta images can be time-consuming work. Fortunately, creating on-brand and dynamic images for link previews has never been easier.
Blog
Add Vercel Analytics to a Remix Application
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.
Blog
Bridging the developer-author gap
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.
Blog
In defence of over-engineering your blog
I've rebuilt this blog with the same design almost half a dozen times. Here's what I learned doing it again.
talk
Simeon Griggs: Sanity x Puma
Next.js Conf 2022
Between GROQ and a hard place
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.
Day One with Sanity Studio
Get a top-level understanding of the Sanity Studio configuration API to embed a fully configured and near-infinitely customisable content editing interface into any React application. Then write a GROQ query and present data in a front-end.
•
Blog
Prioritise content over components
Visually, components are unique, flexible units to compose complete layouts. For content, they can trap reusable data into single-use decorations.
•
Blog
Type-safe GROQ Queries for Sanity Data with Zod
We don’t have to sacrifice the awesomeness of GROQ for the safety of TypeScript. With Zod, we can have both.
Watch Localisation in the real world (lightning edition)talk
Localisation in the real world (lightning edition)
React Summit 2022
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.
Blog
Understanding reduce() as a combination of map() and filter()
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.
Creating a Parent/Child Taxonomy
Create common taxonomy schemas like Categories and Tags with parent/child relationships
•
Blog
How to ask for things with Loom
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.
Watch Using the Tailwind CSS 10-colour Palette GeneratorYouTube
Using the Tailwind CSS 10-colour Palette Generator
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.
Blog
Using the Tailwind CSS Palette Generator and API
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.
Blog
There's never been a better time to build websites
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.
How to build a Remix website with Sanity and Visual Editing
Combine Sanity's blazing-fast CDN with Remix's cached at the edge pages.
•
Creating a custom input to display and save third party data
Sometimes the content you need to reference lives outside of Sanity
•
talk
How to Localise & Personalize Content with Sanity.io and Next.js
React Advanced 2021
How to use incoming country headers on an incoming request to personalise a GROQ query and display localised content to visitors.
Visual Editing with Next.js Pages Router and Sanity Studio
Setup interactive live preview with Presentation in a Next.js pages router application
•
ProseableText: Combine Tailwind CSS Typography with Portable Text
Get the best of both worlds. Tailwind-styled typography and Portable Text's markup-and-components structure.
•
Blog
Patterns for Next.js, Sanity.io, Catch-all Routes and Slugs
Hard coding document slugs in Sanity.io with validation rules can save you a lot of double-handling on both front and back end.
Blog
Recipe websites, data modelling and user experience
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.
Blog
Backup Sanity to AWS S3
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.
Blog
The guide to useEffect() I wish I had
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.
Blog
Fun with Tailwind CSS Plugins
Publishing extensions is so much easier than copy/pasting project-to-project.
Blog
Gutenberg is the end of custom WordPress websites
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.
Blog
Create a Page Builder in Sanity for Gatsby
Setting up the most popular content editing pattern for the component-based nature of front end frameworks and modern website design.
•
Blog
Roll your own Gatsby live preview for Sanity
Gatsby Cloud-like live previewing for your Sanity website, but low cost with unlimited edits.