🎨 PenFrame Browser Demo
Edit the PenFrame DSL on the left and see the live preview on the right!
Generate SVG
Generate PNG
Download SVG
Download PNG
Load Example
PenFrame DSL Editor
@app { width: 800, height: 400, title: "Browser Demo" } @headline "Welcome to PenFrame" { level: 1, color: "#2c3e50" } @hr @p "This is running in your browser!" { align: "center", color: "#7f8c8d" } @tabs { items: ["Home", "Features", "About"], active: 0 } @button "Click Me" { color: "#3498db", textColor: "#ffffff" } @badge "Browser Ready!" { color: "#e74c3c", textColor: "#ffffff" }
Live Preview