Solidity Compiler IDE

Lyra Web3 Playground

✨ Built by nich | GitHub | X/Twitter

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

Live: every environment below is hosted at https://lyra.works (Cloudflare Pages). To run it locally, clone the repo and run npm install && npm run dev, then open http://localhost:3000.

---

🛠️ Development Environments

Professional IDEs

Innovation Lab (Experimental)

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

♿ Accessibility (WCAG 2.1 AAA)

Comprehensive accessibility support:

See ACCESSIBILITY.md for complete documentation.

---

Quick Access to All Tools

---

🎯 Who is this for?

---

⚡ 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

♿ Accessibility - Beyond WCAG 2.1 AAA (NEW!)

We go far beyond standard accessibility. Our system includes futuristic features that make Web3 truly accessible to everyone:

Quick Profiles (one-click presets):

• 👓 Low Vision • 🦯 Blind • 🦻 Deaf • 🖐️ Motor Impaired • 🧠 Cognitive

Vision Features:

• High contrast mode, large text (up to 200%), custom colors
• Color blind filters: Protanopia, Deuteranopia, Tritanopia, and more
• Reading guide: Horizontal line follows your cursor for easier reading
• OpenDyslexic font: Specially designed for dyslexic readers

Motor Accessibility:

• Dwell Click: Click by hovering - no mouse button needed
• Large click targets (up to 64px), sticky keys simulation
• Full keyboard navigation with Alt+A quick access

Cognitive Support:

• Simplified interface mode, focus mode, reduced animations
• Extended timeouts, reading speed adjustment
• Clear, consistent layouts

Screen Reader & Audio:

• ARIA live regions announce all actions
• Text-to-Speech: Read content aloud with adjustable speed/pitch
• Code-to-Natural-Language: Translates code to plain English

Developer-Friendly:

• Draggable floating accessibility button
• Export/import custom settings
• Full keyboard shortcut support

See ACCESSIBILITY.md for full documentation

🤖 AI-Powered dApp Builder (NEW!)

• Natural language → Full-stack dApp generation
• Generates Solidity + HTML + CSS + JavaScript from prompts
• Smart contract templates: Token, NFT, DAO
• Interactive tutorial-style editor with step-by-step guidance
• Deploy directly to testnets

🌐 Community Features (NEW!)

• Share Projects: Publish your work with unique shareable links
• Explore Gallery: Discover projects, templates, and tutorials from the community
• Like & Comment: Engage with other developers' work
• Fork Projects: Build on top of others' code
• Wallet Authentication: Connect wallet to access community features
• Embed Code: Embed shared projects in your own websites

🌍 Internationalization (NEW!)

• 10 languages supported out of the box
• English, Spanish, Chinese, French, German, Ja