Introducing WebLite DSL + Try-It Editor: YAML Meets Web Design Simplicity!

Schrodingerssk — Tue, 24 Jun 2025 17:35:48 +0000

Hey devs! 👋
I’m excited to introduce WebLite DSL, a minimalist domain-specific language that lets you build clean static websites with just YAML — and its perfect companion, the WebLite Try-It Editor, a real-time playground to bring your .wl sites to life instantly. 🔥

🧠 What is WebLite DSL?

WebLite is a simple yet powerful DSL (Domain Specific Language) that transforms human-readable .wl (YAML) files into full-blown HTML and CSS websites — no need to write a single HTML tag yourself!

Home:
Hero:
- "Title >> big centered red": "Hello WebLite*"
- "Description >> small gray": "Your YAML-powered site starts here!" *

This snippet magically becomes:

Hello WebLite

Your YAML-powered site starts here!
💡 *

Highlights:
🔁 Components: Create reusable layout blocks
🎨 Inline Styling: Use aliases like big, red, centered, or raw CSS
📄 Multi-page Support: Define pages like Home, About, Contact in one file
📦 Zero dependencies on the frontend — it’s pure HTML/CSS

💻 Try It Online — Instantly!

Writing YAML is one thing. Seeing it come alive instantly? That’s what the WebLite Try-It Editor does!

👉 [Live Demo (https://weblite-tryit.vercel.app/)]
⚙️ Built with MERN stack on the frontend and a Python Flask backend that runs the builder.py engine.

*👇 Features: *
📝 Monaco-based code editor with syntax highlighting
🌗 Dark/Light theme toggle
🖼 Real-time browser preview via iframe
📁 No account needed — paste YAML and hit Run

🔗 GitHub Repositories
www.github.com/scgssk/WebLite-DSL
🛠️ WebLite DSL (Builder Engine)

🧪 Try-It Editor (Frontend & Flask API)
🧩 Built With PyYAML, Flask, uuid, shutil React, Monaco Editor, Render (for deployment)
❤️ Lots of modularity & markdown-like syntax handling
🛠 Roadmap
[x] Dark mode
[x] Components
[x] Responsive Editor UI
[x] One-click hosting via Render
[ ] Custom themes & animations
[ ] Export to zip
[ ] Shareable URLs with your .wl site
[ ] Minify build (weblite site.wl --minify)

👋 Final Thoughts

Whether you're building personal pages, documentation sites, or teaching HTML/CSS concepts visually — WebLite DSL + Try-It gives you the cleanest workflow you’ve seen.

✨ All from a .wl file.

Would love to hear your feedback, ideas, or contributions!

Let’s make the web more readable, one YAML block at a time. 💛

YAML #WebDev #OpenSource #React #Python #Flask #SideProject #Hackathon #DeveloperTools

DEV Community: Schrodingerssk

Introducing WebLite DSL + Try-It Editor: YAML Meets Web Design Simplicity!

Hello WebLite

YAML #WebDev #OpenSource #React #Python #Flask #SideProject #Hackathon #DeveloperTools