Building an AI Markdown Formatter for Web3 (and the Unexpected Problems I Faced)

Idowu olamide — Sat, 14 Mar 2026 06:07:35 +0000

If you’ve ever tried to write a blog post with a complex layout—like side-by-side bilingual columns, perfectly aligned images, and custom dividers—you know that standard Markdown eventually hits a wall.

Now, imagine trying to do that for a decentralized blockchain where your post will be rendered by completely different frontends, each with its own CSS rules and security sanitizers.

That is the reality for content creators on the Hive Blockchain. Writers spend hours wrestling with raw HTML just to make their articles look like professional magazines.

I decided this process was broken. So, I built Hive Studio: an intelligent, AI-powered formatting tool that takes raw, messy text and instantly restructures it into beautiful, cross-frontend compatible HTML.

Here is the story of how I built it, the unexpected technical hurdles of parsing Markdown for Web3, and how I forced an AI to behave like a strict Layout Engine instead of a creative writer.

🐝 Understanding the Hive Ecosystem

For those unfamiliar, Hive is a decentralized Web3 blogging platform. But unlike Medium or Hashnode, Hive isn't a single website. It is a blockchain.

Different apps—like PeakD and Ecency—act as "frontends" that read the same blockchain data but render the UI using their own unique codebases.

This creates a massive headache for developers and writers: Compatibility.
If you use modern CSS (like Flexbox or Grid) inline, these frontends will likely strip it out for security reasons. If your formatting works on PeakD, it might look entirely broken on Ecency.

💡 The Idea Behind Hive Studio

The goal was simple: Let writers write, and let the app handle the code.

Instead of forcing users to memorize complex HTML tags to create a dual-language post, I wanted a workflow that looked like this:

User pastes a wall of unformatted text.
User selects a visual template (e.g., "Magazine Layout" or "Crypto Analyst").
User clicks the "Magic Brush ✨".
The AI analyzes the text, injects the correct HTML structure, adds relevant divider images, and outputs perfect code ready for publishing.

Before:

My trip to the beach.
It was very sunny.
Mi viaje a la playa.
Hacía mucho sol.

After (Hive Studio Output):

<div class="magazine-template"><center><h2>✨ My Midnight Rhythms ✨</h2></center>
<blockquote><center><p class="text-center text-muted">This young man's unexpected awakening and urgent routine of the night</p></center>
</blockquote>

<center><p class="lead">I was supposed to turn off the generator by 12pm but accidentally slept off. It's 12:40am, and I quickly rushed out to turn it off. I couldn't sleep after that event, so I decided to explore the midnight letters community.</p></center>
<hr>
<div class="pull-left" width="35%"> <img src="https://kgtwiouewpybiboywane.supabase.co/storage/v1/object/public/user-uploads/justola1/1771354747624.jpeg" /> </div>
<p>So for me, midnight is the appropriate time for introspection, a bit of social media, and a few bullet chess games. Ever since I was a young boy, I had an attitude of reflecting on how I spent my day, and the best time I felt was right to do that was midnight, when everywhere is quiet and I can properly listen to my thoughts.</p><br clear="all">
<hr>

🧗 The Hardest Technical Problems

Building the UI in React was the easy part. The real challenge was building a parsing engine and an AI system that respected the strict rules of Hive frontends.

A. The "Modern CSS" Trap (Hive Compatibility)

My initial instinct was to use modern inline styles to create layouts. For example, to prevent floating images from breaking the text flow, I injected style="overflow: hidden; clear: both;".

The result? The Hive frontends immediately stripped the style attribute. The layout collapsed.

The Solution: I had to become a frontend archaeologist. I inspected the DOM of both PeakD and Ecency and discovered they rely heavily on Bootstrap 4 utility classes. I had to abandon custom CSS and build my template engine entirely around legacy classes like pull-left, pull-right, text-justify, and the classic <br clear="all"> to guarantee 100% compatibility across all platforms.

B. Markdown Rendering Nightmares

