https://github.com/devexp-pro/reface
Reface is a embeddable fullstack framework designed for creating Hypermedia-Driven Applications without a build step, based on HTMX and Hono.
https://github.com/devexp-pro/reface
css deno html htmx jsx react spa ssr typescript
Last synced: 2 months ago
JSON representation
Reface is a embeddable fullstack framework designed for creating Hypermedia-Driven Applications without a build step, based on HTMX and Hono.
- Host: GitHub
- URL: https://github.com/devexp-pro/reface
- Owner: devexp-pro
- License: mit
- Created: 2024-08-07T15:43:17.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-01-28T16:53:09.000Z (3 months ago)
- Last Synced: 2025-01-28T17:38:39.409Z (3 months ago)
- Topics: css, deno, html, htmx, jsx, react, spa, ssr, typescript
- Language: TypeScript
- Homepage: https://reface.deno.dev
- Size: 1.39 MB
- Stars: 15
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Roadmap: roadmap.md
Awesome Lists containing this project
README
# [Reface](https://reface.deno.dev/)
[](https://jsr.io/@vseplet/reface)
[](https://jsr.io/@vseplet/reface)
[](https://discord.gg/gT4gvVwqb8)
Modern web framework for building interactive applications with Islands
Architecture.
## Features
- 🎯 **Type-safe Templates** - Full TypeScript support with JSX
- 🧩 **Template Composition** - Mix JSX and template literals
- 🔌 **Plugin System** - Extensible composition pipeline
- 🎨 **Styled Components** - CSS-in-JS with type safety
- 🏝️ **Partial System** - Interactive components with HTMX
- 🚀 **Framework Agnostic** - Core composition engine
## Quick Start
```typescript
import { RefaceComposer } from "@reface/core";
import { StyledPlugin } from "@reface/plugins/styled";
import { PartialsPlugin } from "@reface/plugins/partials";
// Create composer instance
const composer = new RefaceComposer();
composer.use(new StyledPlugin());
composer.use(new PartialsPlugin());
// Create styled component
const Button = styled.button`
& {
background: var(--primary-color, #3182ce);
color: white;
padding: 0.5rem 1rem;
}
`;
// Create interactive component
const Counter = partial(async () => {
const count = 0;
return (
{count}
Increment
);
}, "counter");
// Create page template
function HomePage() {
return (
Welcome to Reface
);
}
// Compose HTML
const html = composer.render();
```
## Examples
- [📚 Basic Components](./examples/basic) - Component composition
- [🧩 Styled Components](./examples/styled) - CSS-in-JS examples
- [🏝️ Partial Components](./examples/partials) - Interactive components
- [🔌 Custom Plugin](./examples/plugin) - Plugin development
## Documentation
- [Architecture](./docs/architecture.md) - Core concepts and composition design
- [Components](./docs/components.md) - Component composition system
- [Styling](./docs/styling.md) - CSS-in-JS styling
- [Partials](./docs/partials.md) - Interactive components
- [Plugins](./docs/plugins.md) - Plugin system
## Contributing
We welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md)
for details.
## License
MIT © [Reface](./LICENSE)