Live Preview
How It Works
Azyrom provides instant live previews of your generated code using industry-standard online tools. When you click the Preview button, your code is packaged with all necessary configuration files and opened in your browser.
| Framework | Preview Platform | Features |
|---|---|---|
| React | CodeSandbox | TypeScript, Tailwind CSS, framer-motion |
| Vue | CodeSandbox | Vue 3, Composition API, Vite, Tailwind CSS |
| Svelte | CodeSandbox | Svelte 4, Vite, Tailwind CSS |
| Vanilla JS | CodeSandbox | HTML/JS, Tailwind CSS |
| Flutter | DartPad | Dart, Material Design widgets |
Opening a Preview
- Generate code using Make Mode by chatting with AI
- Click the Preview button in the header or code panel
- Your browser opens with a live, editable preview
- Make changes directly in CodeSandbox/DartPad if needed
Preview Features
CodeSandbox (Web Frameworks)
- Live editing - Modify code and see changes instantly
- Full project structure - Includes package.json, config files, and dependencies
- Share & export - Get a shareable link or download the project
- Fork & save - Create your own copy to continue development
- Console & DevTools - Debug your code directly in the browser
DartPad (Flutter)
- Instant Flutter preview - See your widgets rendered live
- Hot reload - Changes update automatically
- Dart analysis - Get syntax checking and error highlighting
- Share code - Copy the URL to share with others
Preview Status Indicators
The code panel footer shows the current preview status:
- Green dot + "Ready" - Preview was created successfully. Click "Reopen" to view it again.
- Grey dot + "Uses CodeSandbox/DartPad" - No preview created yet. Click Preview to open one.
- Red dot + "Error" - Something went wrong. Check your code for syntax errors.
Troubleshooting
Preview not opening: Make sure popups are allowed for CodeSandbox/DartPad in your browser.
Code not compiling: Check the console in CodeSandbox for error messages. The generated code might have syntax issues.
Styles not showing: Tailwind CSS is included automatically. Make sure you're using Tailwind classes correctly.
Flutter preview blank: DartPad requires valid Flutter widget code. Ensure your code returns a Widget.
Alternative: Export Options
If you prefer to work locally instead of using online previews:
- Download file - Export the code as a single file
- Copy to clipboard - Paste into your own project
- Open in CodeSandbox - Same as Preview, but via the export menu