When you mix HTML and Markdown, parsers get very confused.
For instance, users love centering images. But if you write this:
<center>![My Image](https://link.com/img.png)</center>

Standard Markdown parsers often treat the inside as plain text because it's wrapped in a block-level HTML tag. Furthermore, I noticed that **bold** syntax would sporadically fail inside certain nested div structures on Hive.

The Fix: I wrote a pre-processing Regex step in JavaScript to catch Markdown images inside <center> tags and strictly convert them to HTML <img> tags before feeding them to remark. I also instructed the AI to exclusively use <strong> and <em> instead of asterisks.

C. Taming the AI (The "Content Integrity" Protocol)

This was the hardest part. I integrated Google's Gemini 2.5 Flash Lite to act as the "Magic Brush".

At first, I told the AI: "Format this chess tournament post."
Instead of just adding HTML tags, the AI decided to write a fictional summary of a chess match. Users complained that the AI was changing their personal stories and grammar.

The Solution: I had to treat the AI like a stubborn layout engine. I built a dynamic prompt architecture in my backend that injects specific formatting rules based on the user's chosen template, wrapped in a strict "Supreme Law":

// Inside my Supabase Edge Function (Deno)
const prompt = `
  You are a Layout Engine. Your job is STRUCTURE, not writing.

  --- 🛡️ CONTENT INTEGRITY PROTOCOL (SUPREME LAW) ---
  1. DO NOT FIX GRAMMAR. Keep the text exactly as provided.
  2. DO NOT SUMMARIZE or add introductory fluff.
  3. PERMITTED EXTRACTION: You may copy headers to build a Table of Contents, or move data into a Markdown Table, but the WORDS MUST NOT CHANGE.

  --- SPECIFIC TEMPLATE RULES (${activeTemplate.name}) ---
  ${activeTemplate.ai_prompt_from_database}
`;

By storing the ai_prompt in my database, I could dynamically instruct the AI to create "Zig-Zag" image layouts for Magazine templates, or "Data Tables" for Crypto templates, all without hardcoding it into the frontend.

🛠️ The Tech Stack

To make this secure and highly performant, I utilized a modern T3-adjacent stack:

Frontend: React (Vite) + Tailwind CSS v4.
UI/UX: Custom "Creator Terminal" dark mode aesthetic using Lucide React icons.
Backend & Auth: Supabase (PostgreSQL) to store dynamic template rules and custom user gallery uploads.
AI Integration: Google Gemini API, securely hidden inside Supabase Edge Functions (Deno) with IP-based rate limiting to prevent abuse.
Blockchain: @hiveio/keychain-sdk for secure, zero-fee direct publishing to the blockchain.
Hosting: Vercel.

🎥 The Result

The final product allows a user to paste raw text, automatically style it with AI, manage their image assets, and publish directly to the blockchain without ever touching a line of code.

// Detect dark theme var iframe = document.getElementById('tweet-2032226106158297576-741'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2032226106158297576&theme=dark" }

📺 Watch the Demo

You can watch a full walkthrough of how Hive Studio works on YouTube:

YouTube Video:

📝 Read the Original Hive Post

You can read the original article introducing Hive Studio here:

Ecency Post:

ecency.com

🧵 Developer Thread

I also shared a developer thread explaining some of the technical challenges here:

X Thread:

// Detect dark theme var iframe = document.getElementById('tweet-2032226086981902351-507'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2032226086981902351&theme=dark" }

🧠 Lessons Learned

Don't fight the ecosystem: If a platform uses Bootstrap 4, use Bootstrap 4. Forcing modern CSS into legacy sanitizers is a losing battle.
AI needs boundaries: LLMs want to be creative. If you want them to act as deterministic parsers or formatters, you must use heavily constrained "Negative Prompts" (telling them exactly what not to do).
Security first: Moving AI calls to serverless Edge Functions isn't just about hiding API keys; it allows you to implement critical rate-limiting before a malicious script drains your free-tier quota.

🚀 Future Improvements

Hive Studio is already live, but I'm looking forward to adding:

Multiple Drafts: A full database-backed draft management system.
Custom Template Creator: Allowing users to submit their own CSS layouts to the public gallery.
More Web3 Integrations: Auto-fetching 3Speak video thumbnails via the Hive API (already partially implemented!).

👋 Let's Connect

You can try the live application here:

https://hivestudio.vercel.app

Check out the source code and contribute:

https://github.com/justolaa/Hive-Studio

If you're interested in Web3, Markdown tooling, or developer productivity tools, I’d love to hear your thoughts in the comments.

I am a Full-Stack React & AI Developer passionate about building intelligent interfaces and solving complex frontend challenges. If your team is looking to integrate AI or Web3 into your products, let's talk!

DEV Community: Idowu olamide