15 October 2025
[Tech Stuff] In Between: Where Blog Meets Magazine
Yeonju
Have You Heard About WYSIWYG?
WYSIWYG stands for "What You See Is What You Get." It's basically an editor style where what you see while editing content is (almost) exactly what appears after publishing — like MS Word and Google Docs. You make text bold, italic, add links, and all of it just shows up as-is in HTML.
If all you want is to publish a few articles with text and some photos like most blogging platforms, there are plenty of tools out there: Wordpress, Ghost, and many others. For simple and straightforward websites, traditional CMS solutions can still be a fast and economical choice.
But what if you need a different structure?
What if you want a two-column layout, or a more sophisticated interview format? In that case, you need a system that can adapt to the structure and nature of your content, not just display text and images stacked vertically.
To Move Beyond “Text and Images”
I didn’t want to stay stuck with simple, rigid, rectangular formats — I wanted people to have the same kind of fun, layered experience they get from flipping through a beautifully designed print magazine, but on the web. That desire naturally led me to the concept of a headless CMS, which allows you to separate "content" from "presentation" and gives you the freedom to experiment with how it’s shown.
Let's say I want to post a series of cooking articles. But I don't want them to just be paragraphs of text with a couple of images with caption. I'd want something more like a magazine spread:
① Ingredient photos laid out in a nice four-column grid
② A numbered list of step-by-step instructions
③ A cooking video embedded right after the instructions.
④ A photo slide of the cooking process, each with its own caption.
This isn't just "text & images" anymore. It's a set of functional components. And the article becomes a composition of these components.
WYSIWYG Isn’t Enough
But the moment you try something like that in a WYSIWYG editor, you hit a wall. WHY?
WYSIWYG editors are made for editing documents, not for building content components. There’s no built-in way to define structures like a slideshow or a video-text combo without plugins or developer help. So your content often stays stuck at the “text and images” level. And if you really want something in different formats, you’ll likely end up writing HTML and CSS by hand for each page.
Portable Text, created by Sanity Team, is one of the best solutions out there for that. I first came across Sanity in this YouTube video while exploring the headless CMS world. (That’s also how I discovered the design studio, Self Aware, which I highly recommend checking out if you're into web design.)
Portable Text Changes Everything
Portable Text doesn’t spit out HTML. Instead, it stores everything as structured JSON data. Then, when it’s time to show it on a site, you can customize how it looks by turning that JSON into HTML with your own React components.
Sure, it takes a bit of work (Sanity is, after all, a developer-focused CMS), but the trade-off is complete creative freedom.
For example, I can define an “image group” block with an image, caption and extra details, insert it right inside the editor, and reuse that component anywhere. Other platforms like Prismic also support customized content blocks, but they're not directly editable within the text editor. Portable Text, on the other hand, lets you manage everything in a single text flow.
If you want structured, component-level content embedded directly in your writing, Portable Text is the way to go.
The Power of Sanity + Next.js
This graph is from Best Headless CMS Software. Sanity is ranked #1 out of 85 CMSes on G2. Sanity gives you even more than just Portable Text, like the ability to define complex relationships between pieces of data, deliver structured content seamlessly across multiple platforms, and collaborate in real time.
And when you combine it with Next.js, you get another huge benefit: server-side rendering (SSR), which is perfect for blogs. Since the HTML is fully rendered before it’s sent to the browser, search engines, social media crawlers, and other services can read it right away, which means much better SEO. We definitely wanted people to find us, so that’s why we chose the Sanity + Next.js combo.
In-Between a Blog and a Magazine
I wanted this space to feel less like a raw, private journal and more like something polished, refined and worth publishing. At the same time, I didn’t want the weight or effort of crafting a full-on magazine, page by page. It still needs to look visually pleasing even with nothing more than my ordinary iPhone photos. That's why I've been so obsessed with templates and layout: scale, rhythm, and arrangement can turn even the most ordinary fragments of daily life into something intentional.
To make that possible, I needed two things: a content system flexible enough to structure whatever I imagine, and a playground where I could freely experiment with visuals.