Code Playground - Troubleshooting
Get help with common Code Playground issues and find answers to frequently asked questions.
Frequently Asked Questions
What is the Adobe Express Code Playground?
The Adobe Express Code Playground is a lightweight code editor designed for fast and effortless prototyping. It allows you to experiment with simple code snippets to build and refine add-ons, quickly turning ideas into functional features.
Is it free to use?
Yes, the Code Playground is free to use. You can access all its features without any cost and start prototyping and creating add-ons right away.
Do I need coding experience?
While some basic coding knowledge is helpful, Playground is designed to be beginner-friendly and accessible. Its intuitive interface and simple code snippets make it easier for both experienced developers and those newer to coding to create and test add-ons.
How do I start creating add-ons?
Getting started is simple. Activate the playground, experiment with code snippets, and start building your add-ons. Use the real-time preview feature to see your changes instantly and iterate on your ideas with ease.
Where can I go for help?
Join our Discord to chat with the add-on developer community.
I can't find my downloaded zip file. Where is it?
Check your browser's default download location, you can also review your browser's download settings to see where files are being saved. If you have blocked downloads in your browser, you may need to unblock the download.
Common Issues
Code Playground Not Opening
Problem: The Code Playground window doesn't open when you click the toggle.
Solutions:
- Make sure Add-on Development mode is enabled in your Adobe Express settings.
- Try refreshing the page and attempting again.
- Check if you have a document open in Adobe Express.
- Clear your browser cache and cookies.
- Try using a different browser.
Code Not Running
Problem: Your code doesn't execute when you click "Run Code".
Solutions:
- Check for syntax errors in your code.
- Ensure you're using the correct mode (Script vs Add-on) for your use case.
- Verify that all required APIs are properly imported.
- Check the browser console for error messages.
- Sessions that are in the Archived state cannot be run. You can download your code to continue working on it locally, or copy it to a new session.
- Try running a simple test code first.
Session Not Saving
Problem: Your work is not being saved between sessions.
Solutions:
- Check auto-save settings: Code is not saved automatically. Please read the Save Your Work section for more details on how to save.
- Make sure you're not in incognito/private browsing mode
- Try saving manually using the keyboard shortcut (Ctrl + Shift + S or Cmd + Shift + S)
- Clear browser cache and try again
- Check if you have sufficient storage space—you might have reached the maximum number of sessions per user. Delete unused sessions to free up space.
- Any changes to Archived sessions are not saved.
Performance Issues
Problem: The playground is running slowly or freezing.
Solutions:
- Avoid heavy computations in the iframe context.
- Use async/await properly for document operations.
- Test with smaller documents first.
- Break down large operations into smaller chunks.
- Close other browser tabs to free up memory.
API Errors
Problem: Getting errors when using Document APIs.
Solutions:
- Check if you need to enable experimental APIs in the manifest.
- Verify that you're using the correct API syntax.
- Ensure you're in the right mode (Script vs Add-on).
- Check the API documentation for correct usage.
- Try using the API in a simpler context first.
UI Not Displaying
Problem: Your add-on UI is not showing up in Add-on Mode.
Solutions:
- Check that your HTML is properly structured.
- Verify that your CSS is not hiding elements.
- Ensure your JavaScript is running without errors.
- Check the browser console for error messages.
- Try a simple HTML structure first.
Communication Issues
Problem: Communication between iframe and Document Sandbox is not working.
Solutions:
- Verify that you're using the correct communication APIs.
- Check that message types and payloads are properly structured.
- Ensure both sides are listening for messages.
- Test with simple messages first.
- Check the Communication API documentation
Browser Compatibility
Supported Browsers
Code Playground works best with the latest versions of the following browsers:
- Chrome
- Firefox
- Safari
- Edge
Browser-Specific Issues
Chrome:
- Make sure you have the latest version.
- Check if any extensions are interfering.
- Try disabling extensions temporarily.
Firefox:
- Ensure JavaScript is enabled.
- Try disabling enhanced tracking protection.
Safari:
- Make sure JavaScript is enabled.
- Check if content blockers are interfering.
- Try disabling private browsing mode.
Edge:
- Ensure you're using the Chromium-based version.
- Check if tracking prevention is affecting functionality.
- Try disabling extensions.
Getting Additional Help
Community Support
- Discord Community: Chat with fellow developers and get real-time help.
- GitHub Issues: Report bugs and request features.
- Documentation: Check our comprehensive guides and API references.
Documentation Resources
- API References: Complete reference for all available APIs.
- How-To Guides: Step-by-step tutorials for common tasks.
- Code Samples: Example code to get you started.
- Local Development: Set up a full development environment.
Reporting Issues
When reporting issues, please include:
- Browser and version
- Operating system
- Steps to reproduce the issue
- Expected vs actual behavior
- Console error messages (if any)
- Screenshots or screen recordings (if helpful)
Best Practices for Avoiding Issues
Code Organization
- Use clear, descriptive variable and function names.
- Comment your code for better maintainability.
- Break down complex functionality into smaller functions.
- Test your code incrementally.
Error Handling
- Always include proper error handling in your code.
- Use try-catch blocks for async operations.
- Log errors to the console for debugging.
- Test edge cases and error conditions.
Performance
- Avoid heavy computations in the iframe context.
- Use async/await properly for document operations.
- Test with different document sizes and complexity.
- Monitor memory usage and performance.
Testing
- Test your add-on with various document types.
- Try different screen sizes and resolutions.
- Test with different user permissions.
- Validate your code before sharing.
Next Steps
- Script Mode Guide: Learn how to use Script Mode effectively.
- Add-on Mode Guide: Build complete add-ons with UI.
- Workflow & Productivity: Master keyboard shortcuts and session management.
- Local Development: Set up a full development environment.
