https://github.com/chuanqisun/esplay
Write JSX/TSX in browser without build step
https://github.com/chuanqisun/esplay
Last synced: 8 months ago
JSON representation
Write JSX/TSX in browser without build step
- Host: GitHub
- URL: https://github.com/chuanqisun/esplay
- Owner: chuanqisun
- Created: 2024-07-16T21:54:58.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-09-07T03:30:48.000Z (about 1 year ago)
- Last Synced: 2025-01-17T15:52:03.605Z (9 months ago)
- Language: JavaScript
- Size: 34.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ESPlay
Turn browser into a buildless prototyping environment. Works with:
- React
- TypeScript/TSX/JSX
## Quickstart
```html
ESPlay Demo
{
"react": "^18.3.1",
"react-dom": "^18.3.1?bundle-deps"
}
import React, { useState } from "react";
import ReactDOM from "react-dom/client";
function App() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
```
## Examples
- [Pomodoro Timer](./examples/pomodoro.html): React + Ant Design
- [Contact book](./examples/contact-book.html): React + MUI
- [RSS Reader](./examples/contact-book.html): Vanilla JS + RxJS
## Caveats
The following issues are under investigation. Suggestions are welcome.
- No dynamic import `import(...)`
- No relative file import `import './MyComponent`
- No Source map