xoong
Reference Search
Standards-first web framework

One pot.
Whole app.

Xoong is a small web framework that cooks with what the browser already gives you. Declare a screen, point it at your OpenAPI document, write plain CSS. That is the whole job.

Get started See it running
  • 0 runtime deps
  • 0 shadow DOM
  • 0 inline scripts
people.html
<xo-view get="listPeople">
  <xo-table columns="name,email,role"
            sortable></xo-table>
</xo-view>

<!-- loading, errors, cache and types
     come from your OpenAPI document -->
The ingredients

Few things, chosen well.

Mainstream frameworks make you chase them. Xoong keeps its surface tiny and lets the platform do the heavy lifting.

  • 01

    Standards first

    Custom elements, the DOM, ES modules, the History API, native <dialog> and Intl. No virtual DOM, no JSX, no hooks.

  • 02

    Light DOM only

    Your CSS and your tests see the real DOM. No Shadow DOM and no scoped-style magic between you and the page.

  • 03

    OpenAPI is the contract

    xoong sync reads your spec and writes typed operations. Forms and tables are drawn from the schemas.

  • 04

    Zero runtime deps

    Upgrading Node never breaks the runtime, because the runtime runs in the browser and brings nothing along.

  • 05

    Strict CSP ready

    xoong build outputs static files that run under script-src 'self'. No inline code, ever.

  • 06

    Made for AI and people

    One way to do each thing, a short llms.txt, an MCP server, and xoong check with messages that contain the fix.

Taste it

This table is the real thing.

Sort a column, search, tick rows and delete them. There is no server: a function in the page plays the API, and everything else is xoong.

{role} 
<xo-view get="listPeople">
  <xo-table columns="name,email:E-mail,role" sortable filters="name:Search by name" selectable page-size="5" empty="Nobody here">
    <span slot="role" class="badge">{role}</span>
    <button class="danger" xo-click="deletePerson" xo-confirm="Delete {name}?" xo-notice="Deleted">Delete</button>
    <button slot="bulk" class="danger" xo-click="deletePerson" xo-selected>Delete ticked</button>
  </xo-table>
</xo-view>
The recipe

Three steps from spec to screen.

  1. Sync your API

    Generate typed operations from the OpenAPI document you already have.

    npx xoong sync openapi.json

  2. Write the screen

    HTML with a few xo-* elements. Style it with plain CSS and custom properties.

    <xo-view get="listPeople"><xo-table sortable></xo-table></xo-view>

  3. Serve it hot

    Run the dev server, then build static output for strict-CSP hosting.

    npx xoong dev
npx xoong build --out dist

Hungry for less framework?

Xoong is a 0.0.x prototype and the syntax is still Draft. Come cook with us early.

InstallHow it works