Pup9191 Language

Official VS Code extension for Pup9191 — A modern Zero-CSS Declarative UI Programming Language that lets you build beautiful web interfaces with pure declarative syntax. No CSS required. No JavaScript boilerplate. Just clean, readable code that compiles to production-ready HTML.

✨ Quick Features

📦 Installation

From VS Code Marketplace

1. Open Visual Studio Code
2. Press Ctrl+Shift+X (or Cmd+Shift+X on macOS)
3. Search for "Pup9191 Language"
4. Click Install

From VSIX

code --install-extension pup9191-2.1.1.vsix

From Open VSX

🚀 Getting Started

Zero-Config Run (Recommended)

1. Create a file with the .pup9191 extension
2. Write your Pup9191 code
3. Click the ▶ Run button in the editor title bar
4. Your program compiles and opens in the browser automatically

No launch.json required. The extension handles everything.

With launch.json

For custom configurations, create .vscode/launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pup9191",
            "request": "launch",
            "name": "Run Pup9191 Program",
            "program": "${file}",
            "mode": "run"
        },
        {
            "type": "pup9191",
            "request": "launch",
            "name": "Build Pup9191 Program",
            "program": "${file}",
            "mode": "build"
        }
    ]
}

Modes:

• run — Compile and open a live browser preview at http://localhost:9191
• build — Compile to dist/index.html only

Compiler Requirement

The Run button requires the Pup9191 compiler (pup.exe on Windows, pup on macOS/Linux) to be installed and available on your PATH.

# Verify the compiler is installed
pup version

⬇️ Download the Compiler

🎨 Syntax Highlighting

Full TextMate grammar with semantic colorization for:

• 16 UI Components — Pup9191Text, Pup9191Button, Pup9191Input, Pup9191Card, Pup9191Image, and more
• 8 Layout Containers — Pup9191Container, Pup9191Box, Pup9191Stack, Pup9191Grid, etc.
• Client-Side Router — Pup9191Router, Pup9191Route, Pup9191NavLink, navigate, back, replace
• Animation Suite — fade, scale, rotate, slideLeft, slideRight, slideUp, slideDown, bounce, zoom, pulse, flip, infinite
• Event Handlers — Pup9191Click, onInput, onChange, onFocus, onBlur, onKeyDown, onMouseOver
• Properties — padding, margin, color, background, round, shadow, bold, italic, size, width, height, and many more

Syntax highlighting in action — replace with actual screenshot

🧩 Code Snippets

30+ carefully crafted snippets to accelerate your development:

Snippet autocomplete — replace with actual screenshot

▶ Run Button

Native VS Code Run button integration. Click ▶ Run in the editor title bar to compile and launch any .pup9191 file instantly.

Run button in editor title bar — replace with actual screenshot

🐛 Debug Adapter

Full Debug Adapter Protocol (DAP) implementation:

• Live Debug Console — stdout, stderr, and compiler output streamed in real time
• Exited/Terminated Events — Proper lifecycle management
• Zero-Config Launch — Works without any launch.json
• Inline Adapter — Extension-host-local, no TCP server required

🐾 Pup9191 Run: app.pup9191
   Compiler: C:\...\pup.exe
   File:     C:\...\app.pup9191

  [1/4] Reading app.pup9191...
  [2/4] Tokenizing...
  [3/4] Parsing AST...
  [4/4] Generating HTML & internal CSS...

✅ Pup9191 program launched successfully.

Debug Console output — replace with actual screenshot

🔴 Diagnostics

Compiler errors and warnings are parsed and displayed in VS Code's Problems panel with precise file, line, and column information. Errors appear inline in the editor with squiggly underlines.

Problems panel with error diagnostics — replace with actual screenshot

🗂️ File Icons

Custom file icon theme that displays the Pup9191 logo for all .pup9191 files in the Explorer sidebar and editor tabs. Enable via File > Preferences > File Icon Theme > Pup9191 File Icons.

File Explorer with custom icons — replace with actual screenshot

💻 Terminal

Use the Pup9191 compiler directly from the terminal:

# Compile and launch live preview
pup run app.pup9191

# Compile to dist/index.html
pup build app.pup9191

# Display compiler version
pup version

Terminal output — replace with actual screenshot

📝 Example Code

Pup9191 {
    let title = "Welcome to Pup9191 V2"
    let count = 0

    Pup9191Container {
        padding 40

        Pup9191Card {
            padding 24
            round 12
            shadow
            animate bounce
            duration 0.8s

            Pup9191Text title {
                color #2563eb
                size 32
                bold
            }

            Pup9191Spacer { height 16 }

            Pup9191Button "Increment Counter" {
                background #2563eb
                color white
                padding 12
                round 8
                Pup9191Click {
                    add count = 1
                }
            }
        }
    }
}

🎯 Why Pup9191?

📚 Documentation

Visit the official website for:

• Language reference
• Component API documentation
• Tutorials and guides
• Example projects
• Compiler installation

🗺️ Roadmap

• Syntax highlighting & snippets
• Run button & Debug Adapter
• Diagnostics & Problems panel
• File icon theme
• Language Server Protocol (LSP)
• IntelliSense & autocomplete
• In-editor preview
• Pup9191 V3 debugger (breakpoints, step-through, variable inspection)

🤝 Support

• Website: https://pup9191.github.io/Pup9191web/
• GitHub: https://github.com/Pup9191/Pup9191
• Issues: https://github.com/Pup9191/Pup9191/issues
• Marketplace: VS Code Marketplace

📄 License

This extension is licensed under the MIT License.