Solidity Compiler IDE
Browser Solidity compiler IDE - smart contract development testing deploy
Open source Open in the app JSON README (API)
About
Browser Solidity compiler IDE - smart contract development testing deploy
Details
- Kind
- MCP servers
- Topic
- Developer tools
- Publisher
- nirholas
- Origin
- official
- Category
- ferramentas
- Transport
- desconhecido
- Version
- 1.0.0
- Stars
- 26
- Forks
- 5
- Last push
- 2026-08-17T03:02:23Z
- Repository state
- ativo
- Language
- TypeScript
- License
- NOASSERTION
- Added
- 2026-08-29 04:00:55
- Updated
- 2026-08-29 04:00:55
- Origin id
io.github.nirholas/solidity-compiler
README
<!-- ═══════════════════════════════════════════════════════════════════════════════ LYRA WEB3 PLAYGROUND ═══════════════════════════════════════════════════════════════════════════════ ✨ Original Author: nich 🐦 Twitter/X: x.com/nichxbt 🐙 GitHub: github.com/nirholas 📦 Repository: github.com/nirholas/lyra-web3-playground 🌐 Hosted demo: offline while hosting is migrated. Source: github.com/nirholas/lyra-web3-playground Copyright (c) 2024-2026 nirholas (nich) All rights reserved. See the LICENSE file. NOTICE: This project contains embedded watermarks and attribution markers. Removal or modification of attribution constitutes violation of the license. ═══════════════════════════════════════════════════════════════════════════════ --> # Lyra Web3 Playground <p align="center"> <strong>✨ Built by <a href="https://x.com/nichxbt">nich</a> | <a href="https://github.com/nirholas">GitHub</a> | <a href="https://x.com/nichxbt">X/Twitter</a></strong> </p> [](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. <p align="center"> <a href="https://github.com/nirholas/lyra-web3-playground"><strong>Get the source on GitHub</strong></a> </p> > **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 | 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](docs/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** 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](docs/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 ```bash # 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](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: ```bash 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 ```bash 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](docs/GETTING_STARTED.md) | **New to blockchain? Start here!** | | [Quick Start Guide](docs/QUICKSTART.md) | Get up and running locally | | [IDE Guide](docs/IDE_GUIDE.md) | **All development environments & URLs** | | [Sandbox Guide](docs/SANDBOX_GUIDE.md) | Premium sandbox features | | [Innovation Lab](docs/INNOVATION_LAB.md) | **AI & experimental features** | | [Playgrounds](docs/PLAYGROUNDS.md) | **All playground components** | | [Architecture Overview](docs/ARCHITECTURE.md) | System design | | [Backend API](docs/BACKEND_API.md) | API reference | | [Deployment Guide](docs/DEPLOYMENT.md) | Deploy your own instance | | [Security](docs/SECURITY.md) | Security practices | | [Accessibility](docs/ACCESSIBILITY.md) | A11y features and usage | --- ## ❓ Frequently Asked Questions <details> <summary><strong>Do I need to install anything?</strong></summary> No! Run `npm run dev` and open `http://localhost:3000` in your browser. Everything runs in your browser. </details> <details> <summary><strong>Do I need cryptocurrency or a wallet?</strong></summary> 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). </details> <details> <summary><strong>Is this free?</strong></summary> Yes, it is free to run. No hidden fees, no premium tier. See the [LICENSE](LICENSE) file for usage terms. </details> <details> <summary><strong>I'm getting errors. What do I do?</strong></summary> 1. Check the error message - it usually tells you what's wrong 2. Make sure your Solidity version matches your code 3. Check the `/faq` for common issues 4. [Open an issue](https://github.com/nirholas/lyra-web3-playground/issues) if you're stuck </details> <details> <summary><strong>Can I use this for my class/workshop?</strong></summary> 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. </details> <details> <summary><strong>How do I deploy to a real network?</strong></summary> 1. Install [MetaMask](https://metamask.io) 2. Get testnet ETH from a faucet (free) 3. Connect your wallet on Lyra 4. Select your network (e.g., Sepolia, Mumbai) 5. Click "Deploy" - your contract is now on the blockchain! </details> <details> <summary><strong>I found a bug / I have a suggestion</strong></summary> Please [open an issue](https://github.com/nirholas/lyra-web3-playground/issues)! We appreciate all feedback. </details> --- ## 🤝 Contributing Contributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) 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 ```bash [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](CONTRIBUTING.md) for full guidelines. ### Good First Issues Check out issues labeled [`good first issue`](https://github.com/nirholas/lyra-web3-playground/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) to get started. --- ## 📄 License All rights reserved. See the [LICENSE](LICENSE) file for details. --- ## 🙏 Acknowledgments - [Remix IDE](https://remix.ethereum.org) for inspiration - [OpenZeppelin](https://openzeppelin.com) for contract standards - The Web3 developer community --- <p align="center"> <strong>If you find this project useful, please consider giving it a ⭐</strong> </p> <p align="center"> Built with ❤️ by <a href="https://x.com/nichxbt">nich</a> </p> ## Documentation Full documentation site: **https://nirholas.github.io/lyra-web3-playground/** - [Getting started](docs/getting-started.md) covers install and first run. - [Examples](docs/examples.md) has copy-paste snippets.