Build server-rendered user interfaces using JSX components. No comprehensive frontend framework required.
Write views using familiar JSX syntax.
Create reusable layouts for your pages.
Server-side rendering for better SEO.
Powered by Bun's native JSX transpiler.
Views are just functions that return JSX. Save them in `src/views`.
1// src/views/welcome.tsx2export default function Welcome({ name }: { name: string }) {3return (4<div className="p-10">5<h1>Hello, {name}!</h1>6<p>Welcome to CanxJS</p>7</div>8);9}
Use the `view()` helper in your controllers.
1import { Controller, Get, view } from "canxjs";23@Controller()4export class HomeController {5@Get()7async index() {8// Renders src/views/welcome.tsx9return await view('welcome', { name: 'World' });10}11}
1import { createLayout } from "canxjs";23const MainLayout = ({ children, title }) => (4<html>5<head><title>{title}</title></head>6<body>{children}</body>7</html>8);910// Usage11export default createLayout(MainLayout);
CanxJS views are server-rendered only. This means standard React hooks likeuseState, useEffect, or event handlers like onClick inside your JSX will not work and may cause errors.
For client-side interactivity, we recommend using modern, lightweight libraries that work great with server-rendered HTML, such as Alpine.js or vanilla JavaScript script tags.
1// src/views/counter.tsx2export default function Counter() {3return (4<div x-data="{ count: 0 }" className="p-4">5<span x-text="count" className="text-xl font-bold"></span>6<button7@click="count++"8className="ml-4 px-4 py-2 bg-blue-500 rounded"9>10Increment11</button>12{/* Alternatives */}14<section className="mb-16">15<h2 className="text-2xl font-semibold text-foreground mb-4">Alternative View Engines</h2>16<div className="rounded-2xl bg-card border border-border p-6 space-y-4">17<p className="text-muted-foreground leading-relaxed">18CanxJS uses <strong>JSX/TSX</strong> as its native first-class view engine because it provides the best performance (compiled directly by Bun) and developer experience (full type safety).19</p>20<p className="text-muted-foreground leading-relaxed">21<strong>Can I use other engines like EJS or Handlebars?</strong><br />22Yes! While JSX is the default, CanxJS is just JavaScript. You can install any template engine (like <code className="text-primary">ejs</code> or <code className="text-primary">handlebars</code>) from npm and use it in your controllers, just like you would in Express. However, you will miss out on the performance benefits of the native JSX renderer.23</p>24</div>25</section>2627{/* Next Steps */}28<script src="//unpkg.com/alpinejs" defer></script>29</div>30);31}