How-To: Create & Link an Entry

This guide shows how to make a tiny HTML or PNG asset, convert it to a Data URI, store it in the contract as an entry, and then link it to your NFT.

  1. Create your piece:
    • HTML (pure HTML/CSS/JS, no external URLs).
    • PNG (keep it small — icons/sprites work great).
  2. Tiny-fy / compress:
    • Minify HTML (remove whitespace; keep classes short).
    • Compress PNG using any PNG optimizer.
  3. Convert to Data URI:
    • Use your preferred encoder (e.g., base64 tools) and choose the Data URI option.
    • For HTML use: data:text/html;base64,<yourBase64>
    • For PNG use: data:image/png;base64,<yourBase64>
  4. Save in the contract:
    • Store the Data URI in your contract’s entries.
    • Go to mint. Connect your wallet. Click on your token. Open Create.
    • Paste the code and enjoy the preview. Press create
  5. Link it to your token to an existing entry:
    • Go to mint. Connect your wallet. Choose your token. Open Link. Choose from the entries

Example A: green line PNG (Data URI)

Use this directly as a tiny preview entry:

1x1 greendata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAKAAQMAAAA2A1tgAAAABlBMVEUAAAAA/wA2Q0S9AAAAU0lEQVR4Xu3MIQEAAAgDMPqnejNogEAhtgCrzwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACA3kUoFB4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAAt388Wn6vLBcAAAAASUVORK5CYII=

Example B: Animated HTML “Green Pixel”

A single green pixel gliding across the screen.

View HTML source
<!doctype html><meta charset=utf-8><style>
html,body{margin:0;background:#000}
.px{width:2px;height:2px;background:#0f0;position:fixed;top:40vh;left:0;animation:m 2s linear infinite}
@keyframes m{0%{left:0}50%{left:calc(100vw - 2px)}100%{left:0}}
</style><div class=px></div>

Data URI (base64) version of the HTML:

data:text/html;base64,[encoded-after-hydration]

Example C: Teleporting Painter (Data URI)

The tiny painter that crawls horizontally, teleports on edges, and flips direction with a jump.

data:text/html;base64,ZGF0YTp0ZXh0L2h0bWwsPCFkb2N0eXBlIGh0bWw+PG1ldGEgY2hhcnNldD11dGYtOD48c3R5bGU+aHRtbCxib2R5e21hcmdpbjowO2JhY2tncm91bmQ6IzAwMDtvdmVyZmxvdzpoaWRkZW59Y2FudmFze2Rpc3BsYXk6YmxvY2t9PC9zdHlsZT48Y2FudmFzIGlkPWM+PC9jYW52YXM+PHNjcmlwdD5jb25zdCBjPWRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJjIiksZz1jLmdldENvbnRleHQoIjJkIik7ZnVuY3Rpb24gZigpe2Mud2lkdGg9aW5uZXJXaWR0aDtjLmhlaWdodD1pbm5lckhlaWdodH1hZGRFdmVudExpc3RlbmVyKCJyZXNpemUiLGYpO2YoKTtnLmZpbGxTdHlsZT0iIzBmMCI7bGV0IHg9MCx5PWMuaGVpZ2h0LzIsdng9MSxTPTIscD0uMDE7ZnVuY3Rpb24gaihuKXt4PU1hdGgucmFuZG9tKCkqKGMud2lkdGgtUyl8MDt5PU1hdGgucmFuZG9tKCkqKGMuaGVpZ2h0LVMpfDA7aWYobil2eD1NYXRoLnJhbmRvbSgpPC41Py0xOjF9ZnVuY3Rpb24gcygpe2cuZmlsbFJlY3QoeCx5LFMsUyk7eCs9dng7aWYoeDwwfHx4PmMud2lkdGgtUylqKDEpO2lmKE1hdGgucmFuZG9tKCk8cCl7dngqPS0xO2ooKX1yZXF1ZXN0QW5pbWF0aW9uRnJhbWUocyl9cygpPC9zY3JpcHQ+
← Back to home