https://github.com/t11z/render-my-web-app
A minimalist, fully client-side HTML playground.
https://github.com/t11z/render-my-web-app
claude-code coding css html js zero-knowledge
Last synced: 29 days ago
JSON representation
A minimalist, fully client-side HTML playground.
- Host: GitHub
- URL: https://github.com/t11z/render-my-web-app
- Owner: t11z
- License: mit
- Created: 2026-05-20T05:55:23.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-05-20T08:28:53.000Z (about 1 month ago)
- Last Synced: 2026-05-20T10:04:32.339Z (about 1 month ago)
- Topics: claude-code, coding, css, html, js, zero-knowledge
- Language: TypeScript
- Homepage: https://render-my.web.app
- Size: 146 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# ๐ช Render My Web App
> Write HTML, see it instantly. **Your code never leaves your browser.**
A minimalist, **fully client-side** HTML playground. Type HTML (with inline CSS &
JS) into a tiny editor with syntax highlighting and autocompletion, and it renders
live in a sandboxed preview. There is **no backend** โ nothing you type is ever
sent to a server.
## ๐ Zero Knowledge
This is the whole point of the project:
- โ **No server-side logic.** The app is static files only.
- ๐ง **Your HTML stays in your browser.** It's kept in `localStorage` and,
optionally, in the URL fragment (`#code=โฆ`) โ and browsers **never** send the
fragment to any server.
- ๐งฑ **Sandboxed preview.** Your code runs in an ``
**without** `allow-same-origin`, so it gets an opaque origin and cannot read the
app's storage, cookies, or DOM.
- ๐ซ **No tracking.** No analytics, no third-party trackers, no tracking cookies โ
nothing about your usage is collected.
## โจ Features
- ๐ HTML editor with syntax highlighting (CodeMirror 6)
- ๐ก Context-aware autocompletion for HTML, CSS (in ``) and JS (in `<script>`)
- โก Live, debounced preview + manual **Run** and **Auto-run** toggle
- ๐ Console & error panel (captured from the sandbox)
- ๐พ Autosave to `localStorage`
- ๐ Shareable links via a compressed URL fragment
- โฌ๏ธ Download as `.html` / open the preview in a new tab
- ๐ Dark / light theme
- ๐ Multilanguage: English, Deutsch, Espaรฑol, Franรงais, Portuguรชs, ็ฎไฝไธญๆ
- ๐ฆ Installable PWA, works offline
## ๐ Quick start
```bash
npm install
npm run dev # http://localhost:5173
```
Other scripts:
```bash
npm run build # type-check + production build into dist/
npm run preview # serve the production build locally
npm run lint # ESLint
npm run typecheck # tsc --noEmit
npm test # Vitest
```
Optional configuration โ copy `.env.example` to `.env`:
```bash
VITE_KOFI_HANDLE= # Ko-fi handle for the donate link. Empty = link hidden.
```
## ๐งฑ Tech stack
Vite ยท TypeScript ยท CodeMirror 6 ยท lz-string ยท vite-plugin-pwa. No framework, no
backend.
## ๐ Adding a language
1. Copy `src/locales/en.json` to `src/locales/<code>.json` and translate the values.
2. Register the locale in `src/i18n.ts` (`SUPPORTED`, `LOCALE_NAMES`, `DICTS`).
That's it โ the switcher and detection pick it up automatically. PRs with new
languages are very welcome! ๐
## โ๏ธ Deployment (Firebase Hosting, Spark / free plan)
Everything is static, so the free **Spark** plan is enough (no Cloud Functions).
Infrastructure is config-as-code in the repo: `firebase.json` (security headers,
caching) and `.firebaserc` (project id). CI/CD lives in `.github/workflows/`.
One-time setup:
1. Create a Firebase project (Spark plan) and a Hosting site.
2. Put the project id in `.firebaserc` and in the `projectId:` field of both
`firebase-hosting-*.yml` workflows.
3. Create a service account and add its JSON as the GitHub secret
`FIREBASE_SERVICE_ACCOUNT`.
4. (Optional) Add the repository **variable** `VITE_KOFI_HANDLE`.
Until `FIREBASE_SERVICE_ACCOUNT` is set, the deploy step is **skipped** (so CI
stays green); it activates automatically once the secret exists. Then:
- Every PR gets a **preview channel** deploy (URL posted on the PR).
- Every push to `main` deploys to the **live** channel.
## ๐ค Contributing
Contributions are very welcome โ this is an open-source project and we'd love your
help! ๐ Bug reports, translations, features, docsโฆ all appreciated. See
[CONTRIBUTING.md](./CONTRIBUTING.md) to get started.
## ๐ Support
If this is useful to you, consider buying us a coffee on **Ko-fi** โ
## ๐ Legal & License
Licensed under the [MIT License](./LICENSE). All bundled dependencies are MIT โ
their notices are reproduced in [THIRD-PARTY-NOTICES.md](./THIRD-PARTY-NOTICES.md)
(regenerate with `npm run notices`). The app ships a generic Privacy & Security
page (`privacy.html`) explaining the zero-knowledge model.