Runnpm install && npm run dev, then pick an option below.
- Openhttp://localhost:3000
- Click any tutorial or example
- Start coding immediately
- Openhttp://localhost:3000/ide
- Write or paste a smart contract
- Click "Compile" then "Deploy" (uses JavaScript VM - no wallet needed)
- Openhttp://localhost:3000
- Scroll to "Learn Web3 Development"
- Pick a tutorial based on your level

- 📖50+ tutorialsfrom "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

- ⚡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

- 🌍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
- 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)
- Read "Solidity for JS Developers" on the home page (/)
- Compare JavaScript and Solidity side by side (/)
- Build a Simple Token (/example/erc20-token)
- 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

- World-class IDEcomparable 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 layoutswith draggable resize
- Device presetsfor responsive testing (Desktop/Tablet/Mobile)
- Auto-run on changewith live preview
- Console panelwith log/warn/error capture
- Settings panel: Theme, font size, Vim mode, auto-save, and more

🎮 Interactive Code Playground (/playground)

- Multi-file editorwith file tabs (HTML, CSS, JS, Solidity, JSON, and more)
- Dual-pane layoutwith live hot-reload preview
- Console capture— seeconsole.log/warn/errorfrom your code in real-time
- File management— create, delete, and switch between files
- AI-powered contract generationfrom natural language prompts
- 40+ smart contract templatesready to deploy
- One-click deploymentto any supported blockchain

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

- File tree navigationwith workspace management
- Web preview panelwith live hot-reload for HTML/CSS/JS projects
- Console log capturefrom preview iframe
- Contract interaction panelfor deployed smart contracts
- AI Assistant integrationfor code suggestions
- Innovation Mode— experimental features like AI Whisperer, Time Machine, Exploit Lab
- Export/shareworkspaces with one click

- 40+ ready-to-use templatesacross categories:

- ERC-20, ERC-721, ERC-1155 tokens
- DeFi (staking, vaults, DEX)
- NFT marketplaces and minting
- Governance and DAOs
- Cross-chain bridges

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

- 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

- 10 languagessupported out of the box
- English, Spanish, Chinese, French, German, Japanese, Korean, Portuguese, Russian, Arabic
- RTL supportfor Arabic
- Language selector in navigation
- Persisted language preference

- 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

# 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

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:

EveryVITE_-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 inserver/.env(seeserver/.env.example).

├── 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

No! Runnpm run devand openhttp://localhost:3000in your browser. Everything runs in your browser.

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).

- Code of conduct
- Development workflow
- Pull request process
- Coding standards
- Accessible commit messages- We use a format designed for screen readers and cognitive accessibility

If you find this project useful, please consider giving it a ⭐

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.