@retrofit-ui/spa-solid-shoelace

The prebuilt browser renderer for retrofit-ui. Your server emits JSON specs; this package draws them. Built on SolidJS + Shoelace web components, shipped as static assets — no frontend build step in your project, no bundler config, no framework buy-in.

Three ways to consume it depending on what your server looks like.

Install

npm install @retrofit-ui/spa-solid-shoelace

No peer dependencies required for the prebuilt bundle. The compiled SolidJS, Shoelace, and Zod runtime are all included.

Usage

1. Node server — serve the bundle as static assets

import express from "express";
import { distPath } from "@retrofit-ui/spa-solid-shoelace";

const app = express();
app.use("/retrofit-ui", express.static(distPath));

// Your API returns retrofit-ui specs; the SPA at /retrofit-ui/ renders them
app.get("/api/users", (_, res) => res.json({ /* your TableSpec */ }));

distPath is the absolute path to the built SPA. The Vite build uses base: "./" so it works both at the root path and under any subpath.

2. Standalone renderer — drop into any HTML page

<link rel="stylesheet"
      href="https://unpkg.com/@retrofit-ui/[email protected]/dist/renderer/spa-solid-shoelace.css">
<script type="module"
        src="https://unpkg.com/@retrofit-ui/[email protected]/dist/renderer/retrofit-ui.js">
</script>

<retrofit-ui endpoint="/api/users"></retrofit-ui>

3. Web component — embed inside an existing frontend

<script type="module"
        src="https://unpkg.com/@retrofit-ui/[email protected]/dist/components/spec-renderer.js">
</script>

<spec-renderer endpoint="/api/products"></spec-renderer>

Works inside React, Vue, Svelte, Angular, or any other frontend that speaks HTML.

Production tip: always pin a specific version (as shown above) and add Subresource Integrity integrity="sha384-..." crossorigin="anonymous" attributes to CDN-loaded scripts and stylesheets. This protects against a compromised CDN serving modified assets. You can generate hashes with openssl dgst -sha384 -binary <file> | openssl base64 -A or via srihash.org.

See also

| Package | What it does | |---|---| | @retrofit-ui/core | The type + schema definitions this renderer consumes | | @retrofit-ui/builder-zod | Server-side builders for producing the specs this package renders | | retrofitui.dev | Live demos, integration guides, and the full API reference |

License

MIT