Introducing Live Twists ⚡ — Interactive Blockchain Applications Inside a Steem Post

puncakbukit (78)in Steem Dev • 2 days ago

5% of the rewards of this post are for @steem.amal

Over the past few months I have been building SteemTwist, a decentralized microblogging frontend for the Steem blockchain.

Live Demo:
https://puncakbukit.github.io/steemtwist/

Source Code:
https://github.com/puncakbukit/steemtwist

While SteemTwist includes the expected social features such as posting, replies, follows, notifications, encrypted messages, and timelines, the feature I am most excited about is something called Live Twists.

The goal is simple:

What if a Steem post could be more than static text?

What if a post could contain an interactive application that runs directly inside the reader's browser while still being stored and distributed through the blockchain?

That question led to the creation of Live Twists.

What Is a Live Twist?

A Live Twist is a normal Steem comment whose json_metadata contains executable JavaScript.

When a viewer opens the post, the code is not automatically executed. Instead, they must explicitly click a Run button.

The code then executes inside a heavily restricted sandboxed iframe and can generate interactive content such as:

Polls
Quizzes
Calculators
Dashboards
Blockchain explorers
Data visualizations
Educational demos
Interactive greetings
Community tools

The post itself remains a standard Steem comment, so it is still compatible with other Steem frontends. Users who visit from a non-SteemTwist interface simply see a placeholder message.

Blockchain-Aware Applications

One challenge was allowing useful interaction with the blockchain without exposing dangerous browser capabilities.

Live Twists therefore expose a small API:

app.query(...)
app.ask(...)
app.action(...)
app.render(...)

app.query() and app.ask() provide read-only access to Steem RPC methods.

For example, a Live Twist can retrieve:

Current STEEM price
Account information
Witness rankings
Reward pool data
Market information
Recent posts
Follower statistics

A Live Twist can effectively become a miniature blockchain dashboard embedded directly inside a social post.

The Promise-based app.ask() API also allows multiple concurrent queries without callback collisions.

Blockchain Actions

Read-only data is useful, but interaction is where things become interesting.

Live Twists can request blockchain actions such as:

Voting
Following
Unfollowing
Replying
Retwisting
Transfers
Delegations
Power ups
Witness voting

However, these actions never execute automatically.

Every request passes through the parent application, is validated, sanitized, displayed in a confirmation dialog, and then requires explicit approval through Steem Keychain.

The sandbox itself never gains access to Keychain.

This separation was one of the most important architectural decisions in the project.

Security Architecture

Running user-generated JavaScript is inherently risky.

Live Twists therefore use multiple independent security layers.

The execution environment uses:

< iframe sandbox="allow-scripts">

with no same-origin access.

Inside the sandbox:

fetch() is blocked
XMLHttpRequest is blocked
WebSocket is blocked
window.open() is blocked

All rendered HTML is sanitized through DOMPurify before insertion.

Communication between the iframe and the parent application occurs through a restricted postMessage bridge with origin validation and source validation.

Code execution is also limited to 10 KB per Live Twist, and nothing runs automatically on page load.

The user must always click Run.

Templates and Developer Experience

To make experimentation easier, SteemTwist currently includes 40 built-in templates divided into four categories:

Simple
Greetings
Queries
Actions

Developers can use these templates as examples or starting points for their own creations.

The editor also includes:

Live preview
Auto-resizing sandbox
Inline editing
Publish workflow
Template gallery

The intention is to reduce friction so that developers can focus on building ideas rather than boilerplate.

Why Build This?

Most blockchain social platforms treat posts as static content.

Live Twists explore a different possibility:

posts as applications.

Because the code is stored on-chain, distributed through blockchain infrastructure, and executed locally by readers, a Live Twist can become a portable interactive experience that travels with the post itself.

Imagine community tools, governance dashboards, educational simulations, blockchain explorers, calculators, or games being shared and discovered the same way people currently share articles and images.

That is the experiment behind Live Twists.

The implementation is still evolving, and I would love feedback from Steem developers regarding the architecture, security model, API design, and potential use cases.

If you would like to explore the project, test the sandbox, or review the source code, please take a look:

Live Demo:
https://puncakbukit.github.io/steemtwist/

GitHub Repository:
https://github.com/puncakbukit/steemtwist

I am particularly interested in hearing ideas for new Live Twist templates, additional sandbox APIs, and ways to make interactive blockchain-native content more useful for the Steem ecosystem.

Assisted by https://ChatGPT.com/.