🎮Framework Playground

Write VanJS code and see it render live! Perfect for testing and learning.

Development Sandbox

Unstructured play across all framework areas - JavaScript, API calls, routing configs, and SQL queries. Test ideas in real-time.

✨ Live Preview🔧 Multi-Language🚀 Instant Execution

💡 Want structured learning? Check out the Framework Guide for interactive tutorials.

Code Editor

Live Preview

📚 How to Use

• Select an example from dropdown or write your own code

• The code should return a VanJS element (van.tags func)

• Click "Run Code" to execute and see the preview

• All VanJS features are available: van.state(), van.tags, etc.

• You can use Tailwind classes for styling

• The last expression should be the component to render when writing components

💡 Tips

• Use van.state() for reactive values

• Wrap reactive values in arrow functions: () => myState.val

• Use van.tags to destructure the HTML elements you need

• The playground has access to all Tailwind classes

• Return empty string '' for conditional rendering, not null or false

Explore vwf

Discover what vwf can do