Skip to content
Tablewalk

The general path

Keep a tablewalk App where it pays and your own code everywhere else: a page of your own inside the App, a route of your own beside it, and a React app of your own around it.

Take it when part of the product is not an App’s to draw: a public, branded site, a screen a declared view cannot shape, or a route that is not a command (a JSON feed, a webhook another service calls). The App keeps the lists, records, commands and access; your code keeps the rest, and the two meet only through public entry points.

/                 your site, your design                  (your React app)
/schedule.json    your route, your driver                 (your server)
/staff/…          the App, inside your header             (tablewalk/react)
/api/tw/…         the App's API, sign-in and files        (tablewalk/handler)

One Node server holds all of it:

import { createServer } from 'node:http';
import { createTablewalkHandler } from 'tablewalk/handler';
import { scheduleRoute } from './schedule.ts'; // your own code


const tw = createTablewalkHandler({ config: './tablewalk.json', basePath: '/api/tw', publicOrigin, app: '.' });
const schedule = scheduleRoute('./school.db');


createServer((req, res) => {
  if (req.url?.startsWith('/api/tw')) return tw.node(req, res);
  if (req.url === '/schedule.json') return schedule(req, res);
  site(req, res); // your React app's page and files
}).listen(3000);

Your React app shows the App where it wants it:

<header className="site-header">…</header>
<TablewalkProvider endpoint="/api/tw">
  <TablewalkApp app="ladle" basePath="/staff" />
</TablewalkProvider>

And inside the App, a screen no view draws is a free-form page: pages/check-in.page.tsx, reading what it declares, writing through its commands, and drawing the platform’s blocks beside its own React.

The sample

Section titled “The sample”

Ladle, a cooking school, is all three in one small project, shipped with the package (examples/apps/ladle): the check-in page (pages/check-in.page.tsx), the school’s server and its JSON route (host/server.ts, host/schedule.ts), and the school’s site with the staff App embedded under its header (host/main.tsx, host/site.css). Its README says how to run it.

Section titled “Related”