🚀 Klover

Klover is a lightweight domain-specific language (DSL) for building UI using simple, readable .kv files. It compiles your code into clean HTML with built-in layout, styling, and state handling.

Read the Comprehensive Language Guide

✨ Why Klover?

• 🧠 Declarative UI — write what you want, not how to structure HTML
• ⚡ Fast iteration — minimal syntax, instant results
• 🎨 Auto-Responsive Layout — column, row, and auto-wrapping grid out of the box
• 📱 Mobile Optimized — automatic stacking and typography scaling for small screens
• 🔠 Semantic Typography — built-in heading variants (h1-h4, heading, subheading)
• 🔁 Reactive State — simple state + events with live updates
• 🧩 Extensible architecture — plugin-ready

📦 Installation

npm install -g klover

🚀 Usage

Build UI

klover build yourfile.kv

Generates:

output.html

Run a file

klover run app.kv

Dev mode (auto rebuild)

klover dev

Debug mode

klover debug --no-render

🧾 Example

theme dark
title "My Premium App"
icon "favicon.ico"

state count = 0

column center:
    text "Welcome to Klover" h1
    text "The UI language for hackers." subheading

    row:
        button "Decrease" onClick=set(count, count - 1)
        button "Increase" primary onClick=set(count, count + 1)
    
    text count h1

🧠 Core Concepts

Layout

column:
    text "Top"

    row:
        text "Left"
        text "Right"

State

state count = 0

Events

button "Increase" onClick=set(count + 1)

Dynamic Values

text count

Media

image "image.png"
video "demo.mp4" controls autoplay

🧩 Features

• ✅ Text, button, image, video components
• ✅ Column & row layout system
• ✅ State management
• ✅ Event handling (onClick)
• ✅ Conditional rendering (if)
• ✅ Lists (repeat ... as ...)
• ✅ Custom Page Title & Icon (title, icon)
• 🚧 Plugin system (in progress)
• 🚧 Rendering optimizations (in progress)

🎨 VS Code Extension

Klover includes a syntax highlighting extension located in:

klover-vscode/

Features

• Syntax highlighting for .kv files
• Language recognition
• Custom file icons

Install Extension

You can:

• Install from the VS Code Marketplace (search Klover)
• OR manually install the .vsix file from the klover-vscode directory

Enable File Icons

File icons require manual activation:

1. Open Command Palette (Ctrl + Shift + P)
2. Search: File Icon Theme
3. Select: Klover Icons

🏗 Project Structure

klover/
├── cli/            # CLI interface
├── parser/         # Robust DSL parser
├── runtime/        # State + V9 execution
├── renderer/       # HTML generation
├── shared/         # Node schema
├── plugins/        # Extension system
├── index.js        # Build pipeline

🧪 Development

Run locally:

node cli/index.js build

📄 License

MIT License

👤 Author

Bhumi Jha

Yugank Das

🚀 Status

Klover is under active development.

• ✅ Robust Parser: Supports complex expressions, nested parentheses, and semantic keywords.
• ✅ V9 Responsive Engine: Class-based CSS with auto-layout, breakpoints, and flex-wrapping.
• ✅ Semantic Typography: Full heading hierarchy (h1-h4, heading, subheading) built-in.
• ✅ Reactive Live State: Full re-render cycle with state persistence across updates.
• ✅ VS Code Support: Enhanced syntax highlighting and custom icons available.

💡 Vision

Klover aims to provide a simple, expressive way to build UI without the complexity of traditional frameworks.