Shareable JSX component previews, served via GitHub Pages.
Each .html file is a self-contained page that runs React 18 + Tailwind CSS entirely in the browser — no build step required.
Live URL pattern: https://tdg.github.io/previews/<filename>.html
-
Copy
template.htmland give it a descriptive name, e.g.my-component.html. -
Paste your JSX into the clearly marked section:
<!-- ============================================================ PASTE YOUR JSX COMPONENT BELOW ... ============================================================ --> <script type="text/babel"> function App() { // your component here }
-
Update the
<title>tag at the top to match your component name. -
Commit and push to
main:git add my-component.html git commit -m "Add my-component preview" git push -
GitHub Pages will deploy within ~30 seconds. Your preview is live at:
https://tdg.github.io/previews/my-component.html
| Library | Version | Purpose |
|---|---|---|
| React | 18 | Component rendering |
| ReactDOM | 18 | DOM mounting |
| Babel Standalone | latest | In-browser JSX transpilation |
| Tailwind CSS | latest | Utility-first styling |
All loaded from CDN — no npm install, no bundler.
| File | Description |
|---|---|
template.html |
Blank starter — copy this for new previews |
example.html |
Hello World counter component |