How I’m Building a Permanent Blockchain Archive - Part 1

#webdev #blockchain #react #solidity

Rendering Immutable SVG NFTs

“If the blockchain survives, so will these messages.”

I’m building a dApp called Immutable Notes — a decentralized archive where people can mint anonymous messages, thoughts, or notes as NFTs that will live on-chain forever.

Whether it’s a memory, a thought you can’t afford to lose, or even just a timestamped idea — this project aims to preserve what matters most, permanently, without relying on platforms, servers, or external storage.

To do that, I had to solve one key problem:

How do you create NFTs that don’t rely on IPFS or off-chain storage?
Most NFTs today depend on IPFS or Arweave to store the actual media or metadata. That works — until:

Someone unpins the file
Gateways go offline
Metadata links rot silently

That breaks the very idea of “immutability.”

Instead, I’m storing everything on-chain using SVG, a format that’s:

Lightweight
Browser-native
Human-readable
Fully expressible in plain text

SVG can be stored directly in the smart contract and displayed without depending on any external service.

If Ethereum lives, the message lives.

The Solution: SVG
SVG (Scalable Vector Graphics) is ideal for this use case:

It’s just text (XML) — so it fits naturally in smart contracts
It’s visual — so each note becomes a piece of generative art
It supports styling — colors, fonts, layout
It renders everywhere — no plugins, no IPFS dependency

Each Immutable Note is minted as a fully self-contained SVG NFT: the layout, colors, timestamp, and user message are all stored directly inside the blockchain.

Example: A component for editing the SVG note

This is base64-encoded and embedded into the smart contract’s tokenURI() return — making the NFT truly on-chain and self-reliant.

How It Works: The SVG Editor Component
To let users create and preview their NFTs before minting, I built a React component called NftSvgEditor. It handles everything from text layout to real-time rendering.

Here’s what it does:

1 - Text Wrapping with Pixel Precision
SVG doesn’t support native word wrapping, so I wrote a custom function called measureSegments() that uses a hidden canvas to split text into properly wrapped lines:

const measure = (str: string) => context.measureText(str).width;

const splitByWidth = (line: string) => {
  // Binary search to find the longest substring that fits
  while (start < line.length) {
      let low = start;
      let high = line.length;

      while (low < high) {
        const mid = Math.floor((low + high + 1) / 2);
        const slice = line.slice(start, mid);
        if (measure(slice) <= maxWidth) {
          low = mid;
        } else {
          high = mid - 1;
        }
      }

      const segment = line.slice(start, low);
      result.push(segment || '\u00A0');
      start = low;
    }
}

This ensures the text never overflows the boundaries of the SVG.

2 - Real-Time SVG Rendering
The component overlays a transparent <textarea> over the SVG so users can type naturally, while the text is rendered as elements below:

<text x="20" y={60} fontSize="18px">
  {segments.map((segment, i) => (
    <tspan key={i} x="20" dy={i === 0 ? '0' : '1.2em'}>
      {segment}
    </tspan>
  ))}
</text>

It also adds:

A “To:” field for an optional recipient label
A timestamp that updates in real time
A background color chosen by the user

All of this lives inside a fixed-size SVG container (320x360px) designed for on-chain rendering consistency.

3 - Live Preview = Trust
Users can see exactly what they’re minting before they hit the blockchain. No surprises, no broken layouts. What you see is what you mint — forever.

Why This Matters
We talk a lot about “immutability” in blockchain — but most NFTs aren’t truly immutable. They rely on links to files stored off-chain.

By contrast, Immutable Notes:

Stores the entire NFT in the contract
Has no reliance on IPFS or Arweave
Can’t be changed, erased, or hidden

This is true permanence — the kind worth using when the message matters.

Open Source & In Progress
You can view the source code (including the NftSvgEditor component) here:

🔗 GitHub: github.com/lucas-costa/immutable-notes

The project is still in early development — I’d love feedback, ideas, and even pull requests from other devs interested in on-chain data, SVG rendering, or Web3 UX.

What’s Next (Part 2 Preview)
In Part 2, I’ll walk through how I’m using OpenAI’s Moderation API to prevent harmful or NSFW content from ever making it on-chain — and how I enforce that on-chain using hash validation to prevent bypassing the moderation step.

Stay tuned — and follow the journey as I continue building Immutable Notes in public.

Want to Talk?