https://github.com/tireymorris/hyperwave
🌊 build rich, performant UIs with the best possible developer experience
https://github.com/tireymorris/hyperwave
bun htmx hyperscript sqlite tailwind tsx typescript zod
Last synced: about 1 month ago
JSON representation
🌊 build rich, performant UIs with the best possible developer experience
- Host: GitHub
- URL: https://github.com/tireymorris/hyperwave
- Owner: tireymorris
- Created: 2023-08-30T20:24:10.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-02-12T02:32:59.000Z (3 months ago)
- Last Synced: 2025-04-02T18:51:06.303Z (about 1 month ago)
- Topics: bun, htmx, hyperscript, sqlite, tailwind, tsx, typescript, zod
- Language: CSS
- Homepage:
- Size: 681 KB
- Stars: 77
- Watchers: 4
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# hyperwave
hyperwave combines the benefits of traditional server-rendered applications with the flexibility of modern client-side frameworks.
- **Performance:** Server-side rendering ensures fast, responsive applications, tailored to produce the smallest possible bundles.
- **Developer experience:** HTMX and Tailwind provide a minimalistic and declarative approach to building user interfaces
- **Deployment:** bun applications can be easily deployed on any platform as portable binaries
## Getting started
Follow these steps to start developing with hyperwave:
1. Clone the repository:
```sh
git clone https://github.com/tireymorris/hyperwave.git
cd hyperwave
```
2. Install dependencies:
```sh
bun install
```
3. Start the development server:
```sh
bun dev
```
4. Visit `http://localhost:1234` in your browser.
5. Start editing `server.tsx` to see your changes live.
### Example
This is the endpoint serving our initial landing page:
```typescript
app.get("/", ({ html }) =>
html(
fetch instructions from /instructions
,
),
);
```
- The API serves a full HTML document to the client, which includes Tailwind classes and HTMX attributes
- The response is wrapped in a `` tag, a server-rendered functional component, which takes a `title` prop
- The button, when clicked, will issue a `GET` request to `/instructions` and replace the content of its parent div with the response.
- Includes a tiny hyperscript to toggle a class when the button is clicked
---
### Deployment
Build an executable for your current architecture with `bun run build`
`PORT` environment variable is available if needed (default is 1234)
Note: deploy `public/` with the executable, it contains the generated UnoCSS build.
---
### Components
- [bun](https://bun.sh/) provides the bundler, runtime, test runner, and package manager.
- [SQLite](https://bun.sh/docs/api/sqlite) is production-ready and built into Bun.
- [hono](https://hono.dev) is a robust web framework with great DX and performance
- [unoCSS](https://unocss.dev/integrations/cli) is Tailwind-compatible and generates only the styles used in application code.
- [htmx](https://htmx.org/reference/) gives 99% of the client-side interactivity most apps need.
- [hyperscript](http://hyperscript.org) is a scripting library for rapid application development.
- [zod](https://zod.dev/) is a powerful runtime validation library.
---
### Benefits and takeways
**Why bother switching to hyperwave?**
- Drastically reduces time from idea to rendered UI
- Very little cognitive friction to creating something new, after initial learning curve
**Speed / performance benefit**
- hyperwave is designed to generate the smallest possible payloads
- Deployment is as simple as compiling and running a binary 😎
**Simplicity**
- Bun saves us a ton of time and effort fighting tooling issues
- SPAs are over-prescribed and inherently introduce serious costs
**Dev UX benefit**
- Better primitives for quickly building UX
- Uniform interface simplifies writing and reading code
**Architectural benefit**
- Can scale backend and product independently, loosely coupled