Lyra Web3 Playground

✨ Built by nich | GitHub | X/Twitter

[](https://github.com/nirholas/lyra-web3-playground) [](https://www.typescriptlang.org/) [](https://react.dev/) [](docs/ACCESSIBILITY.md) [](docs/ARCHITECTURE.md) [](https://x.com/nichxbt)

A comprehensive open-source Web3 learning platform. Professional development environments, AI-assisted tools, security testing, and collaborative features — all in your browser.

Get the source on GitHub

Hosting note: the hosted demo at lyra.works is currently offline while hosting is being migrated. Clone the repo and run npm install && npm run dev to use every environment below at http://localhost:3000.

---

🛠️ Development Environments

Professional IDEs

Tool	Description	Link
Web Sandbox	Full-featured web IDE with React, Vue, Python, live preview, Vim mode	/ide?type=web
Solidity IDE	Smart contract IDE with multi-version compiler (0.6.x - 0.8.24)	/ide?type=solidity
Full-Stack Playground	Build complete dApps with contract + frontend + live preview	/fullstack-demo
Interactive Sandbox	IDE with AI assistant, templates, and testnet deployment	/sandbox

Innovation Lab (Experimental)

Open http://localhost:3000/innovation or enable "Innovation Mode" in the sandbox:

Feature	Capability
AI Code Whisperer	Real-time vulnerability detection, voice control, auto-fix suggestions
Contract Time Machine	Version history, branching, state simulation
Security Testing Lab	Test contracts against reentrancy, flash loans, overflow attacks
Collaborative Arena	Code with AI teammates, participate in challenges
Neural Gas Oracle	ML-powered gas prediction and optimization
Cross-Chain Deployer	Deploy to 8+ chains with automated bridge setup

♿ Accessibility (WCAG 2.1 AAA)

Comprehensive accessibility support:

Feature	Description
Dwell Click	Click by hovering — no mouse button required
Reading Guide	Horizontal line follows cursor position
Color Blind Filters	Protanopia, Deuteranopia, Tritanopia support
Text-to-Speech	Read content aloud with adjustable speed/pitch
Cognitive Support	Simplified mode, focus mode, extended timeouts
Code-to-English	Translates Solidity to plain English explanations

See ACCESSIBILITY.md for complete documentation.

---

Quick Access to All Tools

Tool	URL	Description
IDE Hub	/ide	Choose Web Sandbox or Solidity IDE
Web Sandbox	/ide?type=web	HTML/CSS/JS/React/Vue/Python IDE
Solidity IDE	/ide?type=solidity	Smart contract development
Interactive Sandbox	/sandbox	Sandbox with AI assistant
Contract Playground	/playground	Template-based contract editor
Learning Playground	/learn	Interactive tutorials
Full-Stack Demo	/fullstack-demo	Contract + Frontend builder
Innovation Lab	/innovation	Experimental AI features
Markets	/markets	Live crypto prices & DeFi data
Explore	/explore	Community projects gallery

---

🎯 Who is this for?

You are...	Lyra helps you...
🌱 Complete beginner	Learn Solidity with step-by-step tutorials
💻 Web developer	Transition to Web3 with familiar tools
🎓 Student	Practice smart contracts without spending gas
🔧 Builder	Prototype dApps quickly with templates
👩‍🏫 Educator	Teach blockchain with interactive examples

---

⚡ Start in 30 Seconds

Run npm install && npm run dev, then pick an option below.

Option 1: Browse the tutorials

1. Open http://localhost:3000
2. Click any tutorial or example
3. Start coding immediately

Option 2: Try the Solidity IDE

1. Open http://localhost:3000/ide
2. Write or paste a smart contract
3. Click "Compile" then "Deploy" (uses JavaScript VM - no wallet needed)

Option 3: Follow a tutorial

1. Open http://localhost:3000
2. Scroll to "Learn Web3 Development"
3. Pick a tutorial based on your level

---

🎮 What can you do here?

For Learning

• 📖 50+ tutorials from "What is a blockchain?" to advanced DeFi
• 🎯 Interactive examples - code runs as you read
• 💡 Instant feedback - see errors and results immediately
• 🏆 Progress tracking - pick up where you left off

For Building

• ⚡ Solidity IDE - compile and deploy in seconds
• 📝 40+ templates - tokens, NFTs, DAOs, DeFi
• 🤖 AI dApp Builder - describe what you want, get code
• 🔗 Multi-chain - Ethereum, Polygon, Base, Arbitrum, and more

For Everyone

• 🌍 10 languages - English, Spanish, Chinese, Arabic, and more
• ♿ Fully accessible - screen readers, keyboard nav, color blind support
• 🌙 Dark mode - easy on the eyes
• 📱 Mobile friendly - learn on any device

---

📚 Learning Paths

🌱 I'm new to blockchain

1. Start with the "What is Ethereum?" tutorial on the home page (/)
2. Continue with "Your First Smart Contract" (/)
3. Try the Hello World example (/example/hello-world)

💻 I know JavaScript, teach me Solidity

1. Read "Solidity for JS Developers" on the home page (/)
2. Compare JavaScript and Solidity side by side (/)
3. Build a Simple Token (/example/erc20-token)

🚀 I want to build a dApp

1. Use the AI dApp Builder on the home page (/) and describe your idea
2. Or start from a template in the IDE (/ide)
3. Deploy to testnet and share with the community

---

✨ Features

🎮 Premium Code Sandbox (NEW!)

• World-class IDE comparable to CodePen, JSFiddle, and Remix
• Web Sandbox: Multi-file projects with HTML, CSS, JS, React, Vue, Python
• Solidity IDE: Full-featured smart contract development environment
• Split-pane layouts with draggable resize
• Device presets for responsive testing (Desktop/Tablet/Mobile)
• Auto-run on change with live preview
• Console panel with log/warn/error capture
• Settings panel: Theme, font size, Vim mode, auto-save, and more

🎮 Interactive Code Playground (/playground)

• Multi-file editor with file tabs (HTML, CSS, JS, Solidity, JSON, and more)
• Dual-pane layout with live hot-reload preview
• Console capture — see console.log/warn/error from your code in real-time
• File management — create, delete, and switch between files
• AI-powered contract generation from natural language prompts
• 40+ smart contract templates ready to deploy
• One-click deployment to any supported blockchain

🔧 Solidity Development (NEW!)

• Multiple Solidity versions (0.6.x through 0.8.24)
• Real-time compilation with error/warning highlighting
• Deploy to any network (JS VM, Sepolia, Goerli, Mumbai, Mainnet)
• Interactive contract UI - call functions directly
• Transaction history with gas tracking
• Copy ABI/Bytecode with one click
• Keyboard shortcuts (Ctrl+S to compile)

�️ Full-Stack Sandbox (/sandbox)

• File tree navigation with workspace management
• Web preview panel with live hot-reload for HTML/CSS/JS projects
• Console log capture from preview iframe
• Contract interaction panel for deployed smart contracts
• AI Assistant integration for code suggestions
• Innovation Mode — experimental features like AI Whisperer, Time Machine, Exploit Lab
• Export/share workspaces with one click

📚 Smart Contract Templates

• 40+ ready-to-use templates across categories:
  • ERC-20, ERC-721, ERC-1155 tokens
  • DeFi (staking, vaults, DEX)
  • NFT marketplaces and minting
  • Governance and DAOs
  • Cross-chain bridges

📖 Comprehensive Tutorials

• 50+ tutorials from beginner to advanced [in progress]
• Step-by-step guides with interactive examples
• Topics: Solidity basics, DeFi mechanics, security patterns, gas optimization

🔗 Multi-Chain Support

• Ethereum, Base, Polygon, Avalanche, BSC, Arbitrum
• Solana integration
• Monad testnet support

🧹 Token Consolidation Tool

• Sweep dust tokens across wallets
• Multi-chain token management
• Gas-efficient batch operations

🎨 Modern UI/UX

• Dark/light mode
• Fully responsive design
• Keyboard shortcuts for power users
• Mobile-optimized with bottom navigation