🌀 Introducing SteemTwist — Steem with a Twist

puncakbukit (78)in Steem Dev • 2 days ago (edited)

Hello Steem Dev community! 👋

I'm excited to share a project I've been working on: SteemTwist, a decentralised microblogging dApp built entirely on the Steem blockchain. No backend, no build tools, no server — just four static files and the chain.

🔗 Live app: https://puncakbukit.github.io/steemtwist
📦 Source code: https://github.com/puncakbukit/steemtwist
📜 White Paper
https://github.com/puncakbukit/steemtwist/blob/main/SteemTwist_WhitePaper.pdf

What is SteemTwist?

SteemTwist is a Twitter/X-style microblogging experience powered by Steem. Every post, reply, vote, follow, and encrypted message is a native Steem blockchain operation. Content is permanent, censorship-resistant, and owned entirely by the author's Steem key — not by any company or service.

A SteemTwist user is called a Twister 🌀. Short posts are Twists, replies are Thread Replies, upvotes are Twist Love ❤️, resteems are Retwists 🔁, and notifications are Signals 🔔.

Tech Stack

The entire app runs in the browser from four files:

File	Role
`index.html`	HTML shell with CDN scripts (SRI-verified) and CSS tokens
`blockchain.js`	All Steem API and Keychain helpers — no Vue dependency
`components.js`	Vue 3 components compiled at runtime from CDN
`app.js`	Vue Router views, routes, and global state

Dependencies (all CDN, all SRI-verified):

steem-js — Steem RPC client
Steem Keychain — signing and memo encryption
Vue 3 + Vue Router 4 — UI framework
marked.js — Markdown rendering
DOMPurify — HTML sanitisation

Hosting is on GitHub Pages. Because Vue Router uses createWebHashHistory, all routes work with zero server configuration.

How Data is Stored

SteemTwist uses a thin convention on top of standard Steem comment operations. At the start of each month, the @steemtwist account publishes two root posts:

feed-YYYY-MM    ← all Twists are direct replies to this
secret-YYYY-MM  ← all encrypted Secret Twists are posted here

Twists have permlinks in the format tw-YYYYMMDD-HHMMSS-username. The full tree looks like this:

@steemtwist/feed-2026-03
├── @alice/tw-20260315-091530-alice     ← Twist
├── @bob/tw-20260315-102244-bob         ← Live Twist ⚡
│   ├── @alice/tw-20260315-150012-alice ← Thread Reply
│   └── @carol/tw-20260315-160000-carol ← Flag reply
└── ...

All Twists are broadcast with max_accepted_payout: "0.000 SBD" and allow_curation_rewards: false. Twist Love works as social appreciation without moving money.

Features

🏠 Feed & Navigation

Home — personalised stream from Twisters you follow, with Firehose 🔥 real-time streaming (filtered to followed users only)
Explore — global Twist Stream with New / Hot / Top sort modes and a live Firehose
Understream 🌊 — a toggle on every page that widens the view from SteemTwist-only content to the full Steem blockchain (all posts, full account history)
Profile — paginated Twist history with a pinned Twist slot, Understream support, and a refresh button

🌀 Twists

Up to 280 characters with full Markdown and a real-time Write / Preview tab
Edit — re-broadcasts the comment op; the card updates instantly in the feed
Delete — uses delete_comment if the post has no votes or replies; falls back to blanking the body otherwise
Pin — pin one Twist to the top of your profile via an on-chain custom_json operation
Retwist — resteem any Twist
Twist Love — upvote at 100% weight

👤 Social

Rich profile cards with avatar, reputation (1–100 scale), bio, location, website (https-only validation), join date, and stats
Paginated Followers / Following / Friends (mutual follows) pages with Follow/Unfollow buttons per row
Follow and Unfollow using Steem's native follow plugin

🔔 Signals (Notifications)

Scans the latest 500 account-history entries and classifies each into one of six types:

Signal	Trigger
Twist Love ❤️	Incoming upvote on your Twist
Reply 💬	New Thread Reply on your Twist
Mention 📢	Your @username appears in a Twist
Follow 👤	Someone followed you
Retwist 🔁	Someone resteemed your Twist
Secret Twist 🔒	An incoming encrypted message

Unread signals show a badge count in the nav. The badge clears when you visit the Signals page.

⚡ Live Twists — The Unique Feature

This is the part I'm most excited about. A Live Twist is a Steem comment whose json_metadata carries a JavaScript code payload alongside type: "live_twist". When a viewer opens the Twist, they see a ▶ Run button. Clicking it executes the code inside a sandboxed iframe and renders the output inline in the feed.

Live Twists turn static posts into interactive widgets — polls, calculators, charts, blockchain dashboards, animated greeting cards, games — all stored permanently on-chain.

On-Chain Format

{
  "type": "live_twist",
  "version": 1,
  "title": "Click Counter",
  "code": "let n=0; function draw(){ app.render('<button id=b>Clicks: '+n+'</button>'); document.getElementById('b').onclick=()=>{n++;draw();}; } draw();"
}

The body of the Steem comment defaults to "⚡ Live Twist — view on SteemTwist" so it renders gracefully on Steemit and other clients.

Sandbox API

Author code communicates with the host page through an app object:

Method	Description
`app.render(html)`	DOMPurify-sanitise and inject HTML; auto-resizes the iframe
`app.text(str)`	Set body as plain text (max 2,000 characters)
`app.query(type, params)`	Call a read-only Steem API method
`app.ask(type, params)`	Like `app.query()` but returns a Promise — safe for concurrent calls
`app.action(type, params)`	Request a Keychain-signed blockchain operation with a confirmation modal
`app.log(...args)`	Append to the built-in console panel

