Tkeron Documentation

What is Tkeron?

CLI build tool for vanilla web development. Compiles TypeScript, organizes HTML with components, outputs static files.

What it does

Compiles TypeScript to JavaScript
Inlines HTML components (.com.html)
Executes TypeScript components (.com.ts) at build time
Converts Markdown components (.com.md) to HTML
Runs pre-rendering scripts (.pre.ts)
Copies assets
Dev server with hot reload

Build time: Components execute, TypeScript compiles Runtime: Your vanilla JavaScript runs in the browser

Key Features

HTML Components — Organize markup:

<!-- header.com.html -->
<header><h1>Site Title</h1></header>

TypeScript Components — Dynamic generation:

// user-badge.com.ts
const count = com.getAttribute("count") || "3";
com.innerHTML = `<ul>${generateItems(count)}</ul>`;

Markdown Components — Content in Markdown:

<!-- about-section.com.md -->

## About Us

We are a **small team** building great tools.

Pre-rendering — DOM manipulation at build time:

// index.pre.ts
const data = await fetch("https://api.example.com/data");
document.getElementById("content").innerHTML = processData(data);

System Requirements

Bun runtime (v1.3.9 or higher) — Install Bun
Operating systems: Linux, macOS, Windows (via WSL)
No Node.js required

Project Convention

Tkeron uses a fixed directory convention:

Source: websrc/
Output: web/

No configuration needed. Run tk build and tk dev from your project root.

Documentation

Getting Started

Getting Started Guide — Installation, first project, basic workflow

Core Concepts

HTML Components — Reusable HTML with .com.html
TypeScript Components — Dynamic components with .com.ts
Markdown Components — Content in Markdown with .com.md
Pre-rendering — Transform HTML at build time with .pre.ts

Reference

CLI Reference — Complete command-line documentation
Testing — Test your builds with getBuildResult()
Best Practices — Patterns and anti-patterns
Common Issues — Troubleshooting guide
MCP Server — AI agent integration

Quick Example

Create a simple component:

<!-- user-card.com.html -->
<div class="card">
  <h3>User Card</h3>
  <p>This is a reusable component</p>
</div>

Use it in your page:

<!-- index.html -->
<!DOCTYPE html>
<html>
  <body>
    <user-card></user-card>
    <user-card></user-card>
  </body>
</html>

Build it:

tk build

Result: Both <user-card> elements are replaced with the component's HTML. No runtime JavaScript needed.

Build Process

websrc/               Build Steps              web/
├── index.html    →  1. .pre.ts           →  ├── index.html
├── index.ts         2. Iterative loop:      ├── index.js
├── index.pre.ts        a. .com.ts
├── nav.com.html        b. .com.html
└── card.com.ts         c. .com.md
                        (up to 10 iterations)
                     3. TypeScript
                     4. Assets

Component files (.com.html, .com.ts, .com.md, .pre.ts) are not copied to output.

Ready to start? Head to the Getting Started Guide.