Summary
This server brings a browser-based Solidity compiler directly into Claude. It's part of the Lyra Web3 Playground project, which provides a full IDE for smart contract development with support for compiler versions 0.6.x through 0.8.24. You get compilation, testing, and deployment capabilities without leaving your conversation. Useful when you're iterating on contract code with Claude and want immediate feedback on syntax errors, optimization warnings, or bytecode output. The underlying platform includes templates for tokens, NFTs, and DeFi contracts, plus deployment to multiple testnets. Think of it as having Remix available as a tool while you're prototyping or debugging Solidity with an AI pair programmer.
Fastest browser for AI agents to run web automation tasks, always free.
Download Free life-time →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →
Connect your Claude agent to live crypto prices and trading routes via 1inch
Get the MCP →
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.
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 devto use every environment below athttp://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
- Open
http://localhost:3000 - Click any tutorial or example
- Start coding immediately
Option 2: Try the Solidity IDE
- Open
http://localhost:3000/ide - Write or paste a smart contract
- Click "Compile" then "Deploy" (uses JavaScript VM - no wallet needed)
Option 3: Follow a tutorial
- Open
http://localhost:3000 - Scroll to "Learn Web3 Development"
- 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
- Start with the "What is Ethereum?" tutorial on the home page (
/) - Continue with "Your First Smart Contract" (
/) - Try the Hello World example (
/example/hello-world)
💻 I know JavaScript, teach me Solidity
- Read "Solidity for JS Developers" on the home page (
/) - Compare JavaScript and Solidity side by side (
/) - Build a Simple Token (
/example/erc20-token)
🚀 I want to build a dApp
- Use the AI dApp Builder on the home page (
/) and describe your idea - Or start from a template in the IDE (
/ide) - 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/errorfrom 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+Aquick 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, Japanese, Korean, Portuguese, Russian, Arabic
- RTL support for Arabic
- Language selector in navigation
- Persisted language preference
📊 Market Data Integration (NEW!)
- Live Crypto Prices: Real-time data from CoinGecko
- DeFi Analytics: Protocol TVL, yields from DeFiLlama
- Chain Statistics: TVL by chain, trending coins
- Markets Page: Comprehensive market overview at
/markets
🚀 Quick Start
Prerequisites
- Node.js 18+
- npm or yarn
Installation
# Clone the repository
git clone https://github.com/nirholas/lyra-web3-playground.git
cd lyra-web3-playground
# Install dependencies
npm install
# Start development server
npm run dev
Open http://localhost:3000 in your browser.
Environment Variables
The app runs without configuration, but wallet login, the backend API, RPC access and Supabase-backed features need credentials. Copy the example file and fill it in:
cp .env.example .env
| Variable | Purpose |
|---|---|
VITE_PRIVY_APP_ID | Privy application ID used for wallet / email login |
VITE_API_URL | Base URL of the backend API (defaults to http://localhost:3001) |
VITE_INFURA_API_KEY | Infura project ID for read-only RPC calls |
VITE_SUPABASE_URL | Supabase project URL |
VITE_SUPABASE_ANON_KEY | Supabase anon (public) key |
Every VITE_-prefixed value is inlined into the client bundle and is therefore
public — never put a private key or server secret in .env. Server-side secrets
belong in server/.env (see server/.env.example).
Build for Production
npm run build
npm run preview
🏗️ Project Structure
├── src/
│ ├── components/ # React components
│ │ ├── Accessibility/ # Comprehensive a11y system
│ │ │ ├── AccessibilityButton.tsx # Floating button
│ │ │ ├── AccessibilityPanel.tsx # Settings panel
│ │ │ ├── DwellClick.tsx # Click-by-hovering
│ │ │ ├── ReadingGuide.tsx # Line highlighter
│ │ │ └── ColorBlindFilters.tsx # Color blind support
│ │ ├── CodePlayground/ # Monaco editor & compiler
│ │ ├── Tutorial/ # Tutorial system
│ │ ├── Sandbox/ # Premium sandbox IDEs
│ │ │ ├── WebSandbox.tsx # Web dev sandbox
│ │ │ ├── SoliditySandbox.tsx # Solidity IDE
│ │ │ ├── UnifiedSandbox.tsx # Generic sandbox wrapper
│ │ │ └── ShareModal.tsx # Project sharing modal
│ │ ├── Playground/ # Full-stack dApp playground
│ │ ├── FullStackPlayground/ # AI dApp builder
│ │ └── Consolidation/ # Token consolidation
│ ├── pages/ # Route pages
│ │ ├── SandboxPage.tsx # Premium IDE selection
│ │ ├── ExplorePage.tsx # Community project gallery
│ │ ├── SharedProjectPage.tsx # View shared projects
│ │ ├── MarketsPage.tsx # Market data dashboard
│ │ └── ExamplePage.tsx # Example with sandbox toggle
│ ├── services/ # API services
│ │ ├── community.ts # Sharing, likes, comments, forks
│ │ └── marketData.ts # CoinGecko & DeFiLlama integration
│ ├── hooks/ # Custom React hooks
│ │ └── useMarketData.ts # Market data hooks
│ ├── stores/ # Zustand state management
│ │ ├── accessibilityStore.ts # 40+ a11y settings
│ │ ├── i18nStore.ts # 10 languages + RTL
│ │ ├── themeStore.ts # Dark/light mode
│ │ └── walletStore.ts # Wallet connection
│ ├── styles/
│ │ ├── index.css # Main styles
│ │ └── accessibility.css # 580+ lines a11y CSS
│ ├── examples/ # Code examples (web3, ai)
│ └── utils/ # Helper functions
│ └── contractTemplates.ts # 40+ contract templates
├── server/ # Backend API (optional)
├── docs/ # Documentation
└── public/ # Static assets
🛠️ Tech Stack
| Category | Technology |
|---|---|
| Frontend | React 18, TypeScript, Vite |
| Styling | TailwindCSS |
| Editor | Monaco Editor |
| Web3 | ethers.js v6, viem |
| State | Zustand (with persist) |
| i18n | Custom store (10 languages + RTL) |
| Accessibility | Custom a11y system (WCAG 2.1 AAA+) |
| Database | Supabase |
| Testing | Vitest |
| Deployment | Vercel, Netlify, Docker |
📖 Documentation
| Document | Description |
|---|---|
| Getting Started | New to blockchain? Start here! |
| Quick Start Guide | Get up and running locally |
| IDE Guide | All development environments & URLs |
| Sandbox Guide | Premium sandbox features |
| Innovation Lab | AI & experimental features |
| Playgrounds | All playground components |
| Architecture Overview | System design |
| Backend API | API reference |
| Deployment Guide | Deploy your own instance |
| Security | Security practices |
| Accessibility | A11y features and usage |
❓ Frequently Asked Questions
Do I need to install anything?
No! Run npm run dev and open http://localhost:3000 in your browser. Everything runs in your browser.
Do I need cryptocurrency or a wallet?
No! You can learn and practice without any crypto. The IDE has a "JavaScript VM" mode that simulates a blockchain locally. When you're ready to deploy for real, you'll need MetaMask and testnet ETH (which is free).
Is this free?
Yes, it is free to run. No hidden fees, no premium tier. See the LICENSE file for usage terms.
I'm getting errors. What do I do?
- Check the error message - it usually tells you what's wrong
- Make sure your Solidity version matches your code
- Check the
/faqfor common issues - Open an issue if you're stuck
Can I use this for my class/workshop?
Absolutely! That's one of the main use cases. You can share links to specific examples, and students can code along in their browsers. No setup required.
How do I deploy to a real network?
- Install MetaMask
- Get testnet ETH from a faucet (free)
- Connect your wallet on Lyra
- Select your network (e.g., Sepolia, Mumbai)
- Click "Deploy" - your contract is now on the blockchain!
I found a bug / I have a suggestion
Please open an issue! We appreciate all feedback.
🤝 Contributing
Contributions are welcome! Please read our Contributing Guide for details on:
- Code of conduct
- Development workflow
- Pull request process
- Coding standards
- Accessible commit messages - We use a format designed for screen readers and cognitive accessibility
Commit Message Format
[type] Clear description in plain English (emoji at end) 🎉
Example: [add] Keyboard navigation for dropdown menus ♿
Why this format?
- Text first - Screen readers read emoji names, so meaning comes first
- Plain words - Clear for developers with cognitive disabilities
- Consistent - Easy to scan for low vision users
See CONTRIBUTING.md for full guidelines.
Good First Issues
Check out issues labeled good first issue to get started.
📄 License
All rights reserved. See the LICENSE file for details.
🙏 Acknowledgments
- Remix IDE for inspiration
- OpenZeppelin for contract standards
- The Web3 developer community
If you find this project useful, please consider giving it a ⭐
Built with ❤️ by nich
Documentation
Full documentation site: https://nirholas.github.io/lyra-web3-playground/
- Getting started covers install and first run.
- Examples has copy-paste snippets.
Featured
Fastest browser for AI agents to run web automation tasks, always free.
Download Free life-time →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →Connect your Claude agent to live crypto prices and trading routes via 1inch
Get the MCP →