app.ask() uses per-request IDs so concurrent queries never collide:

const [ticker, props] = await Promise.all([
  app.ask("getTicker", {}),
  app.ask("getDynamicGlobalProperties", {})
]);
app.render("<b>STEEM:</b> $" + parseFloat(ticker.latest).toFixed(4) +
           "<br><b>Block:</b> #" + props.head_block_number);

Over 70 read-only Steem API methods are available via app.query() / app.ask(), and 10 Keychain-signed action types are available via app.action() (vote, reply, follow, transfer, delegate, power up/down, vote witness, retwist).

40-Template Gallery

The composer ships with 40 ready-to-use templates in four tabs:

Tab	Templates
Simple	Poll, Quiz, Clicker, Calculator, Chart, Expandable, Story, Demo, Explorer, Prototype
Greetings	Birthday, New Year, Congratulations, Wedding, Graduation, Eid, Christmas, Thank You, Get Well, Anniversary
Queries	Account Info, Trending Tags, STEEM Price, Hot Posts, Follower Count, Top Witnesses, Chain Stats, Post Viewer, Order Book, Reward Pool
Actions	Vote on a Post, Reply, Follow/Unfollow, Transfer STEEM/SBD, Delegate SP, Power Up, Vote for Witness, Retwist, Query then Vote, Query then Follow

Security

Live Twists are isolated by ten layered controls:

sandbox="allow-scripts" only — null origin, no same-origin access, no top navigation
fetch, XMLHttpRequest, WebSocket, and window.open all throw inside the sandbox
DOMPurify sanitises every app.render() call using a shared config identical in both viewer and composer preview
10 KB code size limit enforced before publish and before ▶ Run
User must click ▶ Run — never auto-executed on page load
Keychain is unreachable from the sandbox — all app.action() calls route through the parent page
Each app.action() shows a confirmation modal with HTML-escaped parameters before touching Keychain
Parent validates e.origin === "null" and e.source === iframe.contentWindow on every inbound postMessage
All app.query() parameters are sanitised: strings capped to 256 chars, limits clamped to 1–100
All app.action() parameters are validated: username regex, decimal-only amounts, currency/unit allowlists

Live Twist Flag System 🚩

Users can flag a Live Twist authored by someone else. Flagging is a two-step Keychain sequence:

A −10000 weight downvote via requestVote
A reply comment via requestBroadcast with the reason stored in json_metadata

The two-step design is required because Keychain rejects vote ops bundled in requestBroadcast. The flag reason is one of 12 JS-specific categories:

Reason	Description
🍪 Session Hijacking	Stealing session IDs via `document.cookie`
💳 Web Skimming / Formjacking	Intercepting card numbers at form submission
🗄️ Storage Theft	Reading tokens from `localStorage` / `sessionStorage`
💉 DOM-type XSS	Executing malicious scripts via URL parameters
🎣 Phishing Form Insertion	Injecting fake login forms into legitimate pages
🪄 UI Redressing	Tricking users into clicking hidden/overlaid elements
⛏️ Cryptojacking	Background CPU mining while the page is open
🔍 Browser Fingerprinting	Tracking users without cookies via JS-collected data
📍 Sensor / Location Abuse	Deceptive permission prompts for device sensors
🛠️ Client-Side Logic Tampering	Bypassing JS-based admin checks via dev tools
↩️ CSRF	Sending unintended requests to third-party sites
⚠️ Other	Any other harmful behaviour not listed above

🔒 Secret Twists — End-to-End Encrypted Messaging

Secret Twists provide private messaging between Steem accounts using the memo key pair. Encryption and decryption are delegated entirely to Steem Keychain — plaintext never touches SteemTwist's code.

Sender → requestEncodeMessage (Keychain) → broadcast to @steemtwist/secret-YYYY-MM
Recipient sees 🔒 signal → requestVerifyKey (Keychain) → message revealed

Unlimited message length with full Markdown support
Nested encrypted replies — each decrypted individually on demand
Only the recipient (not the original sender) can reply
Invisible in the regular Twist feed — only appears in the Secret Twists inbox

RPC Fallback Nodes

All blockchain calls use automatic node rotation on failure:

https://api.steemit.com
https://api.justyy.com
https://steemd.steemworld.org
https://api.steem.fans

Forking / Deploying Your Own Instance

The TWIST_CONFIG object in blockchain.js centralises all deployment-specific constants:

const TWIST_CONFIG = {
  ROOT_ACCOUNT:       "steemtwist",
  ROOT_PREFIX:        "feed-",
  SECRET_ROOT_PREFIX: "secret-",
  TAG:                "steemtwist",
  POST_PREFIX:        "tw",
  DAPP_URL:           "https://puncakbukit.github.io/steemtwist"
};

To run your own independent instance: update these values, push the four files to any static host, and publish your own monthly root posts. No server configuration is needed.

What's Next

This is version 0.1 — a solid foundation, but there's plenty of room to grow. I'd love to hear feedback from the Steem Dev community on:

The Live Twist sandbox API — are there read-only query types you'd find useful that aren't currently supported?
The data model — any thoughts on the monthly root post approach vs. alternatives?
Security — any concerns or suggestions about the sandbox design?

Feel free to try it out, spin up your own fork, or open issues on GitHub. All contributions are welcome.

Thanks for reading! 🌀

Built with steem-js · Steem Keychain · Vue 3 · MIT License

Assisted by: