StylusArena

A fast, no-install playground for learning and testing Arbitrum Stylus from your browser.

StylusArena helps developers go from “I’m curious about Stylus” to a working contract interaction in seconds, with live gas comparisons against Solidity.

Quick Pitch

StylusArena is intentionally narrow: it removes setup friction and answers one practical question quickly — is Stylus worth using for my workload?

StylusArena vs Wizard v2

| | StylusArena | Wizard v2 | |---|---|---| | Best for | First contact, onboarding, workshops | Full development lifecycle | | Time to first interaction | ~22 seconds | Minutes | | Setup | Browser only | Project setup + config | | Gas insight | Front-and-centre live dashboard | Available, not the primary workflow | | Developer intent | “Let me try this now” | “I’m already building production code” | | Positioning | Front door | Workshop |

In practice, they complement each other: StylusArena handles discovery and confidence-building, then users graduate to Wizard v2 for deeper implementation.

Hero Feature: Live Gas Dashboard

"Watch the gas savings update live as you type — 88% on heavy compute in real time"

The dashboard updates from template benchmarks and highlights where Stylus performs best (especially compute-heavy workloads).

Screenshots

<table> <tr> <td width="50%"><img src=".github/assets/gas-dashboard-live.png" alt="Gas comparison dashboard showing live benchmark deltas across all templates"/><br/>_{Gas Dashboard — live benchmark deltas across templates}</td> <td width="50%"><img src=".github/assets/dual-editor.png" alt="Dual editor showing Stylus Rust and Solidity side-by-side"/><br/>_{Dual Editor — Rust and Solidity side by side}</td> </tr> <tr> <td width="50%"><img src=".github/assets/template-selector.png" alt="Template selector grouped by developer persona"/><br/>_{Template Selector — grouped by developer background}</td> <td width="50%"><img src=".github/assets/deploy-guidance.png" alt="Deploy guidance panel with Arbitrum Sepolia flow"/><br/>_{Deploy Guidance — Sepolia deployment path}</td> </tr> </table>

Target Audience

• Solana Rust developers — You already think in Rust. StylusArena gives you an EVM entry point without making you relearn everything on day one.
• Solidity developers — You can compare familiar patterns directly and make a practical call on when Stylus is worth adopting.
• Web2 engineers — If you’ve worked with APIs, Redis, or backend state machines, the templates feel approachable rather than “blockchain-first”.
• DeFi builders — You get concrete benchmark signals early, before investing time in full protocol architecture.

Templates

| Template | Why it matters | |---|---| | 🟣 For Solana Devs – PDA Counter | Bridges Solana-style Rust instincts into Stylus with minimal conceptual overhead. | | 🔵 Migrate from Solidity in 5 min – ERC-20 | Shows a realistic migration path for teams maintaining existing Solidity interfaces. | | 🟠 Heavy Compute – Fibonacci | Demonstrates headline compute gains (up to 88%) where Stylus is most compelling. | | 🟢 Web2 Devs – Key-Value Vault | Frames smart contract storage using familiar key-value thinking. | | 🩷 DeFi Building Block – Multi-Sig Lite | Gives teams a practical starting point for multi-party state transitions. |

Hackathon & Traction

• 160+ organic users since launch
• 43% 7-day retention
• 22s median time-to-interaction
• Honorable Mention, Arbitrum APAC Mini Hackathon (Feb 2026)

No paid marketing. Pure organic curiosity.

Tech Stack

Project Structure

├── contracts/            # Stylus template source files
│   ├── pda-counter/      # Solana-style PDA counter (Rust + Solidity reference)
│   ├── erc20-token/      # ERC-20 migration example
│   ├── fibonacci/        # Compute-heavy benchmark
│   ├── key-value-vault/  # Web2-friendly storage pattern
│   └── multisig-lite/    # Multi-sig building block
├── src/
│   ├── app/              # Next.js App Router pages
│   ├── components/       # React components (editor, gas dashboard, deploy panel)
│   └── lib/              # Templates, wagmi config, utilities
└── .github/assets/       # README screenshots

Quick Start

Local development

git clone https://github.com/Fosurero/StylusArena.git
cd StylusArena
npm install
npm run dev

Open http://localhost:3000

Build

npm run build
npm start

One-click deploy

Grant Milestones

| Milestone | Status | Budget | Window | |---|---|---|---| | Milestone 1 | ✅ Completed | $6,500 | Jan/Feb 2026 | | Milestone 2 | 🔄 In Progress | — | Target: March 20, 2026 | | Milestone 3 | ⏳ Planned | — | Target: April 15, 2026 |

Post-Grant Sustainability

After grant delivery, StylusArena is designed to support itself through two practical channels: premium advanced templates for teams that want deeper production patterns, and white-label onboarding deployments for Orbit ecosystems that need branded developer onboarding flows.

Contributing

Contributions are welcome — bug reports, UX polish, template ideas, and docs improvements all help. Please open an issue first for major changes so we can align on scope.

License

MIT

---

Built for fast, credible Stylus onboarding.

<!-- Suggested GitHub topics: arbitrum, stylus, rust, webassembly, developer-tooling, ide, gas-optimization, solana-migration -->