korlix

Create a new Korlix app in seconds.

Korlix = Kor + Lix = The Core Matrix

Build frontend apps with a clean .klx language — no React setup, no router setup, no Tailwind setup, no heavy framework boilerplate.

Documentation · Examples · Report Bug · NPM Package

What is Korlix?

Korlix is a frontend-first programming language that compiles .klx source files into optimized HTML, CSS, and JavaScript.

It is designed for developers who want a simpler frontend workflow without manually wiring together React, Vite, React Router, Tailwind, toast libraries, modal libraries, and state boilerplate.

Korlix = syntax + compiler + styling engine + component system + frontend runtime

With Korlix, you write clean .klx files and the compiler generates the frontend output for you.

Why create-korlix?

create-korlix is the official project scaffolder for Korlix.

It gives you a React/Vite-like project creation flow:

npm create korlix@latest my-app

or, without a folder name:

npm create korlix@latest

If no folder name is provided, Korlix asks:

Project name (my-korlix-app):

After that, it automatically:

creates the project
sets SPA mode
installs dependencies
starts the dev server

No extra setup is required.

Quick Start

Create with a folder name

npm create korlix@latest my-app

The creator will scaffold the project, install dependencies, and start the dev server.

Open:

http://localhost:3000

Create without a folder name

npm create korlix@latest

Korlix will ask for the project name:

Project name (my-korlix-app):

Then it creates the project, installs dependencies, and starts the dev server.

Other package managers

# npm
npm create korlix@latest my-app

# yarn
yarn create korlix my-app

# pnpm
pnpm create korlix my-app

# bun
bun create korlix my-app

What gets created?

Running:

npm create korlix@latest my-app

creates a ready-to-run Korlix project:

my-app/
├── korlix.config.json
├── package.json
├── public/
│   └── index.html
├── src/
│   ├── main.klx
│   ├── app.klx
│   ├── pages/
│   │   └── index.klx
│   └── theme/
│       └── tokens.klx
└── dist/

The project is created in SPA mode by default.

Generated npm scripts

Inside the generated project:

npm run dev
npm run build
npm run preview
npm run check

These map to the Korlix CLI:

korlix dev
korlix build
korlix preview
korlix check

Example Korlix syntax

page home route "/":

  state count: int = 0

  section .min-h-screen .center .bg-dark:

    h1 .text-6xl .font-black .text-primary count

    div .flex .gap-4:

      btn .primary "+" on:click:
        count = count + 1
        toast success "Updated"

      btn .danger "Reset" on:click:
        count = 0

This defines a complete interactive page with:

routing
state
events
buttons
toast interaction
utility styling

No JSX. No useState. No external router setup.

Korlix language features

Korlix is built around a simple frontend syntax.

Pages and routing

page about route "/about":

  meta:
    title "About"
    description "About this app"

  section .py-20 .px-8:
    h1 .text-4xl .font-bold "About"

State and events

page counter route "/counter":

  state count: int = 0

  btn .primary "Increment" on:click:
    count = count + 1

  p "Count: " count

Components

component feature-card:

  prop title: string
  prop description: string

  card .p-6 .rounded-xl .bg-surface:
    h3 .text-xl .font-bold title
    p .text-muted description

Layout-ready structure

layout main:

  navbar:
    link href="/" "Home"
    link href="/about" "About"

  slot

  footer:
    p "Built with Korlix"

Built-in frontend workflow

Korlix is designed to reduce repeated frontend setup.

| Need | Traditional setup | Korlix approach | | ------------ | --------------------- | -------------------------- | | App creation | Vite/React setup | npm create korlix@latest | | Routing | Router package | Korlix pages/routes | | Styling | Tailwind setup/config | Built-in utility classes | | State | Hooks/boilerplate | state count: int = 0 | | Toasts | Toast library | toast success "Saved" | | Modals | Modal library | Built-in modal syntax | | Build | Bundler config | korlix build | | Dev server | Tooling setup | korlix dev |

Styling system

Korlix includes a utility-first styling system.

Example:

section .min-h-screen .bg-background .text-foreground .flex .items-center .justify-center:

  div .max-w-5xl .text-center:
    h1 .text-6xl .font-black .text-primary "Hello Korlix"
    p .text-xl .text-muted "Build faster with less setup."

Common utility groups include:

layout
spacing
typography
colors
borders
radius
shadow
responsive variants
hover/focus states
dark mode utilities

Hot Drop development

The Korlix dev server supports fast local development.

npm run dev

or:

korlix dev

The dev server starts at:

http://localhost:3000

During development, Korlix watches your .klx files and updates the browser.

Platform support

The Korlix npm package currently includes binaries for:

Linux x64
Windows x64

macOS support is planned.

Requirements

For create-korlix:

Node.js 18+
npm, yarn, pnpm, or bun

You do not need to install Rust separately when using the npm package.

The Rust compiler binary is included through the korlix npm package.

CLI reference

After the project is created, you can use:

korlix dev
korlix build
korlix preview
korlix check

Or through npm scripts:

npm run dev
npm run build
npm run preview
npm run check

Project creation flow

With name:

npm create korlix@latest my-app

Without name:

npm create korlix@latest

Korlix asks for the project name, creates the app, installs dependencies, and starts the dev server.

Why Korlix?

Korlix is for developers who want:

a frontend-first language
less boilerplate
built-in routing
built-in styling
built-in UI interactions
simple state syntax
fast app creation
clean HTML/CSS/JS output
a lightweight alternative to heavy frontend setup

It is not trying to be React with different syntax. It is a compiler-first frontend language.

Publishing notes for maintainers

Publish the main compiler package first:

cd npm/korlix
npm publish

Then publish the creator package:

cd npm/create-korlix
npm publish

Reason:

create-korlix depends on korlix

If a version is already published, bump the version before publishing again.

Example:

0.1.0 → 0.1.1

Contributing

Contributions are welcome.

git clone https://github.com/korlix-lang/korlix
cd korlix
cargo build --release

Project areas:

compiler
lexer
parser
codegen
style engine
runtime
CLI
dev server
templates
documentation

Open issues and pull requests on GitHub:

https://github.com/korlix-lang/korlix

Roadmap

Current direction:

Phase 1: Compiler core, SPA mode, starter app, dev server
Phase 2: More diagnostics, stronger validation, macOS binary support
Phase 3: VS Code extension, docs website, templates
Phase 4: Stable language spec

License

MIT

Korlix = Kor + Lix = The Core Matrix

Build the frontend. Without the complexity.