cinnabun

Cinnabun🥧

An open-source, free, lightweight and (nearly) zero-dependancy web framework.

Cinnabun comes with CSR and SSR out-of-the-box, and aims to provide powerful features by default.

The following guide is optional - check out the new CLI tool at https://www.npmjs.com/package/create-cinnabun-app to get started quicker!

Getting Started - CSR

A guide to getting started with Cinnabun & Vite.

• Run npm create vite to create a new Vite application
• Navigate to the new directory and run npm i cinnabun to add Cinnabun
• Add the following entry to your typescript config (tsconfig.json):

{
  ...
  "jsx": "preserve"
  ...
}

• Create a Vite config (vite.config.ts) like so:

import { defineConfig } from "vite"

export default defineConfig({
  esbuild: {
    jsx: "transform",
    jsxFactory: "Cinnabun.h",
    jsxFragment: "Cinnabun.fragment",
  },
})

Configuration is done! 👌

A simple application:

index.ts

import "./style.css"
import { Cinnabun } from "cinnabun"
import { App } from "./App"

const root = document.getElementById("app")!
Cinnabun.bake(App(), root)

App.ts

import * as Cinnabun from "cinnabun"
import { createSignal } from "cinnabun"

export const App = () => {
  const count = createSignal(0)
  return (
    <>
      <h1>{count}</h1>
      <button onclick={() => count.value++}>Click me</button>
    </>
  )
}

View more examples and comprehensive usage at https://github.com/Midnight-Pantry/cinnabun/tree/main/apps