Examples
Everything below lives in the repository and runs from the workspace root — no publishing required while the compiler and several targets are still in-repo.
bash
git clone https://github.com/rasenjs/rasen.git
cd rasen
yarn install
yarn build # the examples import the workspace packagesRunnable examples
| Example | Command | What it shows |
|---|---|---|
| web | yarn examples:web:dev | DOM, Canvas 2D, JSX, transitions, lazy components, HMR |
| canvas-2d | yarn workspace @rasenjs/examples-canvas-2d dev | the shape gallery and animation basics |
| gfx | yarn examples:webgl:dev | WebGL painting the canvas-2d API, batching, cameras |
| ssr | yarn examples:ssr:dev | renderToString + hydrate, isomorphic routing |
| router-demo | — | the router on both targets |
| react-native | see its README | an RN app with no React |
| rn-dom-test | see its README | the Fabric document layer directly |
| gpui | see its README | native desktop window, Tailwind-style classes |
| lvgl | native simulator | embedded target (LVGL + QuickJS) |
| mario | yarn examples:mario:dev | a platformer: sprites, input, frame scheduling |
| racing | yarn examples:racing:dev | a top-down racer, Kenney starter kit |
| fps | yarn examples:fps:dev | a first-person view with sprites and assets |
| craft | yarn examples:craft:dev | voxel-style world, WebGL |
| kenney-fps, kenney-racing | — | 3D content in the GL target |
| nikke-viewer | yarn examples:nikke-viewer:dev | Spine character viewer with routing and drawers |
| perry-nikke-viewer | yarn examples:perry-nikke-viewer:build | the same viewer compiled ahead-of-time with Perry |
| perry-spine, perry-reactive-test | — | the native AOT path |
The canonical template — what a new app looks like — is templates/rasen-ts (SSR + hydration, isomorphic routing, signals, compiler).
Code walkthroughs
- Counter (DOM + React Native) — one component, two hosts
- Todo list —
each, DOM properties, computed text - Canvas animation — signals driving shapes
- SSR — rendering to a string
The Interactive Playground page renders the same snippet sources the repository ships (www/snippets/*), so the code you read there is exactly the code that is built and type-checked.