Package Exports

renku
renku/auth
renku/bun
renku/client
renku/cloudflare
renku/cloudflare/worker
renku/data
renku/dom
renku/jsx-dev-runtime
renku/jsx-runtime
renku/otel
renku/server
renku/server-functions
renku/ui
renku/ui/theme
renku/vite

Readme

Renku

Dependencies

signal-polyfill for reactivity
capnweb for RPC
@sqlite.org/sqlite-wasm for client data storage

Getting started

bun create github.com/renkudev/template-bun

bun create github.com/renkudev/template-vite

CSS Classes

Renku uses the class prop to apply CSS classes to its components (as opposed to className in React). Using className will still work though. The prop accespts either a string or an array of strings.

<ul>
  <li><a href="/about" class={["link", "active"]}>About</a></li>
  <li><a href="/contact" class="link">Contact</a></li>
</ul>

Signals

import { createSignal, createComputed, type FunctionComponent } from "renku";

export const Counter: FunctionComponent<{ start: number }> = ({ start }) => {
  const counter = createSignal(start);
  const isEven = createComputed(() => counter.get() % 2 === 0);

  return (
    <div>
      <button type="button" onclick={() => counter.set(counter.get() + 1)}>
        Counter: {counter.get()} ({isEven.get() ? "even" : "odd"})
      </button>
    </div>
  );
};

Context

import { createContext } from "renku";

export const context: Context<{
  counter: Signal.State<number>;
}> = createContext();

export const Parent: FunctionComponent = ({
  children,
}) => {
  const counter = createSignal(0);
  context.set({ counter });

  return <div>{children}</div>;
};

export const Child: FunctionComponent = ({
  children,
}) => {
  const counter = createSignal(0);
  context.get({ counter });

  return (
    <div>
      <button type="button" onclick={() => counter.set(counter.get() + 1)}>
        Counter: {counter.get()}
      </button>
    </div>
  );
};

export const App: FunctionComponent = () => {
  return (
    <Parent>
      <Child />
      <Child />
    </Parent>
  );
};