What is KoppaJS?

KoppaJS is a lightweight, modular frontend framework designed to simplify development without sacrificing flexibility. It provides a pragmatic approach to building modern web applications, focusing on:

• Simplicity: Minimal boilerplate and intuitive APIs.
• Performance: Optimized for speed and scalability.
• Modularity: Build only what you need, when you need it.

Features

• Declarative Components: Define components with .kpa files.
• Reactive State Management: Built-in reactivity for seamless updates.
• Lifecycle Hooks: Control component behavior with hooks like mounted, updated, and beforeUpdate.
• Integration-Friendly: Works with existing tools and libraries.
• TypeScript Support: First-class TypeScript support for safer, more maintainable code.

Getting Started

The fastest way to start a new KoppaJS project:

pnpm create koppajs my-app
cd my-app
pnpm install
pnpm dev

This scaffolds a ready-to-run project with Vite, TypeScript, and two sample components.

You can also use npm or npx:

npm create koppajs my-app
npx create-koppajs my-app

Manual Setup

If you prefer to add KoppaJS to an existing project:

1. Install the core library and Vite plugin:

   pnpm add @koppajs/koppajs-core
   pnpm add -D @koppajs/koppajs-vite-plugin

2. Create your first component:

   import { Core } from '@koppajs/koppajs-core'
   
   Core.take(
     {
       state: { count: 0 },
       methods: {
         increment() {
           this.state.count++
         },
       },
     },
     'counter',
   )
   
   Core()

3. Run your application: Use the KoppaJS Vite plugin to build and serve your app.

Roadmap

• 🌐 Official Website — koppajs.org with documentation, guides, and examples
• 🔌 Official Plugins
  • Router
  • Script Loader
  • DSGVO / Cookie Consent Banner
• 🧩 Ecosystem Growth — Community plugins, starter templates, and integrations
• 💻 VS Code Extension — Syntax highlighting, IntelliSense, and tooling for .kpa files

Support

For support, visit our GitHub Issues.

Community & Contribution

We welcome contributions! Check out our CONTRIBUTING.md for guidelines.