Reface

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

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 (
  ​  ​<div>
  ​  ​  ​<span>{count}</span>
  ​  ​  ​<Button {...Counter.trigger()}>Increment</Button>
  ​  ​</div>
  ​);
}, "counter");
// Create page template
function HomePage() {
  ​return (
  ​  ​<div>
  ​  ​  ​<h1>Welcome to Reface</h1>
  ​  ​  ​<Counter />
  ​  ​</div>
  ​);
}
// Compose HTML
const html = composer.render(<HomePage />);

Examples

📚 Basic Components - Component composition
🧩 Styled Components - CSS-in-JS examples
🏝️ Partial Components - Interactive components
🔌 Custom Plugin - Plugin development

Documentation

Architecture - Core concepts and composition design
Components - Component composition system
Styling - CSS-in-JS styling
Partials - Interactive components
Plugins - Plugin system

Contributing

We welcome contributions! Please see our Contributing Guide for details.

Reface

Features

Quick Start

Examples

Documentation

Contributing

License