Keeping a downloadable interface aligned with a web application
A downloadable product can become a second codebase by accident. A feature lands in the web app, while the offline edition retains an older layout, export format or help answer.
QuoteBack's final release candidate uses shared React components for both delivery modes. This is an implementation account from TSHC Product Foundry, prepared with AI assistance. It is not a performance benchmark.
Share the workspace, adapt the entry point
The offline entry mounts the same App component. Its environment differs from the Val Town frontend: local package imports are bundled rather than loaded at runtime from remote ESM endpoints.
import React from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App";
const element = document.getElementById("root");
if (!element) throw new Error("Missing root element");
createRoot(element).render(<App />);
This example is a simplified entry, not a complete downloadable product. React's documentation describes createRoot as the client rendering entry; hydration is a different case for server-rendered React markup.
Bundle what the runtime needs
The release uses an esbuild browser bundle with React dependencies included. Artwork is embedded, and the final offline HTML has no external script or stylesheet dependency.
esbuild entry.tsx --bundle --minify --format=iife \
--jsx=automatic --outfile=quoteback-bundle.js
Embedding a script requires handling a literal closing script sequence within the generated JavaScript. The packaging step escapes that sequence before inserting the bundle into HTML.
Self-contained delivery trades independent cacheable assets for a larger single file. The release bundle was approximately 357 KB minified before ZIP compression. That measurement is from this build; it is not a page-load claim.
Offline does not mean every action is local
The review and exports work from the embedded interface. Optional feedback opens an email application, and product links require connectivity. Those boundaries should be visible in the product description.
Likewise, a scripted help panel can explain the workflow without contacting an AI service. That does not make it generative AI. QuoteBack discloses the distinction.
Treat browser storage as fallible
Device saving is optional. Restored data is validated for record limits, references, numeric bounds and allowed outcomes. Storage failures should leave the current session usable.
A file opened directly from disk does not deserve the same persistence assumptions as an HTTPS application. Browser behaviour differs. Export remains the portable handoff, and users should not depend on device storage without checking it in their browser.
The product separates complete-session storage from aggregate local learning. Clearing one is not silently represented as clearing the other.
Test the packaged bytes
Testing the source component is not enough if packaging can omit assets or introduce dependencies. The release interaction checks loaded the actual self-contained HTML in jsdom and exercised sample data, outcomes, exports, save/clear, motion preference and help dismissal.
A fetch stub threw on unexpected network requests in that engineering test. The final archive was integrity-checked, and its embedded HTML matched the built artifact.
Those tests have limits. jsdom is not a visual layout engine, mobile Safari or a screen reader. Device acceptance was reported separately by the Chairman. A successful DOM interaction test is evidence for that interaction, not universal browser certification.
Keep dependencies with the delivery
The ZIP includes third-party notices for the React runtime and its included dependencies. A portable product should carry required notices with the bytes the customer receives.
The engineering lesson is to share the implementation and test the deliveries independently. A single component tree reduces drift; it does not remove environment differences.
React reference: https://react.dev/reference/react-dom/client/createRoot
Disclosure: TSHC makes QuoteBack. Product context: https://compliancechief8.gumroad.com/l/quoteback-founding-pilot?utm_source=developer_offline&utm_medium=blog&utm_campaign=quoteback_launch
About Safwan Bey
Safwan Bey is Chairman and CEO of Trinlah Sovereign Holdings Corporation (TSHC), a human rights consultant, SDG education advocate, and author of Benji and the SDGs: A Fox’s Journey to Save the World. Through TSHC Product Foundry, he leads work on practical digital products, data tools and education resources. This article is published by TSHC with AI assistance.
Top comments (0)