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

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

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

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

📖 Documentation

❓ Frequently Asked Questions

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