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.

Try it now at lyra.works →

🛠️ Development Environments

Professional IDEs

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

Innovation Lab (Experimental)

Access at lyra.works/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 (No Install)

Option 1: Just use the website

Go to lyra.works
Click any tutorial or example
Start coding immediately

Option 2: Try the Solidity IDE

Go to lyra.works/ide
Write or paste a smart contract
Click "Compile" then "Deploy" (uses JavaScript VM - no wallet needed)

Option 3: Follow a tutorial

Go to lyra.works
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

💻 I know JavaScript, teach me Solidity

🚀 I want to build a dApp

Use the AI dApp Builder - describe your idea
Or start with a template
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.

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! Just go to lyra.works and start coding. 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, 100% free and open source. No hidden fees, no premium tier. MIT licensed.

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 FAQ page for 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

This project is licensed under the MIT License — 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

solidity-compiler

Documentation